Accessibility

Web accessibility guide and implementation details for this site
accessibility web design

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

accessibility web design