ABCs of digital accessibility

Brief introduction to digital accessibility

Elias Constantopedos
Derrick and Collins from Aga Khan Primary School signing along with the help of the interpreter in the digital accessible textbook
©UNICEFKenya/2019/Rabenstein

ABCs of digital accessibility

What is digital accessibility? Who is it for? What techniques are used? What resources are available?

Here is a brief introduction to digital accessibility. Accessibility begins by following the ABCs:

A - Access for all abilities

Think about all users when designing accessibility, not just a specific group. This will improve the user experience for people you may not have considered.

B - Born accessible

Think carefully and deeply about accessibility from the very start of the process. This will influence the design choices you make and reduce costs and time delays farther down the road.

C - Checks to validate choices

Use online resources, accessibility checking tools and testing with persons with disabilities to verify the choices you are making.

Introduction

Accessibility is “the quality of being easily reached, entered, or used by people who have a disability” (Oxford Dictionary)

Image describing accessibility concerns and usability by all people

Accessibility is the design of products, services, devices and environments for people with disabilities. This has come to extend to a wider range of people, including those without a disability, as it is now evident that accessible enhancements and innovations can benefit many different users, needs and preferences.

A challenge of accessibility is that it is often reduced to serving the needs of a specific user with a disability, underserving another user with a different disability, due to a lack of understanding of needs, and/or challenges with technology implementation. Universal design thinking promotes accessibility as it focuses on benefiting a wider group of users. In environmental accessibility, for example, using universal design concepts to create accessible subway entry gates benefits users in wheelchairs, mothers with strollers, and families or travelers with large luggage.

Thinking broadly about how this approach can be applied to digital accessibility, the paradigms described on this page are useful to create better and more comprehensive accessibility solutions.

Web accessibility

Digital accessibility generally focuses on making online content more accessible by following well-established standards and guidelines, such as Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) and Web Content Accessibility Guidelines (WCAG). However, these accessibility standards largely focus on making digital content accessible to blind and low-vision people, focusing on accessibility features such as alt text and high contrast. While these guidelines are important, more can be accomplished by considering and serving a wider range of users.

Making content compatible with screen readers can benefit not only people who are blind or have low vision, but users with learning disabilities, such as dyslexia. Laying out and presenting content simply and clearly, while making use of high contrast colors, patterns and other techniques, will aid users who require the information to be presented in engaging and user-friendly ways in order to process it.

From the mobile world, an example is the inclusion of video calling and messaging in such digital applications as WhatsApp and Apple's FaceTime. These applications have been game changers for the deaf, who prefer sending sign language videos rather than writing text, since sign language is generally their first language.

Wheel of accessibility considerations - visual, aural, physical, and neurological

Who is accessibility for?

 

Accessibility is for a spectrum of users with diverse needs, including those who:

  • are blind or have low vision
  • are deaf or hard of hearing
  • have cognitive disability
  • have a learning disability
  • have a physical disability
  • have no disability (all users through a universal design approach).

 

Additional groups to consider include people with:

  • a mental health disability
  • an attention-deficit/hyperactivity disorder
  • an intellectual disability
  • an acquired brain injury
  • autism.

Learning styles

Pie chart of learning styles: visual, auditory, reading/writing, kinesthetics

Matching disability types to features may seem to be the most practical and convenient way to address digital accessibility, and the current industry standard is to focus on adding accessible features for specific groups. In some cases, this process neglects other groups, to the detriment of the product's accessibility.

As part of the Accessible Digital Textbooks for All initiative, UNICEF is advocating for a shift in the way learning styles are perceived and addressed. Providing differentiated learning and/or instruction and materials that meet various learning styles can help improve learning outcomes. There are at least four learning styles (known as VARK), although students often prefer a mix of two or more:

  • Visual: Learners prefer information presented visually, such as maps, charts and sign language.
  • Auditory/aural: Learners prefer to receive information that is heard or spoken, such as lectures, audiobooks, music and group discussions.
  • Reading/writing: Learners prefer to read books or e-readers and write information in essays or written assignments.
  • Kinesthetic/tactile: Learners prefer to obtain information through experience and practice, such as simulations and interactive games.

 

Accessibility checklists

This accessible checklist serves project managers, designers and engineers.

1. Blind and low vision users, and users with print disabilities

Users who are blind or have low vision have well developed web accessibility requirements, and features and standards to address these:

  1. Alt (alternative) text for images, logos and symbols: screen readers that read out the text or state the content.
  2. Table descriptors: captions that provide a description of the table, allowing the context to be understood before reading deeper, or identifiers for table headers.
  3. High contrast: a visual effect that allows users with low vision to better see the pages and content; a contrast ratio of 3:1, which can be measured with this simple online tool, is the minimum for all users.
  4. Patterns: designs that convey meaning better than colour for users with colour blindness.
  5. Text that can be resized: resizing that allows low-vision users to better see the content.
  6. Navigability: use ARIA landmarks to identify regions of a page and focus indicators to assist in navigation for low vision users.
  7. Hiding elements not compatible with screen readers: certain elements that are not essential to understand the meaning of content, may be hidden with the use of the ARIA-hidden attribute so they are not read aloud by a screen reader, ultimately improving the experience for blind and low vision users.
  8. Semantic HTML: the use of HTML markup to reinforce page order, assist navigability via input devices and screen readers.
  9. Accessible fonts: sans-serif or block-serif fonts that are easy to read for users with low vision.
  10. Button labels/form labels/link titles: use html labeling techniques to provide descriptive text and context to explain the purpose of buttons, form fields and links since descriptors like ‘click here’ or 'label 1' are not helpful for the user. It may be possible to use ARIA-Labels.

 

