Accessibility
Statement

Accessibility Statement

Nathan Chaim is committed to ensuring digital accessibility for all users, including people with disabilities. We continually improve the user experience for everyone and apply the relevant accessibility standards.

Legal Basis

This website strives to conform to the Israeli Equal Rights for Persons with Disabilities Law (5758-1998) and the Israeli Accessibility Regulations (5773-2013), based on Israeli Standard IS 5568, which adopts WCAG 2.1 Level AA as its technical specification.

Conformance Status

Partially conformant — This website partially conforms to WCAG 2.1 Level AA. "Partially conformant" means that some parts of the content do not yet fully conform to the accessibility standard due to technological limitations or the scale of the work required, as detailed in Section 3.

Technical Specifications

This website is built using HTML5, CSS3, and vanilla JavaScript. Accessibility relies on compatibility between the following technologies: HTML, WAI-ARIA, CSS, JavaScript, and assistive technologies (screen readers, keyboard-only navigation, switch access).

Scope of This Statement

This statement covers the portfolio website accessible at its primary URL, including the homepage, visualizations gallery, websites gallery, videos section, about section, accessibility statement page, and all modal dialogs.

Implemented Accessibility Features

✅ Fully Implemented

• ✓
  Keyboard Navigation

  All interactive elements — navigation links, buttons, modals, category tabs, and footer links — are fully operable using keyboard only (Tab, Shift+Tab, Enter, Space, Escape). Focus order follows logical reading order.
• ✓
  Visible Focus Indicators

  All focusable elements display a clearly visible focus ring on keyboard focus (yellow-green outline, 2px, minimum 3:1 contrast ratio against adjacent colors). Focus indicators meet WCAG 2.4.7 and 2.4.11.
• ✓
  Skip to Main Content Link

  Two skip links are present at the top of every page — one in English ("Skip to main content") and one in Hebrew ("דלג לתוכן הראשי"). They become visible on keyboard focus and allow users to bypass repetitive navigation blocks (WCAG 2.4.1).
• ✓
  Alt Text on All Images

  Every meaningful image — including all AI visualization renders, website screenshots, the profile photo, and the logo — has a descriptive alt attribute. Decorative images use alt="" so screen readers ignore them (WCAG 1.1.1).
