Developing for Accessibility

Introduction

Please use semantic HTML wherever possible in order to help assistive technology such as screen readers to understand the page. Markup should semantically describe the content it is wrapping. Markup shouldn't be an afterthought when building a website.

• List of available HTML tags;
• List of ARIA attributes(Accessible Rich Internet Applications);

Checklist

This checklist has borrowed heavily from the a11yproject's Accessibility Checklist as it is a comprehensive list of items to check whilst developing code.

Depending on the nature of the work that is being developed a developer could copy all of the relevant parts of this checklist to their MR or JIRA ticket etc.

Sections

Content

Content is the most important part of your site.

• Use plain language and avoid figures of speech, idioms, and complicated metaphors.
• Make sure that button, a, and label element content is unique and descriptive.
• Use left-aligned text for left-to-right (LTR) languages, and right-aligned text for right-to-left (RTL) languages. (Currently, Claromentis does not support RTL languages)

Global Code

Global code is code that affects your entire website or web app.

• Validate your HTML.
• Use a lang attribute on the html element.
• Provide a unique title for each page or view.
• Use landmark elements to indicate important content regions.
• Ensure a linear content flow.
• Avoid using the autofocus attribute.
• Allow extending session timeouts.
• Remove title attribute tooltips.

Keyboard

It is important that your interface and content can be operated, and navigated by use of a keyboard. Some people cannot use a mouse or other assistive technologies that may not allow for hovering or precise clicking.

• Make sure there is a visible focus style for interactive elements that are navigated to via keyboard input.
• Check to see that the keyboard focus order matches the visual layout.
• Remove invisible focusable elements.

Images

Images are a very common part of most websites. Help make sure they can be enjoyed by all.

• Make sure that all img elements have an alt attribute.
• Make sure that decorative images use null alt (empty) attribute values.
• Provide a text alternative for complex images such as charts, graphs, and maps.
• For images containing text, make sure the alt description includes the image's text.

Alt text

Users with low vision often make use of a talking browser to “read” the web. These specialized browsers convert text to speech so that a user can hear the words on > a site. When a talking browser lands on an image, it looks for alt text that it can read aloud; if it finds none, it will often just say “image,” leaving the user > in the dark as to what the image is and how it matters to the story.

Describe all of the elements that explain what’s happening in the image, rather than just setting the alt text to be something like, “photograph" If you have to use an image of text, be sure to describe the design if relevant, as well as all of the words in the image. (Ex: Whiteboard drawing of the quote > > “This is a quote”)

Source: WebAim: The Basics of Good Alt Text via Vox Media Accessibility Guidelines Checklist

---

Headings

Heading elements (h1, h2, h3, etc.) help break up the content of the page into related “chunks” of information. They are incredibly important for helping people who use assistive technology to understand the meaning of a page or view.

• Use heading elements to introduce content.
• Use only one h1 element per page or view.
• Heading elements should be written in a logical sequence.
• Don't skip heading levels.

Lists

Lists elements let people know a collection of items are related and if they are sequential, and how many items are present in the list grouping.

• Use list elements (ol, ul, and dl elements) for list content.

Controls

Controls are interactive elements such as links and buttons that let a person navigate to a destination or perform an action.

• Use the a element for links.
• Ensure that links are recognizable as links.
• Ensure that controls have :focus states.
• Use the button element for buttons.
• Provide a skip link and make sure that it is visible when focused.
• Identify links that open in a new tab or window.

Buttons vs Anchors

Links that don’t go anywhere should be buttons. An anchor element should only be used if it points to a valid URL resource.

… use an anchor if you want to create an interactive element in the site or app that takes you to another web resource. You do not use an anchor element to trigger scripting functionality. That’s what the button element is for.

When to use an anchor/link

You use an anchor element when you link to a URL or an API endpoint:

Copy
<a href="https://www.w3.org/TR/html52/interactive-elements.html">Interactive elements in HTML</a>
<a href="/inbox">Inbox</a>

Or when you link to a destination in the same document:

