<

Voyager
Voyager

Accessibility

Web accessibility ensures that people with all levels of ability can perceive, understand, navigate, interact with, and contribute to the applications we create.

Voyager intends to be as inclusive as possible.

This means that pages are Perceivable, Operable, Understandable, and Robust.

This means providing keyboard interaction alternatives to mouse-based actions, properly identifying form fields and buttons, providing text-based alternatives for images, videos, and icons, as well as building ocmponents that convey their identity operation model, and state to assistive technologies.

All levels of ability include, but are not limited to:

  • 9.4% of adults with vision trouble, and 8% of men and 0.5% of women who are color blind (Sources: 1, 2)
  • 15.1% of adults with physical functioning difficulty (Source)
  • 4.4% of adults with cognitive disabilities (Source)

Anne Gibson's Accessibility Alphabet provides a few real-world situations that present a need for accessible content.

Ideally, products should be tested with real user, but that is not always possible. In those situations, use the following checklist to make sure your product is more accessible:

  • Use the correct HTML element for your content.
  • Use the correct lang attribute on content.
  • Make sure there is enough contrast between text and its background.
  • Use HTML landmarks.
  • Provide users a way to skip past top-level navigation to access a page's main content.
  • Use ARIA attributes when appropriate.
  • Do not rely on color or visual position alone to convey meaning and information.
  • Every interactive item can be accessed using only a keyboard in the expected order and without being trapped.
  • Focus state is used to help users navigate and understand where they are on the page.
  • Present interactive elements in a logical and predictable order.
  • All forms, field items, links, page titles, and headers are properly and clearly labeled.
  • All images must have an alt attribute set. Decorative images alt can be left blank.
  • Hide decorative elements from screenreaders.
  • Any 'All caps' text that is not an abbreviation should be typed in its proper casing, then use CSS to adjust it.
  • Don’t flash anything over 3 times in 1 second.
  • Don’t auto-play media unless the user set that option.
  • Anything with a timeout (except for live events) must allow a user to extend the time limit.

Finally, compliance != usable. Test the application with actual users.