Accessibility

What is Web Accessibility?

TIP

Most developers think of accessibility as something to do with screen readers or checklist, in any case, you have to choose between great design and accessibility. But the truth is that accessibility is not a feature: It's about making sure that everyone can use your website, regardless of their abilities (such as visual, auditory, motor, or cognitive).

Your website should be available and functionally operable for everyone. And that starts, for example, with the right use of HTML elements, color contrast, focus states, and keyboard navigation.

General Guidelines

• Use Semantic HTML elements to provide meaning to the content.
• Use ARIA roles to provide additional information to assistive technologies.
• Use color contrast to ensure readability for users with low vision.
• Use Focus State to indicate which element is currently focused.
• Use keyboard navigation to navigate through the page without a mouse.
• Use screen reader text to provide additional information for screen reader users.
• Use alt text to describe images for screen reader users.
• Use Headings to structure the content.
• Use labels to describe form elements.
• Use error messages to provide feedback to users.
• Use Tooltips to provide additional information.

Semantic HTML

TIP

Always select HTML elements by their content, not by their appearance. This is called semantic HTML. This way, structure and meaning is conveyed to the browser and assistive technologies.

For example, use <nav> for navigation, <header> for the header, <main> for the main content, <footer> for the footer, and <aside> for the sidebar.

Some HTML elements come with built-in accessibility features. For example, the <button> element is focusable and can be activated with the Enter key. The <a> element is focusable and can be activated with the Enter key and Spacebar. So try using these elements instead of <div> or <span>.

Focus State for Keyboard Users beta

When a user navigates through a page using the keyboard, the focus state is important to indicate which element is currently focused. To enhance the focus state for keyboard users, use the :focus-visible pseudo-class (see focus-visible() mixin). This class is only applied when the user navigates using the keyboard, not the mouse.

TIP

Use the keyboard Tab key to navigate through the interactive items below and show the :focus-visible state.

Example Link

I'm a magnificent tooltip.

You can add tabindex="0" to make an element focusable. This is useful for elements that are not focusable by default (see tooltip example).

Show Code

<button class="c-btn -primary">Primary Button</button>
<a href="#" class="c-link -underline m-r-l">Example Link</a>
<div class="js-tooltip h-link-color" title="I'm a magnificent tooltip." tabindex="0">
  <span class="fa fa-2x fa-info-circle" aria-hidden="true"></span>
  <span class="h-sr-only">I'm a magnificent tooltip.</span>
</div>