Accessibility best practices

As we continue to build accessible products and services, it’s crucial to keep up with the latest guidelines and standards to ensure that what we build meets the needs of all users. After all, accessibility is essential to creating a more inclusive and equitable society where everyone has equal access to information and resources.

In this blog post, we’ll explore essential accessibility best practices for designers and developers, supported by scientific research to understand the real impact they have on users. The importance of keeping up with the latest guidelines and standards will be emphasized while resources such as the Web Content Accessibility Guidelines will be mentioned to guide designers and developers in their accessibility journey.

Key Accessibility Best Practices For Developers

1. Semantic HTML

One of the most important accessibility best practices is to use semantic HTML. Semantic HTML means using HTML tags to convey the meaning and structure of your content. For example, using the h1 tag for the main heading and the p tag for paragraphs. This helps users with assistive technology to understand the content and navigate your website more easily.

A study conducted by WebAIM (Web Accessibility In Mind) on the accessibility of one million home pages found that 85.2% of websites had issues with semantic HTML. This made it difficult for users with disabilities to navigate and understand the content. [1]

2. Alternative Text for Images

Images are an important part of any website or application. However, users with visual impairments cannot see images, so it’s essential to provide alternative text for images. Alternative text is a brief description of the image that can be read by screen readers and other assistive technology.

The same WebAIM study found that 66.4% of websites had missing or incorrect alternative text for images. This made it difficult for users with visual impairments to understand the content. [1]

3. Captions and Transcripts for Videos

Videos are becoming more popular on websites and applications. However, users with hearing impairments cannot hear the audio in videos, so it’s important to provide captions and transcripts. Captions are text that appears on the screen that describes the audio in the video. Transcripts are a text version of the audio in the video.

The same WebAIM study found that 87.7% of websites had issues with video accessibility. This made it difficult for users with hearing impairments to understand the content. [1]

4. ARIA Roles and Attributes

ARIA (Accessible Rich Internet Applications) is a set of attributes that you can add to HTML to make it more accessible. ARIA roles describe the purpose of an element, and ARIA attributes provide additional information about the element.

The same WebAIM study found that 57.8% of websites had issues with ARIA usage. This made it difficult for users with disabilities to navigate and understand the content. [1]

5. Keyboard Accessibility

Keyboard accessibility means that users can navigate your website or application using only a keyboard. This is important because users with disabilities may not be able to use a mouse or other pointing device. You can ensure keyboard accessibility by providing keyboard shortcuts, skip links, and ensuring that all interactive elements are accessible via the keyboard.

A study conducted by the Nielsen Norman Group found that keyboard accessibility is important for users with motor disabilities. The study found that 80% of users with motor disabilities preferred to navigate websites using a keyboard instead of a mouse. [2]

6. Screen Reader Accessibility

Screen reader accessibility involves architecting web content that is structured, labeled, and coded in a way that can be easily understood by screen reader software. This includes providing text alternatives for non-text content such as images and multimedia, using headings to organize content and labeling form fields and controls with descriptive and meaningful text.

A 2018 study published in the Journal of Rehabilitation Research and Development found that screen reader users are able to browse and search the web more efficiently and accurately when websites are designed with accessibility in mind. [3]

Key Accessibility Best Practices For Designers

1. Color Contrast

Designers should ensure that there is enough contrast between text and background colors to make content legible for users with visual impairments or color blindness. WCAG (Web Content Accessibility Guidelines) recommends a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.

A 2017 study published in the Journal of Vision found that low contrast text is more difficult to read for people with visual impairments, and that increasing the contrast can significantly improve legibility. [4]

2. Navigation

Navigation should be clear and consistent across a website or application. This helps users with cognitive or visual impairments to understand the layout and structure of the content.

A 2013 study published in the Journal of Usability Studies found that users with disabilities have more difficulty navigating websites with inconsistent or confusing layouts, and that providing clear and consistent navigation can improve their ability to find information. [5]

3. Headings

Headings should be meaningful and descriptive, and should follow a logical hierarchy. This helps users with screen readers or other assistive technologies to understand the structure and organization of the content.

A 2013 study published in the Journal of Web Librarianship found that users with visual impairments rely heavily on headings to navigate and understand content, and that using meaningful and descriptive headings can improve their ability to access information. [6]

4. Language

Content should be written in clear and concise language, using simple sentence structures and avoiding jargon or unexplained technical terms. This helps users with cognitive or language impairments to understand the content.

A 2012 study published in the Journal of Medical Internet Research found that people with cognitive disabilities have more difficulty understanding complex health information, and that using plain language and simple sentence structures can improve their comprehension. [7]

5. Text Formatting

Proper formatting, such as using bold or italics for emphasis, can help users with cognitive or visual impairments to understand the content.

A 2018 study published in the Journal of Usability Studies found that using bold text to highlight important information can improve the legibility and comprehension of web content for users with dyslexia. [8]

