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 aims to conform to the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA specification.

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.

2. Keyboard & Interactive Element Support

  • Focus Indicators: All interactive elements display a visible, high-contrast focus outline during keyboard navigation.
  • Native Dialog Modals: CV and resume preview modals use the native <dialog> element with showModal(), providing built-in focus trapping and Escape-to-close behavior without custom JavaScript.
  • Dynamic Filter Controls: Category filter buttons on the projects page use aria-pressed states so screen readers are notified when filters are toggled. Dropdowns for sorting and institution filtering carry explicit aria-label attributes.
  • Decorative Icons: All Font Awesome icons (<i> elements) are marked aria-hidden="true" so they are bypassed by screen readers.

3. Visual & Responsive Design

  • Color Contrast: Light and dark theme color tokens use a unified academic navy palette and meet WCAG 2.1 AA contrast ratios of at least 4.5:1 for normal text and 3:1 for large text. Category badges use solid foreground/background token pairs verified against AA thresholds. The color-scheme: light dark declaration and theme-color meta tags ensure browser UI elements match the selected theme.
  • Responsive Layout: The layout adapts across device sizes using CSS media queries and container-based sizing. Dynamic viewport units (dvh, dvw) are used instead of static vh/vw to avoid layout issues on mobile browsers with dynamic toolbars.
  • Scrollbar Stability: scrollbar-gutter: stable is applied to prevent content layout shift when scrollbars appear or disappear across pages.
  • Text Readability: Headings use text-wrap: balance to prevent orphans, and body text uses text-wrap: pretty for improved line-breaking. Text is sized in relative units and respects user font-size preferences.

4. Motion & Performance

  • Reduced Motion: The theme toggle and page transitions respect the user's prefers-reduced-motion operating system setting, skipping animation when requested.
  • Image Loading: Below-fold images use loading="lazy" for deferred loading. All images include explicit width and height attributes to reserve space and prevent layout shifts during loading.

5. External Links & New Tabs

  • 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 checked with link validators, HTML conformance tools, and accessibility linting to catch structural issues.
  • Keyboard Walkthroughs: Focus trapping, tab order, and skip-link functionality are tested manually in modern browsers.
  • Screen Reader Testing: Page outline structures are verified with screen readers to confirm logical heading hierarchy and landmark navigation.

Feedback & Contact

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