Web Accessibility Guide

This site is designed to be accessible to all users, including those with disabilities. I’ve implemented the following accessibility features to ensure a better experience for everyone.

Typography and Readability

  • Font Selection: I use Inter for the UI and Montserrat for headings, with proper fallbacks.
  • Text Sizing: Text is sized using relative units (rem) to allow for browser text resizing.
  • Line Height: I use adequate line height (1.5 for body text) to improve readability.
  • Letter and Word Spacing: Proper spacing between characters and words.
  • Color Contrast: All text meets WCAG 2.1 AA standards for contrast (at least 4.5:1 for normal text, 3:1 for large text).
  • Maximum Width: I limit text width to improve readability (70-80 characters per line).

Keyboard Accessibility

  • Focus Indication: All interactive elements have a visible focus state for keyboard users.
  • Focus Order: Elements receive focus in a logical, intuitive order.
  • Skip Links: I provide a “Skip to content” link that appears when focused to bypass navigation.
  • Keyboard Traps: No keyboard traps – users can navigate through all components using only a keyboard.

Screen Reader Support

  • Semantic HTML: I use proper semantic HTML elements (nav, main, section, article, etc.).
  • ARIA Attributes: I use ARIA labels, roles, and states where appropriate.
  • Alt Text: All meaningful images have descriptive alternative text.
  • Form Labels: All form inputs have properly associated labels.
  • Table Headers: Data tables use proper header cells and associations.
  • Consistent Layout: Navigation elements remain in the same place across pages.
  • Heading Structure: I use a logical heading hierarchy (h1 → h2 → h3) without skipping levels.
  • Landmarks: I use HTML5 landmark elements to define regions of the page.
  • Breadcrumbs: Where appropriate, I provide breadcrumb navigation.

Images and Media

  • Alt Text: All non-decorative images have appropriate alt text.
  • Decorative Images: Decorative images have empty alt attributes (alt="") and aria-hidden=“true”.
  • SVG Accessibility: SVGs have appropriate title elements or aria-label attributes.
  • Video Captions: Videos include captions or transcripts.

Forms and Interactive Elements

  • Associated Labels: All form fields have explicitly associated labels.
  • Error Messages: Form errors are clearly identified and described.
  • Large Target Areas: Interactive elements have a minimum size of 44×44 pixels.
  • Sufficient Spacing: Interactive elements have adequate spacing to prevent accidental activation.

Color and Contrast

  • Color Independence: I don’t rely solely on color to convey information.
  • Contrast Ratios: Text has a minimum contrast ratio of 4.5:1 (3:1 for large text).
  • Focus Visibility: Focus indicators have sufficient contrast against their background.
  • Link Identification: Links are distinguished from surrounding text by more than just color.

Responsive Design

  • Zoom Support: Content is accessible when zoomed up to 200%.
  • Orientation Support: Content works in both portrait and landscape orientations.
  • Reflow: Content reflows to a single column at narrow widths without horizontal scrolling.
  • Text Resize: Layout accommodates text resizing up to 200% without loss of content or functionality.

Testing Your Accessibility

You can test the accessibility of this site by:

  1. Keyboard Navigation: Try navigating using only your keyboard (Tab, Shift+Tab, Enter, Space).
  2. Screen Reader Testing: Use a screen reader like NVDA, JAWS, or VoiceOver.
  3. Text Zoom: Increase your browser text size to 200% (Ctrl/Cmd +).
  4. Contrast Analyzer: Add ?a11y-check to the URL to open my built-in contrast analyzer.
  5. Disabling Images: Turn off images to ensure content is still understandable.

Accessibility Statement

I am committed to ensuring my website is accessible to all users. While I strive to adhere to the WCAG 2.1 AA standards, I recognize that there may be areas for improvement. If you encounter any accessibility barriers on this site, please contact me.

Resources for Web Accessibility