Getting Started

Accessibility

We want to design our applications to work for all people, whatever their hardware, software, language, location, or ability. We aim to support accessibility and encompass all disabilities that affect access to our products, including auditory, cognitive, neurological, physical, speech, and visual.

Accessible UI colors

Colored UI components are those most commonly expected worldwide, as used on signage and user interfaces:

  • Notice is amber
  • Negative is red
  • Positive is green
  • Informative is blue

These are the colors used for UI elements such as (buttons, badges and labels) have their colors set to conform with WCAG 2.1 Level AA guidelines for text at font-size 16px. The required color contrast ratio is 4.5:1 or better.

notice negative positive informative

Focus ring styling

Interactive elements require a visual indicator that make them obvious for sighted keyboard users, who use “tabbing” to get around the webpage’s accessibility tree (a.k.a. tab index).

Our default focus ring offsets a solid border slightly lighter than the base text color to work with light and dark backgrounds.

Browsers that don’t implement :focus-visible will still use their built-in focus ring styles.

Colored buttons etc with :focus-visible should receive the same color change as their currentColor value.

JS powered components

JS powered components should enable usability via keyboard and assistive tech:

For all these components, keyboard tab, enter, space and escape can be used to expand and retract hidden panels, or to switch between tabs or slides. aria attributes have also been built in.

Note: the modal component (in these docs, at least) also requires the AlpineJS Focus plugin to trap the focus within the modal panel while it is open. This focus trapping can also be added to the offcanvas component.

Building an accessible application

Achieve WCAG Level AA by making sure we include:

  • Properly structured HTML
  • Heading hierarchy
  • Sufficient color contrast for text and backgrounds
  • Meaningful alt tags on images
  • Keyboard tabbing navigation, modals, dropdowns, etc.
  • ARIA attributes where required
  • And more

See WCAG 2.1 at a Glance for a brief introduction.

Resources

Here are several resources to help if you're unfamiliar with web accessibility. This is very much an inexaustive list and we'll aim to continue to add to it.

Guidelines

Online accessibility tools

Browser extensions etc