Accessibility — Designing for Everyone

What is Accessibility?

Accessibility refers to the ability to access the design of products, devices, services, or environments that are usable by everyone including people with disabilities. The goal of accessibility is to ensure that everyone, regardless of their physical, sensory, or cognitive abilities, can access and use information, technologies, and spaces in a way that is efficient and equitable.

What is Inclusive design?

As designers, it is our responsibility to adopt the principles of inclusive design. This approach involves creating products, services, and environments that are accessible and usable by a wide range of individuals, irrespective of their age, abilities, or backgrounds. By following the inclusive design approach, we ensure that our designs are accessible to everyone, regardless of their abilities or disabilities.

When UX doesn’t consider ALL users, shouldn’t it be known as “SOME User Experience” or… SUX?

— Billy Gregory, Senior Accessibility Engineer

Why should we care about Accessibility

1. As per WHO, 16% (1.3 billion) of the world’s population is disabled, or 1 in 6 of us. (7th March 2023)
2. Lawsuit: over 250 businesses sued in the US since 2015–2017 (LA Times)
3. Legislation:
   • USA: American Disabilities Act of 1990
   • Telecom Act of 1996
   • Section 508 of Rehabilitation Act
   • Section 508 Refresh: January 2018
   • 21st Century Telecom act 2010 (Mobile + Video for telecom)
   • European Accessibility Act

Types of Disabilities

While there exists a wide array of disabilities, four primary categories can be identified:
1. Blind
2. Deaf and Hard of Hearing
3. Cognitive
4. Mobility

Assistive Technology (AT)

Demonstrating empathy towards your users entails acknowledging that individuals access the web and digital media in diverse ways. Certain users rely on Assistive Technology (AT) to facilitate their access to these platforms. Assistive technology encompasses devices, equipment, or software designed to assist people with disabilities in accomplishing tasks that may otherwise be challenging or unachievable.

Common Assistive Technologies

1. Screen readers: These are software programs that read out text displayed on a computer screen for people who have vision disability or have low vision.
2. Screen magnifiers: These software aids individuals with low vision by enabling them to zoom in on the screen.
3. Speech recognition software: This software allows users to dictate text using their voice, which is then converted to text on the computer screen.
4. Closed captioning: Closed captioning is time-synchronized text that reflects an audio track and can be read while watching visual content.
5. Braille displays: These are devices that translate digital text into braille, allowing people who are blind to read and interact with electronic content.
6. Adaptive switches: These are devices that allow people with limited mobility to operate electronic devices such as computers, tablets, or smartphones by using alternative body parts, such as their head, mouth, or feet.

Guideline for Accessibility — WCAG

WCAG stands for Web Content Accessibility Guidelines. It is a set of guidelines developed by the World Wide Web Consortium (W3C) to ensure that web content is accessible to people with disabilities. WCAG provides a framework for creating web content that is perceivable, operable, understandable, and robust for all users, including those with visual, auditory, physical, cognitive, and neurological disabilities. Please check it out here.

Level of Accessibilities:

Level A: This is the minimum level of accessibility that a website or web application should meet. It includes the basic requirements for accessibility

Level AA: This level builds on the Level A requirements and includes additional guidelines to make the website or web application more accessible to people with disabilities.

Level AAA: This is the highest level of accessibility in the WCAG. It includes all of the requirements in Levels A and AA, as well as additional guidelines to make the website or web application even more accessible to people with disabilities.

ARIA

ARIA stands for Accessible Rich Internet Application. It is a set of guidelines for making web content and web applications more accessible to people with disabilities, particularly those who use assistive technologies such as screen readers, magnifiers, and alternative input devices.

ARIA provides a way to enhance the accessibility of web content by adding semantic information to HTML, CSS, and JavaScript code. It includes a set of attributes that can be added to HTML elements to provide additional information about their role, state, and properties, and to indicate how they should be presented to users with disabilities.

Dos and Don’ts

1. Design for Keyboard only
   Individuals with visual impairments heavily rely on keyboard navigation to access digital products. It is essential to ensure that all functions can be accessed solely through keyboard input. This involves establishing a logical tab order and ensuring that the focus indicator remains consistently visible to sighted users who navigate using the keyboard.
2. Maintain proper color contrast
   WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
   WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
   • Level AA requires a contrast ratio of at least 7:1 for normal text
   • Level AAA requires a contrast ratio of at least 4.5:1 for large text.
   • Check — https://webaim.org/resources/contrastchecker/
3. Include Accessibility in Style guides and Design systems
4. Create Structured Content
5. Use Alt tag
   • Alt tag has to be descriptive
   • Describes the function of the image. Not the image
   • For decorative images, include an empty (alt=” ”) or null (alt=””) alt text in the HTML code. This will tell the screen reader to skip over the image.
   • Alt tag length should be around 250 character
   • Alt tag is critical to SEO
6. Ability to control Dynamic content:
   Dynamic content like an image carousel of more than 5 seconds must provide the ability to pause, stop or hide that dynamic content
7. Text Transcript
   All pre-recorded audio requires a Text Transcript
8. Closed captioning is required for video
9. Captcha
   Consider utilizing a tool like Google Captcha Killer, as captchas were originally implemented to safeguard websites from malicious bots and spam. However, they often impede legitimate human users from accessing websites.
10. Exit option:
    Ensure that users can exit a modal window by simply pressing the Escape key.
11. Allow users to control text size
12. Avoid relying solely on colors
    Individuals with color blindness may have difficulty identifying certain colors. Instead, consider using additional visual cues such as shapes, such as an exclamation mark, to indicate errors or important information.
13. Plain language
    To ensure comprehension for individuals with cognitive disabilities, it is crucial to utilize plain and straightforward language that is easy to understand. Avoid complex language structures or terminology that may be difficult for them to grasp.

ROI of Accessibility

1. We will not miss out on 16% of the world's population:
   By incorporating accessibility in our design, we can effectively include and support 16% of the world’s population, thereby offering moral support. Additionally, there is a business advantage as well. By not overlooking this significant portion of the population, businesses have the opportunity to increase their revenue and financial success.
2. Increased usability with accessibility:
   The inclusive design approach enhances the ease of use and usability of our designs, benefiting a wide range of individuals. For instance, closed captions can assist not only individuals who are deaf or hard of hearing but also those in noisy environments who may have difficulty hearing.
3. Support for an aging population:
   Designing for accessibility provides significant benefits to elderly individuals, who often experience low vision or require louder audio. By considering their needs, we can ensure that our designs accommodate larger text sizes, clear and readable fonts, adequate color contrast, and adjustable volume controls. This approach enables elderly people to access and interact with our designs more effectively, enhancing their overall user experience.
4. Reduced legal risk:
   By adhering to the Web Content Accessibility Guidelines (WCAG) in our design work, we can mitigate legal risks associated with accessibility.
5. Responsive web design:
   Designing for accessibility necessitates ensuring that our designs are responsive and compatible with mobile and tablet devices. This inclusive approach benefits all users by providing a seamless and optimal user experience across different devices.
6. SEO benefits:
   Designing for accessibility involves creating well-structured content and providing accurate Alt tags. This practice significantly benefits search engine optimization (SEO) efforts.