5 basics every product designer needs to know about visual accessibility

1. What is visual accessibility in digital products?

Building visual accessibility into your product, from the very beginning, makes it accessible to everyone and inclusive of all users. By removing any barriers for those with disabilities – whether that be visual, hearing, motor, mobility, or cognitive disabilities – you’re giving them the same access to your product, as everyone else.

What’s the difference between accessibility and usability?

Accessibility and usability are two terms that are often misunderstood and incorrectly applied. In order to understand accessibility, let’s first look at usability.

In general terms, usability leads to the design of user interfaces (UIs) that are efficient, effective, and enjoyable for users. During the process of designing that UI, accessibility takes into account any barriers experienced by the audience, their needs, and various situational circumstances they experience.

The usability of a product is:

• The ease with which it’s used
• How easily it solves the user's problems

Optimal usability occurs when your users can complete a task with ease, with no interruptions.

Accessible product design is:

• Based on the published global (and country-specific) accessibility guidelines
• When a product provides the same level of user experience (UX) to all users (impaired, disabled or otherwise)
• Ensures that people with disabilities can effectively access digital products, content and websites

Accessible product design is the outcome or result of a design project and it makes products, services and applications equally available to all users, without barriers.

3. What assistive technologies are used in accessibility?

Assistive technologies (AT) are any piece of equipment or software that enhances learning, working, and daily living for people with disabilities, to help them perform tasks that might otherwise be difficult or impossible. They’re fundamentally aimed at helping them to have access to the things in life that others take for granted.

AT range from simple items like reading glasses (aiding vision) and canes (aiding mobility) to the more complex items like software (aiding communication) and hardware solutions (multi-functional).

When designing products with inbuilt visual accessibility, assistive technology needs to be factored into the design, because they can seriously impact product design, features and functionality. Many people already use voice-activated devices, smart phones, and remote controls to perform tasks and make life easier. However, for people with physical or cognitive impairments, AT can have a significant impact:

• Assisting communication and learning
• Enabling participation in work and/or social activities
• Achieving independence and improving the quality of life

Currently, the World Health Organisation (WHO) estimates that globally there are more than 1 billion people who need 1 or more assistive products. “With an aging global population and a rise in noncommunicable diseases, more than 2 billion people will need at least 1 assistive product by 2030, with many older people needing 2 or more. Today, only 1 in 10 people in need have access to assistive products.”

Examples of digital assistive technology

There are different categories of assistive technology devices – ranging from low-tech to high-tech – such as voice-control software, that’s used to control a computer instead of using a keyboard.

Screen readers

Are aural interfaces that process content (using a speech synthesizer) that’s displayed on a desktop and web browsers, and it’s converted to other forms, such as text-to-speech (voicing the content). Less frequently, they can also translate the content into Braille. They are typically used by people who are blind or who have very low vision.

It’s important to note that there are many aspects of digital content that a screen reader cannot comprehend: text within an image, all images (readers rely on alt text), table formats (unless properly structured) and headings (unless they use nested heading format and hierarchy).

Examples of screen readers are COBRA, Hal and JAWS (Job Access with Speech). There is also Windows Eyes and Macintosh OS comes with a screen reader built into its operating system, called Voice Over.

Text to speech readers

Text to speech software is able to speak the text on the screen, in a computerized voice, and may have a highlighter to emphasize the word being spoken. Is often used by people with a reading related disability (such as a learning disability or dyslexia.) Text to speech can also be useful for people who are reading in a second language. However, they do not read things such as menus or types of elements – they only read the text.

Examples of text to speech software include Kurzweil 3000, Read & Write or Read Please.

Screen enhancement software

Software that allows you to enlarge content on a computer screen and change the contrast of elements. Typically used by people who have low vision.

Examples are ZoomText or Magic. Both Windows and Macintosh operating systems have basic screen enlargement features.

Screen magnifier

Software that’s used to control the size of text and or graphics on the screen. Primarily used by people with a partial sight impairment, to make it easier to see and read content.

