Reading time: 8 minutes

Accessibility compliance is not difficult. At Big Salami, we believe that education is an important part of getting accessibility right, not just in understanding the requirements but also how compliance and failures impact your end-users.

This guide is based on Diverse Abilities and Barriers and How People with Disabilities Use the Web from the W3C, and provides key insights from our experience developing websites and apps for government agencies and corporations in the USA and UK.

1. Auditory

Auditory disabilities range from mild or moderate hearing loss in one or both ears (referred to as “hard of hearing“) to significant and irreversible hearing loss in both ears (referred to as “deafness“).

Examples

  • Hard of hearing
  • Deafness
  • Deaf-blindness

Considerations

  • Audio in videos and sound files that contain speech or other sounds required to understand the content.
  • Voice interactive services (where the user may be required to listen and speak).

Making your content accessible

  • Provide a transcript of audio content for video and audio files.
  • Use time-based captioning where available (e.g., closed caption).
  • Provide controls (e.g., stop, pause and volume).
  • Consider alternatives to voice interactive services, such as messaging via a text-based platform.

2. Cognitive, learning, and neurological

Cognitive, learning, and neurological disabilities encompass a range of conditions related to neurodiversity, neurological disorders, as well as behavioural and mental health disorders that may not be strictly neurological. These conditions can influence various aspects of the nervous system, affecting hearing, movement, vision, speech, and the comprehension of information. Importantly, it’s crucial to note that these disabilities do not necessarily impact a person’s intelligence.

Examples

  • Attention deficit hyperactivity disorder (ADHD)
  • Autism spectrum disorder (ASD)
  • Intellectual disabilities (e.g., learning disabilities, down syndrome)
  • Mental health disabilities (e.g., anxiety, depression, schizophrenia)
  • Memory impairments (limited short or long-term memory, dementia)
  • Multiple sclerosis (MS)
  • Perceptual disabilities (e.g., dyslexia, dyscalculia)
  • Seizure disorders (e.g., migraine, epilepsy)

Considerations

  • Complex navigation structures and content layout could be difficult to understand and use.
  • Long and complex sentences could be difficult to read and understand.
  • Animations and moving content.
  • Flashing content.
  • Background audio and background noise in videos.

Making your content accessible

  • Provide clear, consistent content structure to facilitate quick overview and orientation.
  • Lean on web standards for an intuitive and familiar experience (e.g., headings, lists, buttons, labels).
  • Consider multiple pathways to content areas (e.g., navigation, hierarchical and search).
  • Provide controls to suppress flashing, moving or distracting content (e.g., pause/play controls on videos or carousels).
  • Limit unnecessary and distracting visuals (where necessary, remove irrelevant and cosmetic visuals).
  • Utilise impactful visuals instead of text where possible (e.g., graphs or tables to depict timelines or data).

3. Physical

Physical disabilities, also known as “motor disabilities,” encompass conditions characterized by muscle weakness, impaired muscular control (including involuntary movements like tremors, coordination issues, or paralysis), restricted sensation, joint disorders (such as arthritis), movement-impairing pain, and the absence of limbs.

Examples

  • Amputation (e.g., missing fingers or limbs)
  • Arthritis and Fibromyalgia (inflammation, degeneration or damage to joints and connective tissues)
  • Reduced dexterity (hand-eye coordination)
  • Muscular dystrophy
  • Repetitive stress injury (RSI)
  • Tremor and spasms (causing involuntary movements).
  • Partial or total paralysis

Considerations

  • Users may only have a keyboard (no mouse).
  • Users may only have a mouse (no physical keyboard, and use an on-screen keyboard).
  • Users may be using an assistive device (e.g., head pointer, mouth stick, joystick, sip-and-puff, eye tracking, voice recognition).
  • Additional time may be required to complete forms or tasks.

Making your content accessible

There are many items to consider here, and they can all be addressed by carefully considering the many ways users may interact with your content. Below is a partial list of high level checks:

  • Provide logical landmarks (e.g., header, main, footer) with skip-to links, allowing a user to skip over the navigation areas and go straight to the content.
  • Properly nest headings (h1 > h2 > h3), and base them on your content, not on the desired style or size. This allows users to navigate the hierarchy of headings to quickly scan for the area of the page they are interested in.
  • Use HTML elements appropriate to the content wherever possible (e.g., headings, lists and tables). Screen readers and assistive devices understand can navigate through these elements in a predictable way.
  • Navigate around your site with only a keyboard and address items you cannot access.
  • Remove time limits wherever possible to give users enough time to complete forms and other tasks.

