Accessibility

Be sure to follow best practices to make our products more accessible:

Structure documents properly. Use the right HTML tags when marking up navigation, lists, links, controls, etc.
Label everything. Every control or form element must have a text label. You can use the visibility classes to hide labels visually while maintaining accessibility. Use `alt` attributes on images to describe them.
Don't rely on solely visual cues. Content should make sense even if it's being read by a screen reader. Content with color-based labeling should also have text-based ways of being identified.
Make all content navigable regardless of device. All components should work with keyboards, mice, and touch screens. If content is primarily accessed via an interactive map, it should also be accessible via text search or some other non-map method.

Resources

Tools

Contrast

For users with low vision, proper typographic contrast is important. Both size and color matter. Text colors should stand out from background colors. Use the Color Contrast Checker to choose accessible colors. The contrast ratio should at least be 1:4.5 for normal text and 3:1 for large text.

Screen readers

Adding display: none to an element will prevent screen readers from reading it. There are better ways to hide content while still making it accessible to screen readers.

Show for Screen Readers Only

To visually hide content, while still allowing assistive technology to read it, add the .show-for-sr class.

<p class="show-for-sr">This paragraph can only be read by a screen reader.</p>
<p>There's a paragraph above this one, but you can't see it.</p>

There's a paragraph above this one, but you can't see it.

Hide for Screen Readers Only

To hide text from assistive technology, while still keeping it visible, add the attribute aria-hidden="true". This doesn't affect how the element looks, but screen readers will skip over it.

<p aria-hidden="true">This text can be seen, but won't be read by a screen reader.</p>

Note: It's usually not a good idea to hide content from screen readers, but aria-hidden is best used to mask purely visual elements of a page. Try to avoid purely decorative text and images.

Skip links

In a product with a lot of navigation, a screen reader has to read through the entire navigation to get to the content. This can be remedied by adding a skip link before the navigation, which takes the user to the main content.

The .show-on-focus class hides an element, except when it has focus. Adding tabindex to the target element makes it focusable—a negative value (e.g. tabindex="-1") means the element is focusable, but not reachable via sequential keyboard navigation; tabindex="0" means the element is focusable in sequential keyboard navigation.

<a class="show-on-focus" href="#main-content">Skip to content</a>
<header id="header" role="banner">
  <!-- a lot of navigation -->
</header>
<main id="main-content" role="main" tabindex="0">...</main>

Focus styles

Never remove CSS outlines!

It is tempting to use :focus { outline: none; } to removing outlines in CSS. But this creates issues for people navigating via keyboard, removing any visible indication of focus. Methods like onfocus="blur()" are even worse, preventing users from interacting with elements at all.

Instead, use the what-input library, which detects the user's current input device and adjusts the CSS accordingly. It let's us disable outlines for mouse users, but not for keyboard users.

TODO: explain how to include what-input if not using Foundation JS...

Note: Custom Sass components can use the @include disable-mouse-outline; at-rule to add what-input styles.