• ✓
  Color Contrast — Text

  Primary text (#EDECEB on #07080F) achieves a contrast ratio of 19.4:1, far exceeding the WCAG AA minimum of 4.5:1. Secondary/muted text achieves a minimum of 3.1:1. Interactive element contrast meets 3:1 for non-text (WCAG 1.4.3, 1.4.11).
• ✓
  Heading Hierarchy

  The page uses a correct and sequential heading hierarchy (H1 → H2 → H3) without skipping levels. The main page title is H1 (NATAN), section titles are H2, and subsections are H3. This enables screen reader users to navigate by headings (WCAG 1.3.1, 2.4.6).
• ✓
  ARIA Labels on Interactive Elements

  All buttons, links, and form controls that rely on visual context have aria-label or aria-labelledby attributes. Icons-only buttons (WhatsApp, LinkedIn, Email, Close modal) have descriptive accessible names. Modals use role="dialog", aria-modal="true", and aria-labelledby (WCAG 4.1.2).
• ✓
  Language Declaration

  The primary page language is declared as lang="en" on the HTML element. Hebrew sections within the page use lang="he" and dir="rtl" to ensure correct pronunciation by screen readers (WCAG 3.1.1, 3.1.2).
• ✓
  Semantic HTML Structure

  The page uses semantic HTML5 landmarks: <nav>, <main>, <section>, <footer>, <article>. All lists use <ul>/<li> elements. Sections have aria-labelledby attributes linking to their headings (WCAG 1.3.1).
• ✓
  Responsive Design

  The website adapts to all viewport sizes from 320px to 2560px+ without horizontal scrolling or loss of content. Text can be resized up to 200% without loss of functionality. Viewport is not locked (WCAG 1.4.4, 1.4.10).
• ✓
  Modal Focus Management

  When a modal opens, focus is moved to the modal container. The Escape key closes all modals. Clicking outside the modal closes it. Focus is managed so keyboard users cannot interact with background content while a modal is open (WCAG 2.1.2).
• ✓
  Page Title

  Every page has a meaningful, descriptive <title> element that identifies both the specific page and the site. The accessibility document page has its own distinct title (WCAG 2.4.2).
• ✓
  No Color-Only Information

  No information is conveyed through color alone. Status indicators (conformant/not conformant) use both color and text labels. Interactive state changes include shape/text changes in addition to color (WCAG 1.4.1).
• ✓
  No Keyboard Trap

  Users can always navigate away from any component using only the keyboard. The Tab key moves focus through all interactive elements in order. No component traps keyboard focus permanently (WCAG 2.1.2).
• ✓
  Consistent Navigation

  Navigation links appear in the same location and order on every page. The logo always links to the homepage. The same links appear in the same relative order throughout the site (WCAG 3.2.3, 3.2.4).
• ✓
  Touch Target Size

  All interactive elements meet the minimum touch target size of 44×44px as required by WCAG 2.5.5 and iOS/Android accessibility guidelines. Icon buttons in the navigation are at minimum 44px in both dimensions (WCAG 2.5.5).
• ✓
  Accessible Video Link

  The video content is presented as a clickable thumbnail linking to YouTube rather than an auto-playing embedded video. Users have full control over playback. The link is clearly labeled "Watch on YouTube" (WCAG 2.2.2).

Elements Not Yet Fully Accessible

• ✗
  Video Captions (WCAG 1.2.2, 1.2.4)

  Issue: The AI-produced video "להיות עצמך" on YouTube does not include captions or subtitles. Barrier: Deaf and hard-of-hearing users cannot access the audio content. Reason: The video is externally hosted on YouTube; captions require post-production effort and Hebrew transcription. Plan: Hebrew captions will be added to the YouTube video within 6 months of this statement.
• ✗
  Audio Description — Background Video (WCAG 1.2.5)

  Issue: The background video displayed on the homepage (particle animation) does not have an audio description. Mitigating factor: The background video is purely decorative and conveys no informational content — all meaningful content is available as text and images. The video does not supplement or replace any textual information. Classification: Decorative media — disproportionate burden to add audio description for a non-informational animation.
• ⚠
  Before/After Image Comparison Slider — Keyboard (WCAG 2.1.1)

  Issue: The before/after visualization comparison slider requires mouse drag or touch to operate. Keyboard-only users cannot currently adjust the slider position. Impact: Keyboard and switch-access users cannot independently compare before/after states. Mitigation: Both the Before and After images are individually visible at the default 50% position; neither image is completely hidden. Alt text is present on both images. Plan: Arrow key support for the slider handle will be implemented in the next development cycle.
• ⚠
  Cursor Proximity Text Effect (WCAG 1.4.13)

  Issue: The interactive letter-scaling effect in the hero section responds to mouse cursor proximity. On keyboard-only or touch devices, this effect does not activate. Impact: Visual enhancement only — the text content ("NATAN" and the tagline) is fully readable at its base state without any interaction. The effect is decorative and does not convey meaning. No information is lost when the effect is inactive.
• ⚠
  High Contrast Mode (WCAG 1.4.3 — Enhancement)

  Issue: The website does not offer a user-controlled high-contrast toggle widget beyond the system-level settings. Note: The base design already exceeds WCAG AA contrast requirements significantly (primary text ratio 19.4:1). However, no custom high-contrast mode is provided. Plan: A high-contrast CSS class will be implemented as an accessibility widget option in the next iteration.
• ⚠
  Font Size Widget (WCAG 1.4.4 — Enhancement)

  Issue: The site does not provide in-page font size increase/decrease controls. Note: All text is responsive and the page supports browser-level zoom to 200% without loss of content or functionality, meeting WCAG 1.4.4. However, a dedicated font-size widget is recommended for users unfamiliar with browser zoom. Plan: Font size controls (+/−) will be added to the accessibility widget.

Accessibility Coordinator

If you encounter any accessibility barrier on this website, or if you have feedback on how we can improve, please contact us using any of the following methods:

When submitting an accessibility complaint, please include: the URL of the page where you experienced the barrier, the assistive technology and browser you are using, and a description of the issue.

Enforcement

If you are not satisfied with our response, you may submit a complaint to the Israeli Commission for Equal Rights of Persons with Disabilities at the Ministry of Justice: gov.il/nechut-online

Using the Accessibility Button

This website includes a floating accessibility button located in the bottom-left corner of every page. It is represented by the universal accessibility symbol (♿) in an electric yellow-green circle.

How to access it

• Mouse: Click the yellow-green circle button in the bottom-left corner of any page.
• Keyboard: Press Tab until the button receives focus, then press Enter or Space to activate it.
• Screen reader: The button is announced as "Accessibility Statement — הצהרת נגישות".

What the button does

Clicking the accessibility button opens this Accessibility Statement in a modal dialog. The modal can be closed by:

• Pressing the Escape key
• Clicking the × button in the top-right corner of the modal
• Clicking anywhere outside the modal

The Accessibility Statement is also accessible from the website footer via the "Accessibility" text link.

Recommendations for Future Improvements

• →
  Hebrew Captions on YouTube Video

  Transcribe and upload Hebrew (and English) captions to the YouTube video "להיות עצמך" using YouTube's caption editor. Priority: High. Target: within 6 months.
• →
  Arrow Key Support for Before/After Slider

  Add keyboard event listeners to the comparison slider handle element: Left/Right arrow keys should move the slider in 5% increments. The handle element should have role="slider", aria-valuemin, aria-valuemax, and aria-valuenow. Priority: High.
• →
  Font Size Adjustment Widget

  Add ＋ / − font size controls to the accessibility widget panel, using CSS custom properties to scale body font-size. Priority: Medium.
• →
  High-Contrast Mode

  Implement a CSS class toggle (.high-contrast) that increases all foreground/background contrast to at minimum 7:1 (WCAG AAA). Store preference in localStorage. Priority: Medium.
• →
  Reduced Motion Preference

  Honour the prefers-reduced-motion CSS media query for all animations (floating orbs, cursor proximity effect, scroll-driven video). Users who have enabled reduced motion in their OS should see a static site. Priority: Medium.
• →
  Regular Accessibility Audit

  Commission an independent accessibility audit using automated tools (axe-core, WAVE) combined with manual testing using NVDA + Chrome and VoiceOver + Safari. Recommended frequency: annually, or after significant site changes. Priority: Medium.
• →
  Live Accessibility Status Page

  Create an automatically updated accessibility status page that runs axe-core on each deployment and publishes results. This demonstrates ongoing commitment and keeps the accessibility statement accurate. Priority: Low.

Accessibility QA Testing Checklist

Use this checklist when performing accessibility testing on this website. Test using the combinations: NVDA + Chrome (Windows), JAWS + Edge (Windows), VoiceOver + Safari (macOS/iOS).

WCAG 2.1 AA — Full Requirements Table

All 50 success criteria at Level A and AA under WCAG 2.1, with conformance status for this website. Criteria introduced in WCAG 2.1 (not in WCAG 2.0) are marked 2.1 New.