Voice recognition (sometimes called ‘speech input software’ or ‘voice command’)

Software that recognizes the human voice. It can be used to dictate text and issue commands to perform mouse actions – providing an alternate way to type text and control the computer. Users can also tell the system to click a link or a button or use a menu item.

Examples are Dragon Naturally Speaking for Windows or Mac. Please note both Windows and Mac have some speech recognition utilities, but they cannot be used to browse the web.

Braille keyboards

Are very different from a standard QWERTY keyboard. Only eight keys are used to compose the Braille letters, which makes navigation and locating the cursor much easier for visually-impaired people.

Alternative input devices

Can be used to replace the typical computer mouse, with the most common alternative pointing device being the trackball. These are very useful for people who have physical or cognitive impairments or repetitive strain injuries.

They include:

• Head pointers
• Motion tracking or eye tracking (sometimes called ‘eye-gaze’)
• Single switch entry devices
• Large-print and tactile keyboards
• Speech input software

Further information can be found on W3C: Diversity in Web Use

5. How to use the WCAG Guidelines for accessible design

Companies should incorporate accessible design into their ideation process, before the need (or legal obligation) has occurred. By thinking about the people you may be excluding ahead of its need, it opens the opportunity to create a truly inclusive solution.

A poor experience for the general population is usually substantially worse for someone who is disabled or impaired. Therefore familiarity with the Web Content Accessibility Guidelines (WCAG), which were created by the World Wide Web Consortium (W3C) process is an essential area of learning for all product designers.

Quick history of the WCAG Guidelines

The Web Content Accessibility Guidelines (WCAG) are a set of international standards designed to help ensure web content accessibility and compliance with the the Americans with Disability Act (ADA). They are published by the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) in collaboration with individuals and organizations within the global accessibility community according to the W3C Process.

1999: WCAG 1.0

The first WCAG Guidelines were released in 1999, and provided a way to evaluate the accessibility of a website. As a first step, WCAG 1.0 focused mainly on HTML, with information on the use, display and structure of text, images, and sound. WCAG 1.0 included the same ranking system of three tiers of conformance levels that are still used today: A, AA, and AAA.

2008: WCAG 2.0

Issued in December 2008, WCAG 2.0 covered a broader scope of technologies and guided developers on how to make all digital content accessible, as opposed to only addressing content implemented using HTML. It was intended to be applied to almost all things digital (including documents and apps). WCAG 2.0 also included the four POUR principles for accessible content: Perceivable, Operable, Understandable, and Robust.

These four principles serve as categories for the success criteria which constitute WCAG, with each criterion addressing a barrier or barriers that make content perceivable, operable, understandable, and/ or robust for all users.

2008: WCAG 2.1

In June 2018, WCAG 2.1 was released as a supplement to, not replacement for, WCAG 2.0, by appending success criteria onto the existing guidelines seen in 2.0. Many of the new rules in WCAG 2.1 were designed to address accessibility barriers that became clear as mobile web browsing became more popular.

This ‘supplemental’ approach to the Guidelines makes 2.1 backwards-compatible with 2.0, which means if you comply with WCAG 2.1, you automatically comply with WCAG 2.0.

2023: WCAG 2.2

In August 2020, a working draft of WCAG 2.2 was released, and WCAG 2.2 is scheduled to be completed and published in mid-late 2023. It’s currently proposed that WCAG 2.2 introduces nine new success criteria, although those criteria may change prior to the document’s official release. To get a head start, here’s the current working draft of WCAG 2.2.

W3C Accessibility Guidelines 3.0 (formerly known as “Sliver”)

In December 2021, the first incomplete draft of WCAG 3.0 was published. Version 3.0 is expected to be a major overhaul of the guidelines, including the introduction of a new rating scale for accessibility, along with a number of other major changes.

Although the W3C has not announced a planned publication date for WCAG 3.0, more information on the early draft can be seen in the WCAG 3 Introduction.

It’s worthy to note that WCAG 3.0 will not deprecate WCAG 2.2 or other earlier versions (ie. earlier versions will not become obsolete).