Copy
<a href="#terms">Our Terms and Conditions for you to ignore</a>

<div id="terms">... </div>

When to use buttons

If your app has no URL endpoints for the different states and all the handling happens in JavaScript, there is no point in confusing your users with a link that goes nowhere and won’t open anything in another tab. Use a button and you won’t promise any functionality you don’t have.

Copy
<button>Inbox</button>

More information here

Tables

Tables are a structured set of data that help people understand the relationships between different types of information.

• Use the table element to describe tabular data.
• Use the th element for table headers (with appropriate scope attributes).
• Use the caption element to provide a title for the table.

Forms

Forms allow people to enter information into a site for processing and manipulation. This includes things like sending messages and placing orders.

• All inputs in a form are associated with a corresponding label element.
• Use fieldset and legend elements where appropriate.
• Inputs use autocomplete where appropriate.
• Make sure that form input errors are displayed in the list above the form after submission.
• Associate input error messaging with the input it corresponds to.
• Make sure that error, warning, and success states are not visually communicated by just colour.

Media

Media includes content such as pre-recorded and live audio and video.

• Make sure that media does not autoplay.
• Ensure that media controls use appropriate markup.
• Check to see that all media can be paused.

Video

• Confirm the presence of captions.
• Remove seizure triggers.

Audio

Audio-specific checks.

• Confirm that transcripts are available.

Appearance

How your website app content looks in any given situation.

• Check your content in specialized browsing modes.
• Increase text size to 200%.
• Double-check that good proximity between content is maintained.
• Make sure colour isn't the only way information is conveyed.
• Make sure instructions are not visual or audio-only.
• Use a simple, straightforward, and consistent layout.

Animation

Content that moves, either on its own, or when triggered by a person activating a control.

• Ensure animations are subtle and do not flash too much.
• Provide a mechanism to pause background video.
• Make sure all animation obeys the prefers-reduced-motion media query.

Colour contrast

Color contrast is how legible colours are when placed next to, and on top of each other. According to the WCAG, the contrast ratio between the text and the background should be at least 4.5 to 1 except:

• Large Text: Large-scale text can have a contrast ratio of at least 3 to 1
• Incidental: Text that is part of an inactive user interface component, that is pure decoration, that is not visible to anyone, or that is part of a picture that contains significant other visual content, has no contrast requirement
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement

Please use a contrast calculator to check contrast ratio, colorable is also a great tool.

• Check the contrast for all normal-sized text.
• Check the contrast for all large-sized text.
• Check the contrast for all icons
• Check the contrast of borders for input elements (text input, radio buttons, checkboxes, etc.).
• Check text that overlaps images or video.
• Check custom ::selection colours.

Mobile and touch

Things to check mobile experiences for.

• Check that the site can be rotated to any orientation.
• Remove horizontal scrolling.
• Ensure that button and link icons can be activated with ease.
• Ensure sufficient space between interactive items in order to provide a scroll area.

Screen readers

Page markup that is not part of the content and serves no purpose other than adding visual embellishment can be destructive to screen reader users. It needs to be hidden, while still allowed to be shown for everyone else. Please use aria-hidden attribute for this. For example:

Copy
<div class="glyphicons glyphicons-bookmark" aria-hidden="true"></div>

More info can be found here: See No Evil: Hidden Content and Accessibility

Reduce Motion

"Vestibular disorders can cause your vestibular system to struggle to make sense of what is happening, resulting in loss of balance and vertigo, migraines, nausea, and hearing loss."

ERIC BAILEY on CSS Tricks

Please respect user preference to reduce the amount of motion and animation used. CSS media feature prefers-reduced-motion is used to determine the systemwide preference. More information can be found on MDN Wed Docs & CSS Tricks.

Example syntax:

Copy
.animation {
  -webkit-animation: vibrate 0.3s linear infinite both;
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
    -webkit-animation: none;
  }
}

Please use discretion when deciding how motion should be reduced. Essential UI animations can be replaced with simple fades, while non-essential should be disabled completely.