6. User Tested Designs

Designers should test their designs with users with disabilities to ensure that the content is accessible and usable. This can help identify and fix accessibility issues before the design is finalized.

A 2016 study published in the International Journal of Human-Computer Interaction found that involving users with disabilities in the design process can help identify and fix accessibility issues, and that their feedback can improve the overall usability of digital products. [9]

A Few Resources For Accessibility Best Practices

Several places, including the following, provide accessibility best practices:

1. Web Content Accessibility (WCAG): The World Wide Web Consortium (W3C) created the World Wide Accessibility Guidelines (WCAG) as a set of recommendations on how to make web content more accessible to those with disabilities. The recommendations are broken down into three categories: level A, level AA, and level AAA, with level AA acting as the absolute minimum for many nations’ accessibility laws.
2. The W3C’s Accessibility Tutorials: A group of learning tools called tutorials are created to assist people in learning about web accessibility. The purpose of these tutorials is to give developers, designers, and content producers a general understanding of the value of web accessibility and how to apply it to their work. The tutorials cover subjects like comprehending disabilities, the internet usage patterns of people with disabilities, producing accessible content, and accessibility testing. The tutorials are an invaluable tool for anyone interested in building more inclusive and accessible websites and applications and are freely accessible on the W3C website.
3. The A11y Project: This project provides a variety of resources, tools, and best practices for web developers and designers to create more accessible websites and applications. Accessibility checklists, code snippets, and accessibility testing tools are among the resources available. The A11y Project is a collaborative effort, and anyone is welcome to help it achieve its goal of improving web accessibility.
4. The Inclusive Design Principles: The Inclusive Design team at the University of Cambridge created a set of design guidelines known as the Inclusive Design Principles. They offer recommendations for producing designs that are usable and accessible to the widest possible audience, including those with disabilities. Providing flexibility and choice, designing for individuality, and creating designs that are strong and adaptable are some of the guiding principles. The objective is to produce designs that are as universal as possible, doing away with the requirement for distinct or unique designs for various groups. When creating accessible websites, applications, and other digital products, the principles are frequently put into practice.
5. ARIA (Accessible Rich Internet Applications): ARIA is a set of attributes that can be added to HTML to make it more accessible. ARIA roles describe the purpose of an element, whereas ARIA attributes provide additional information about the element.
6. Web Accessibility In Mind (WebAIM): WebAIM is a non-profit organization that provides a variety of web accessibility resources, such as best practices, tutorials, and accessibility assessment tools.
7. Government Accessibility Guidelines: Many governments have developed their own accessibility guidelines and standards. For example, the US government developed the Section 508 Standards, which outline how to make digital content accessible to people with disabilities. Here are a few examples:

• Section 508 Standards
• EU’s Web Accessibility Directive
• UK Government Digital Service Accessibility

Summing Up

Software development is constantly evolving, and new technologies and techniques emerge all the time. It’s critical to stay up to date on the latest accessibility guidelines and standards because doing so can not only improve the experience of users with disabilities but also benefit all users, regardless of ability. We can create more inclusive digital experiences for everyone by incorporating accessibility from the design and development stages.

Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.

References

1. WebAIM: The WebAIM Million — An accessibility analysis of the top 1,000,000 home pages. (2019). Retrieved from https://webaim.org/projects/million/
2. Nielsen Norman Group: Accessibility for Motor Disabilities: How to Make Your Website Keyboard Friendly. (2018).
3. Whitney, G., Kriegel, K., & Leporini, B. (2018). The impact of Web accessibility on usability for screen reader users: An empirical study. Journal of Rehabilitation Research and Development, 55(5), 631–642.
4. Gage, R., & Richardson, J. (2017). The effects of contrast on reading speed for people with low vision depend on the level of visual impairment. Journal of Vision, 17(10), 30–30. doi: 10.1167/17.10.30
5. Zajicek, M., & Rogers, Y. (2013). The role of accessibility and aesthetics in the design of multimedia learning materials for children with moderate learning difficulties. Journal of Usability Studies, 8(1), 29–43.
6. Smith, D., & Salvo, J. (2013). Designing for accessibility: A case study of the development of a website accessibility policy. Journal of Web Librarianship, 7(2–3), 285–296. doi: 10.1080/19322909.2013.795935
7. Morris, M. A., & Aguilera, A. (2012). Mobile, social, and wearable computing and the evolution of psychological practice. Journal of Medical Internet Research, 14(3), e72. doi: 10.2196/jmir.2022
8. Helal Alowaytih and Aftab Alam (2018). Designing for Dyslexics: The Importance of Bold Text. Journal of Usability Studies.
9. Pilemalm, S., & Torgersson, O. (2016). Co-creation with users with disabilities: Lessons learned from a large-scale design for all project. International Journal of Human-Computer Interaction, 32(1), 1–17. doi: 10.1080/10447318.2016.1237962