Design Phase

This section highlights accessibility considerations specific to design. This assumes wireframe level details have been ironed out in the strategy phase.

These guidlines are intended to compliment solid design fundamentals, and responsive web design best practices. Creating a clear, functional design is the best place to start.

Perceivable

1.1 Non-text content

Critical Form inputs have properly associated text labels.

Labeled form fields mean a screen reader can explain what information should be entered.

How to do it

Although not required, it is good practice to design forms with visible labels. Relying on placeholder text within an input field is unreliable, and it goes away for sighted users at the moment they might need to reference it.

1.3 Page structure

Use more than one sense for instructions.

Avoid relying solely on things like shape, sound, position, and size to identify page elements in instructions.

How to do it

Don’t use sound alerts in general. But if you do, also include a text indicator of what is going on.

Make instructions detailed but clear, considering that elements may move depending on the device, or may be interacted without visual feedback.

1.4 Text size, links, and color contrast

Critical Color alone is not used to distinguish links or other visual elements.

How to do it

Make the links clearly links. Give a visual indicator beyond color to call them out from other text. This is often an underline, but could be an arrow, a background or some other visual cue. Context can also be used. For example, a clearly designed navbar is clearly perceived as something the user can interact with without relying on color distinction.

Don't forget to design for hover, active, focus, and visited link states in addition to the standard link style.

Pro Tip - If the design was converted to grayscale, would the links and all other visual elements still be obvious?

Audio that plays automatically has controls to play, pause, mute, or adjust volume.

How to do it

The best practice is to avoid audio that plays automatically in the first place. But if you have to, give users control of that audio, so it isn’t competing with screen readers, or generally annoying everyone.

Note that short audio alerts less than three seconds are excluded from this rule.

Critical Level AA Text has a contrast ratio of at least 4.5:1.

Make the text easy to read for everyone. This not only helps those with vision impairments, it means everyone is more likely to be able to read the site in a wider range of environments.

How to do it

Typically this is fairly easy to achieve by tuning the text colors slightly in the design phase and checking them with a tool like the Web AIM Contrast Checker.

Pro Tip - Make sure to pay attention to the footer or blocks that have a different background color. Also, handling various link states in these special cases is an easy thing to miss.

Critical Level AA Large text - at least 24px or 19px bold has a contrast ratio of at least 3:1.

With larger text you can get away with lower contrast. The goal of legible content is the same.

How to do it

The same process as regular text colors works here and is covered in the Web AIM Contrast Checker.

Level AA Page is readable and functional when the text size is doubled.

Accommodate mild vision impairments by allowing text to scale without breaking the layout or functionality of the site.

How to do it

Well planned responsive breakpoints should provide compliance here. Be aware of equalized height blocks or any content area that has a limited space, as these are the areas that may cause problems when the content expands.

Note - This guideline has been previously interpreted to mean that font resizing controls need to be provided in addition to the browser’s built in scaling capabilities. That doesn’t seem to be necessary any more: https://www.wuhcag.com/resize-text/

Level AA Real text is used vs. relying on images of text.

How to do it

Text should be text, so it works like text. Some exceptions are logos, or text in an image that is decorative rather than meant to be read. But generally speaking, just use real text.

Pro Tip - Check the availability of web fonts before designing a full site with a font that isn’t available, or is prohibitively expensive to use. Some easy font resources are: Google Fonts, Font Squirrel, and Typekit.

Operable

2.2 Moving content and time limits

Carousels that rotate automatically have controls to stop and start the action.

This guideline gives people control over the speed they read content as well as a way to reduce the visual distractions on the page.

Note - This also applies to moving, blinking, scrolling, or automatically updating content.

How to do it

Provide play/pause controls for sliders and other automatically updated sections of content.

2.3 Don’t cause seizures

No page content flashes more than 3 times per second.

It’s all fun and games until you’re the guy that made someone’s brain fritz out. Don’t be that guy.

How to do it

Avoid adding animated GIFs or other video or animation elements that flicker too fast, especially anything red. For more information, review this definition of general flash and red flash thresholds.

Link text and context indicates the purpose of the links.

Make links clear and easy to understand so the user knows what to expect before they click.

How to do it

Here are some ways a link can pass this test:

  • The text within the link descriptive enough on it’s own.
  • The purpose of the link is clear from the surrounding content.
  • If the link is an image, the alt text of the image makes the link purpose clear

Level AA Multiple ways to navigate content.

This could include: a list of related pages, table of contents, site map, or site search.

How to do it

Make sure a site has more than one way to navigate the site.

  • Clear and consistent main navigation.
  • Site search on every page.
  • An HTML sitemap page (which links to every page on your website) with a link to it after the "Skip to Content" link.
  • A related links section.

Exceptions - Confirmation pages, and sites with very few pages may not need multiple navigation paths.

Important Level AA It is visually apparent which element has keyboard focus.

Mostly this means the focus outline hasn’t been squashed in CSS, and hidden elements don’t get focus. However, it is possible to enhance the look of the focus style to be more obvious and look nice with the overall site design.

How to do it

Design a focus state that can be applied to any focusable element, such as links, buttons, and form fields. Typically this is some kind of outline.

Understandable

3.3 Forms and error handling

Required form elements or specific format requirements are noted in the element’s label.

Identify form validation errors and provide feedback close to the form element.

How to do it

Design active and error states for the form elements. Plan for helper text and alerts to help a user find and fix errors.

  • If a mandatory field is empty, highlight the field and explain what’s required.
  • Be specific. Use clear, concise instruction and form field labels.
  • Highlight mistakes in forms with colors AND symbols.
Example form with an error

Required fields are followed by an *.

Enter the date as dd/mm/yyyy

Important Sufficient labels, cues, and instructions for required interactive elements are provided.

Clear labels and instructions mean users will know what to do.

How to do it
  • Where a field needs a specific format, give an example (For example, for a ‘date’ field in a form you might use ‘Enter the date as dd/mm/yyyy’)
  • Mark required fields with an icon and explain what the icon means before the form.
Example form

Required fields are followed by an *.

Select your pizza toppings: