Accessibility Statement

This website is committed to ensuring digital accessibility for people with disabilities. The user experience is continually improved for everyone, and the site conforms to the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA specification.

To achieve this commitment, this site is built upon GitHub's open-source Primer Design System (opens in a new tab), inheriting its robust accessibility foundations, design primitives, and interactive guidelines.

Implemented Accessibility Features

The following accessibility measures have been implemented throughout the site:

1. Semantic HTML & ARIA Landmarks

  • Skip Navigation Link: A keyboard-accessible skip link is placed at the top of every page, allowing keyboard-only users to bypass navigation and jump directly to the main content.
  • Semantic Regions: Content is enclosed within appropriate HTML5 landmark elements: <header> and <nav> for site navigation, <aside> for sidebar details, <main> and <article> for core page content, and <footer> for site footer. The projects filter area uses the <search> element for improved screen reader navigation.
  • Heading Hierarchy: Each page contains a single primary <h1> element with logical sequential headings (<h2>, <h3>) to produce a coherent screen-reader outline.
  • ARIA Labels: Navigation regions, form controls, and interactive elements carry explicit aria-label or aria-labelledby attributes where native semantics are insufficient.
  • No-JavaScript Fallback: Protected email links include a <noscript> message pointing to LinkedIn when JavaScript (required for the anti-scraping email obfuscation) is unavailable.

2. Keyboard & Focus Management

  • Visible Focus Rings: Following Primer's interactive guidelines, all keyboard-focusable elements display a highly visible, high-contrast custom focus ring during keyboard navigation.
  • No Keyboard Traps: Keyboard focus flows logically through the navigation headers, accordion detail menus, and search filters without becoming trapped or lost.
  • Interactive Controls: Tab order is managed dynamically for collapsed states (such as the theme selector popup or accordion card panels), updating their focusability states when expanded.
  • Decorative Icons: Decorative icons use Primer Octicons which are either dynamically labeled or cleanly ignored via aria-hidden="true" depending on their context.

3. Visual Standards & Design Tokens

  • Color Contrast: By utilizing Primer primitives design tokens, all text, headings, and interactive elements maintain a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large headings.
  • High Contrast Modes: Conformance is maintained across all color modes—including the specialized Light High Contrast and Dark High Contrast themes—specifically designed to support users with low vision.
  • Text Resizing: All text uses relative units (rem) which adapt to the browser's root font-size configurations. The layout supports zooming up to 200% without layout disruption or clipping.
  • Reduced Motion Support: Theme transitions and interactive accordion toggles respect the user's operating system setting for prefers-reduced-motion, disabling animations automatically.

4. Modern Web Standards & Links

  • New Tab Warnings: All links that open in a new tab (target="_blank") include a screen-reader-visible <span class="sr-only">(opens in a new tab)</span> indicator and carry rel="noopener" for security.
  • Screen‑Reader‑Only Content: The .sr-only utility class uses a modern clip-path: inset(50%) pattern (instead of legacy clip methods) and becomes visible on focus for keyboard users via :focus-within and :active selectors.

Validation & Testing

  • Automated Audits: Pages are continuously audited programmatically using Axe-core (via Playwright and programmatic accessibility runners) to confirm WCAG 2.1 AA compliance with zero violations.
  • Keyboard Walkthroughs: Focus trapping, tab order, and skip-link functionality are manually tested in modern browsers.
  • Screen Reader Testing: Outline structures are verified with screen readers to confirm logical heading hierarchy.

Feedback & Contact

If you encounter any accessibility barriers or have suggestions for further improvement, please reach out: