Skip to content
Home Β» User Experience (UX) Design for Accessibility

User Experience (UX) Design for Accessibility

    Image showing physical and gender diversity

    In User Experience (UX) Design, the user is always front and centre. The UX design team needs to know their users’ characteristics, goals, pain points, and accessibility requirements. This helps create inclusive design experiences that empower all potential users, including those with overlooked needs due to their different abilities and backgrounds.

    In this blog, I will cover the following: 

    1. What is accessibility?
    2. Why design for accessibility? 
    3. What is assistive technology?
    4. Guidelines for creating accessible designs
    5. Additional resources for accessible designs
    6. In a nutshell

    Let’s jump in! 

    What is accessibility?

    Accessibility is the concept of creating content, applications and other products that everyone can use (see Human Centred Design), including people with disabilities. An accessible design provides an equivalent user experience to all users, no matter how they may choose to interact with a product or service. 

    To benefit as many users as possible, the design team needs to consider the following questions: 

    • Do the users have any temporary, situational or permanent impairments?
    • Are the users familiar with technology?
    • How, when and where are the users accessing the product or service?
    • Is all demographic data considered for the users: income level, age, gender, ethnicity, education, and geographic location?

    Example of permanent (one-arm only), temporary (broken arm), and situational (baby in one arm) disability.
    Example of permanent, temporary, and situational disability. (Source: Microsoft’s inclusive design toolkit)

    Why design for accessibility?

    User Experience design for accessibility brings benefits to all users. Accessibility features that benefit people with disabilities often aid other people too. 

    For instance, closed captions help people with hearing difficulties and also allow users who are trying to watch a video on mute (e.g. while waiting at a doctor’s office). 

    Another example is using high-contrast text that helps people with visual impairments. It also allows other users to read high-contrast text easily while out in bright sunlight. 

    Designing for accessibility also has the following benefits:

    • Better search results, 
    • Reach a bigger audience,
    • More SEO (Search Engine Optimisation) friendly, 
    • Faster download times, 
    • Better usability, and
    • Enhanced brand image.

    What is assistive technology?

    Assistive technology is any product or software that increases, maintains, or improves the functional capabilities of people with disabilities. (Source: ATIA)

    Following are some of the commonly used assistive technologies:

    • Colour modification – High contrast mode or dark mode on a device. Colour modification makes the interface easier to see. 
    • Voice control and switch devices – Such devices help people with limited dexterity and can be used as an alternative to a keyboard and mouse. 
    • Screen readers – The software reads aloud any text on the screen and aids people with limited vision. 
    • Alternative text – Helps describe images for people with visual impairments. Also useful for people with low bandwidth internet connections. 
    • Speech-to-text – Helps users with physical and visual impairments to communicate efficiently. 

    Guidelines for creating accessible designs

    The following guidelines are easy to implement and can help you get started with creating inclusive and accessible designs:

    1. Include enough colour contrast

    This guideline helps users with colour blindness, low vision, or other vision impairments to see and read the text. I recommend using Color Safe or WebAIM to test whether your chosen colours adhere to the WCAG guidelines. 

    Examples of good and bad colour contrast for accessible ux design
    Examples of good and bad colour contrast

    2. Try using indicators other than just colour to make critical information understandable (e.g. text labels, patterns, etc.)

    This guideline aids users who have difficulty distinguishing one colour from another, including those with low vision or who are colour-blind. 

    Consider the following example. If the screen is grayscale, could you tell how many fields are in an error state? 

    Example of a form that only uses colour as an indicator for critical information in grayscale.
    Can you count the number of fields in error state?

    β€˜How many error fields can you spot in grayscale?

    Now, let’s take a look at this same screen in colour. Can you now count how many fields are in an error state?

    Example of a form that only uses colour as an indicator for critical information
    Only by turning on the colour, the fields in error state are revealed

    Turning on the colour reveals a different story altogether.

    A visually accessible form with good ux design using bolder text, thicker borders and symbols to indicate fields in error state.
    A visually accessible form

    There are various methods to make things visually accessible – using symbols, bolder text, thick borders, underlining, italics etc. The only rule is to use more than just colour. 

    3. Don’t use placeholder text as labels

    Labels tell users the purpose of the field and the information required. Placeholder texts are usually of low contrast, and the text usually goes away when you click on the field, making it confusing for the user. 

    Example of a form using placeholder texts as labels
    Placeholder text as labels
    Example of an accessible form using labels in the correct way.
    The right way to use labels

    4. Write helpful alt text for images

    Alternative text or alt text describes an image or non-text element to people who don’t have the ability to see the images. 

    Image showing alt text for better accessibility.
    Write alt text for images for better accessibility

    5. Use headings and other correct markups to establish content hierarchy

    Headings communicate the content hierarchy and make it easier for a screen reader to provide accurate in-screen navigation. 

    Example of content hierarchy by using headings and subheadings for better accessibility
    Establishing content hierarchy

    6. Support keyboard navigation

    Keyboard accessibility is essential for users with motor disabilities who might not be able to use a mouse for navigation. Blind or visually impaired users also use keyboards for navigation. 

    Keyboard navigation shortcuts for an accessible design
    Keyboard navigation (Source: a11y)

    Additional resources for accessible design

    I recommend the following resources to get started with the basics of accessible design:

    In a nutshell

    Designing for accessibility is not only the right thing to do; it also benefits all potential users. I believe that every designer should understand the importance of creating inclusive and accessible products and why creating for under-represented user groups is a must. 

    Tell us what you think!