5 basics every product designer needs to know about visual accessibility

Three layouts of different websites painted schematically by hand with watercolor and a liner

Thinking of visual accessibility as an ‘add-on’, not only puts it unnecessarily on the backlog of tasks, it also lowers the quality of your overall user experience (UX) and accessible design efforts. Because many of the features that make a product design accessible, are also things that constitute ‘good design’.

Portrait photo of the post author Di Mace

Di Mace

Communication strategist

According to the World Health Organization, 2.2 billion people in the world are visually impaired and those 285 million people deserve the same digital access as others – to information, services and products.

Digital accessibility is aimed at the democratization of content, products and technology. By applying visual accessibility principles and practices to your work, you’re creating apps and content for everyone, equally.

Five accessible design basics

Here's two bonus basics to get you started:

  • Picking fonts suitable for older audiences, produces content that's more legible for all readers.
  • Similarly, the use of colors with strong contrast may be aimed at helping color-blind people distinguish different things on the screen, but they also produce user-friendly content for people with good vision.

These two examples show that instead of thinking of visual accessibility as designing for disabilities, you’re actually designing better products for everyone. Here’s five more basics to help you design products that have visual accessibility in mind.

How to check documents for accessibility issues

Having an online Accessibility Testing Tool reviews your content and flags any document accessibility issues that may be a potential problem for someone with a disability. It also suggests how you can resolve the issues that it finds.

Our Accessibility Testing tool is set at compliance level AA of the WCAG guidelines.

Once you’ve pasted the content into the editor UI, click the button and it works in the background to detect any document accessibility issues.

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.

2. What does the term a11y mean?

A11y is a commonly used shorthand or abbreviation for accessibility. It’s a numeronym, with 11 representing the number of letters in the word ‘accessibility’, between the letter ‘a’ and the letter ‘y’. Other familiar numeronyms include: i18n (internationalization), P2P (peer to peer), WWII (World War 2), B2B (Business to Business) and B2C (Business to Customer).

When is a11y used?

The a11y Project, notes that “The word accessibility has different meanings in different contexts. On the internet, the use of the term a11y helps to identify content related specifically to digital accessibility. For example, it is often used as a Twitter hashtag by digital accessibility practitioners.“

Schema showing why we decode “a11y” into “accessibility”: word “accessibility” has “a” as the first character, “y” as the last character, and 11 characters in between the first and the last character. The text below the schema: “The A11Y Project is a community-driven effort to make digital accessibility easier”.

Get your own WCAG A-AA-AAA level accessibility checking tool. Click to discover how.

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

4. What role do product designers play in visual accessibility?

Not all users are alike, and certain limitations and disabilities (both permanent and temporary) can inhibit people from fully engaging with technology: hardware, software, and beyond. Therefore, in a digitally driven world, it’s become the product designer’s responsibility to make sure everyone has equal access – regardless of their ability, context, or situation – to the product being created.

According to the Interaction Design Foundation, great visual design should be about more than just product prettiness. It “...aims to improve a design’s/product’s aesthetic appeal and usability with suitable images, typography, space, layout and color. [...] Designers place elements carefully to create interfaces that optimize user experience and drive conversion.”

In short, the responsibilities of a product designer extend to building visual accessibility into the entire user experience (UX), user interface (UI) and design. Why? Because accessibility impacts (and benefits) everyone.

Donald Arthur Norman captures this sentiment perfectly:

“[…] invariably, when we design something that can be used by those with disabilities, we often make it better for everyone.”

~ Donald Arthur Norman, professor and author

Accessible design + good usability = Successful design

One of Google's core principles is "Focus on the user and all else will follow", so the Google User Experience (UX) team integrates accessible design thinking throughout the entire product development cycle.

To bring visual accessibility, usability and design to life in their products, Google developers defined an Accessible Design Framework that brings together both the user experience (UX) and engineering.

There are four key aspects to the Accessible Design Framework:

1. Visual Design

Design with specific visual affordances, like touch targets and contrasts.

2. Structure

Navigation and comprehension of the content and UI layout – structural decisions impact accessibility since screen readers translate the design to a linear experience.

3. Flow

Optimization of the linear experience, which includes factoring in considerations about the focus, tab, arrow key decisions, and keyboard navigations.

4. Elements

Add information to ensure clear actions and understanding with labels and role definitions.

Both designers and developers can increase their own awareness around accessibility issues by researching (and verifying) the assumptions they’ve made around users, use cases, and use contexts. Testing with five users can uncover 85% of usability problems and it should be no different with testing for accessibility. So, whenever possible, invite testers with various disabilities to help validate your designs.

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).

Visual accessibility needs to work for everyone

While each disability or limitation may require different adjustments to be made to your product design, they all demand equal attention. Because every digital product should be easy to interact with, easy to read, easy to hear and easy to understand. By everyone.

Portrait photo of the post author Di Mace

Di Mace

Communication strategist

Di Mace is a freelance copywriter and messaging strategist who's worked with both B2B and B2C brands across the country. She helps businesses identify who their best-fit customers are, what drives them to do what they do, and then crafts messages that turn them from fans into customers and evangelists.

Accessibility Checker logo
Copyright © 2023 Tiny Technologies,
Inc. All rights reserved.
Icons used are from the Noun Project and photos from Unsplash