Accessibility Settings

Accessibility Basics

What Is Accessibility?

Accessibility (short: a11y) in web development describes the ease of use of a website or web application, no matter the abilities or disabilities of an individual. It is not just a matter of screen reader support and encompasses many more subjects. Topics on accessibility include, but are not limited to:

  • Vision impairments
    • Low vision
    • Blindness
    • Color blindness
  • Learning disabilities
  • Motor skill problems
  • Temporary or permanent loss or lack of arm or hand controls or physical features
  • Memory loss
  • Anxiety
  • Missing association (e.g., unknown meaning of graphics or icons)

Why Bother?

I recently stumbled upon the question of "do we really need to be accessible" in the context of a bicycle shop. Since many people with different disabilities, like blindness, cannot engage in driving a bike directly, the thought of "unnecessary accessibility" may arise. The issue with this way of thinking is the exclusion of people based on perceived lack of customer engagement.

Let's add to this example by imagining a parent with visual impairments trying to gather possible gifts for their child. Said child wishes to have his own blue bicycle for their birthday. Of course the parent could not use images of those vehicles, or at most only consume them in a limited way with assistive technology, but with fully accessible websites they could scan for basic descriptions or colors and compare prices to gather a list of purchases, which can then be refined with either the child themselves, with the parent's spouse, or a friend. Most of the work was possible without a forced reliance on other people.

Without accessible websites, the parent needs to fully depend on another person to guide them through the websites or delegate the selection of possible gifts entirely.

The question of "Why bother?" would in reality mean "Why should we make life easier for others?". Instead, we should ask, "How can we help?" which leads to quality of life improvements for the abled and disabled.

Now with legislative changes, accessibility is a must. But is this enough? Really, accessibility should not just be something that needs to be enforced. It should be considered at all points of design and development based on inclusivity, practiced to help others, not simply to fulfill legal requirements.

Name

An accessible name is the label used by assistive technology to identify and announce elements on a website. This should not be confused with the name attribute used in form inputs.

Accessibility Tree

The accessibility tree is available in every modern browser's developer tools. It is a model of the website text content, excluding elements hidden either entirely visually or removed with the use of aria-hidden="true". Using the accessibility allows you to get a rough estimate of narration results. It is still recommended to test with real screen readers, as the accessibility tree only uses textual representations.

Tips

  • Do not rely on only colors to convey purpose. Use text to describe an element's meaning in addition to color.
  • Your website design should not only look great and legible when in color but also in grayscale.
  • Use actual assistive technology to test your website, preferably with multiple tools.
  • Avoid creating your own elements with spans and divs if semantic HTML equivalents exist.
  • Always use the alt attribute on images, even if empty.
  • Never use headings for styling. Only use them for their semantic meaning.

Useful Tools And Sites

These are third-party tools. They are not associated with this website or authors, and themselves may be removed or modified at any point. Make sure to understand a tool, their data collection policies, and other concerns before using them. Only install or use tools from trusted sources.