2. Deaf and hard of hearing users

The first language of many who are deaf is sign language. They prefer to use it in most forms of communication. Steps to help meet their requirements include:

  1. Do not rely purely on audio cues, special effects (SFX) or voice-over to communicate meaning. A visual cue must accompany any essential audio cue.
    • For example, if a sound indicates a button has been pressed, visually indicate that it has been pressed also, using a form of highlight or movement.
  2. Include closed captions in all video content.
  3. Include a glossary with sign language video explanations that contains new concepts or difficult words; adding this glossary can provide additional context and meaning to written concepts for deaf and hard of hearing users.
  4. When possible, add a sign language video to content.
    • This can be in the form of a synchronized sign language video in content or a YouTube video window alongside content.
  5. When adding a sign language video, use local sign language and, whenever possible, ensure the content is in the local sign language for each target user group.
    • NOTE! International Sign Language is generally not recognized as a local language by the deaf community. It is closer to a series of symbols that can be used to represent meaning, but is not a preferred method of communication. Imagine reading a novel represented as a series of symbols and images instead of spoken or written language like English or Spanish. 
  6. When providing the text support option, include a video option with staff trained in sign language.
    • Deaf people prefer video messages with sign language (text-based communication is not necessarily the most accessible).
  7. Keep in mind that sign language symbol sets communicate a fraction of meaning and are not a substitute for language but a learning or glossary tool.
    • Much sign language is communicated through body movement and facial expressions.
  8. Consult a person from the deaf community to check if your content is accessible.

 

3. Users with intellectual and learning disabilities, including mental health disabilities

People with intellectual and learning disabilities form the largest group with the widest spectrum of needs. More information is available at https://www.w3.org/TR/coga-user-research. Steps to help meet their requirements include:

  1. Add short and simple summaries at the top of documents to assist in comprehension.
  2. Provide hints, tips or simple explanations of the concepts that require a lot of assumed knowledge.
  3. Improve usability of online forms, such as pages to acquire user information:
    • Forms can be confusing and difficult to navigate, which can lead to incomplete or incorrect information. This can affect all users but is particularly difficult for users with intellectual disabilities.
      • Single Column forms read top to bottom are the best for multiple screen types and usability.
      • Any instructions on how to fill in the form should be extremely short and to the point (or they will probably not be read).
      • Form labelling should be very clear, avoiding ambiguous language and including explanatory tools and tips.
  4. Break up large amounts of content with summaries, images, quizzes, etc.
  5. Reduce unnecessary motion elements (unless conveying crucial information); motion distracts and is troublesome for some users.
    • Subtle motion to draw the eye towards a button or to highlight relevant content is useful.
  6. Ensure intuitive onboarding, the process of creating user-friendly instructions to give users crucial information. Many users do not read instructions, which leads to issues if the expectation is that they do.
  7. Provide all users with confirmations and reassurances.
  8. As a general design methodology, keep the website user-friendly and easy to understand and navigate.

 

4. Users with physical disabilities

Steps to help meet the requirements of people with physical disabilities include:

  1. Ensure support for keyboard navigation: users may not be able to navigate with a mouse so all functionality should be available through a keyboard.
  2. Make sure pages are error tolerant: users may not be able to control their mouse or keyboard well and should be given opportunities to confirm choices or correct unintentional actions.
  3. Avoid unnecessary interactivity: as with error tolerance, interactivity on pages should not be overwhelming or unneeded to communicate the meaning in the page. This will increase navigability and improve usability for a wider range of users with different needs.
  4. Avoid pull-down menus: their access can be particularly challenging for users with physical disabilities.
  5. Ensure interactivity and navigation are compatible with voice activation software: many users with physical disabilities rely on this technology.
    • In line with point 1, voice activation software is more easily integrated into a keyboard-based design than a mouse-based design.
  6. Allow users to skip through lengthy content: navigating long lists or content blocks can cause fatigue in users with motor impairment disabilities.

 

5. Universal design concepts for all users

Universal design features are those that benefit ALL users regardless of disability type. As a newer field with less established standards and guidelines, these accessibility techniques are aspirational to improve outcomes for all. They should be used in conjunction with established accessibility practices so as not to break expected functionality for the disability groups outlined above. Steps to help meet Universal Design for Learning principles include:

  1. Focus on features and usability that by default are appropriate for all people, including those with disabilities; everyone can benefit from a universal approach.
    • Making a website easy to navigate with a keyboard can benefit all users, including those with physical disabilities, those who are blind, those who are deaf or those who prefer to navigate websites by using arrows.
  2. Use multimodal representations, without relying just on images, shapes, sizes, visual locations, etc.: multimodal representation is about integrating multiple teaching and learning modes so no student is excluded, but also so connections can be made within and between concepts. All students benefit from this approach.
  3. Embrace the malleability of digital materials, which are not fixed or unchangeable like print materials: this primary strength allows a high degree of customization that takes into consideration users' needs and preferences.
    • Customization in a digital context is vast: developers, educators and learners should work together to identify the choices most relevant to any given publication.
  4. Ensure that animations and pictures are universal by always being accompanied by sound elements with the same depth of expressiveness and information.