4. Speech

Speech disabilities involve challenges in producing speech that is easily understandable, either by others or voice recognition software. This might manifest as issues with the volume or clarity of someone’s voice, making it challenging for others to comprehend.

Examples

  • Apraxia of speech (AOS) (spoken words or phrases are difficult for others to understand)
  • Cluttering and Stuttering
  • Dysarthria (weakness or paralysis of the lips, lungs, throat and tongue)
  • Speech sound disorder (difficulty or inability to produce certain sounds)
  • Muteness (inability to speak)

Considerations

  • Voice interactive services (where the user may be required to listen and speak).
  • Users have access to alternate options in lieu of calling customer service, and receive timely action on their request.

Making your content accessible

  • Provide more than one option for customers to reach customer service (e.g., chat, messaging or email) that provides a similar experience to calling the customer support line.
  • Consider alternatives to voice interactive services, such as messaging via a text-based platform.

5. Visual

Visual disabilities span from mild or moderate vision loss in one or both eyes, often termed “low vision,” to significant and non-correctible vision loss in both eyes, known as “blindness.” Some individuals may experience reduced or lack of sensitivity to specific colours, known as “colour blindness,” or heightened sensitivity to bright colours. It’s important to note that these variations in colour and brightness perception can occur independently of visual acuity.

Examples and considerations

  • Colour blindness (difficulty distinguishing between red/green, yellow/blue, and sometimes any colour)
    • Using certain colour combinations may inadvertently make this content invisible or very difficult to read to these users, as you can see in this example:
      This illustrates how the lack of contrast between red and green is experienced by colourblind users.
  • Low vision (e.g., poor acuity, tunnel vision, central field loss, and clouded vision)
    • Users may get very close to the screen scan only small parts of the page at a time.
  • Blindness (substantial, non-correctable loss of vision in both eyes)
    • Users may utilise assistive software, a keyboard or other assistive device for navigation.
  • Deaf-blindness (substantial, non-correctable visual and hearing impairments)

Making your content accessible

Similar to physical disabilities, there are many points to consider, and they can all be addressed by carefully considering the many ways users may interact with your content:

  • Use shapes and format alongside colour for visual distinction (do not rely on colour alone, especially in graphs).
  • Avoid embedding lots of text into images (screen readers only read the first 125 characters from the ALT attribute, and cannot read the text embedded into the image).
  • Provide alternate text and transcripts for all visual assets (images and video).
  • Test your colour palette and usage for sufficient contrast between the foreground (text) and background colours. We love WebAIM’s Contrast Checker.
  • Provide logical landmarks with skip-to links, allowing a user to skip over the navigation areas to the content.
  • Properly nest headings (h1 > h2 > h3), and base them on your content, not on the desired style or size.
  • Use HTML elements appropriate to the content wherever possible (e.g., headings, lists and tables).
  • Avoid duplicate call-to-actions (e.g., an image and the title below the image links to the same page – wrap both in one link, or consider using ARIA tags to hide the duplicate link from a screen reader).
  • Navigate around your site with screen reader browser extension to experience your site through the “eyes” of a screen reader and address any issues.
  • Avoid using fixed pixel heights and widths in designs, which may prohibit text from scaling properly. Some users prefer to increase the font size on their operating system or browser to make the content readable.

Content accessibility is not a luxury

In a landscape where diversity is embraced and digital connections are paramount, accessibility is not just a box to tick for compliance – it’s a dynamic strategy. Crafting accessible content not only enhances the digital journey for all but also elevates your brand, paving the way for success in an inclusive and ever-evolving digital realm. It goes beyond meeting standards; it’s about harnessing the transformative influence of accessibility to contribute to a more connected and improved world for everyone.

Get ready to infuse your content with the power to make a positive impact!

Last updated 15 Apr 2024

About the Author: Stephan

With 20 years of industry experience as a UX specialist, designer and developer, I enjoy teaching and sharing insights about UX, accessibility and best practices for e-commerce and the web.

Table of contents

Article topics

Related insights