Accessibility

Agree on a minimum level of conformance to WCAG

The Web Content Accessibility Guidelines (WCAG) (opens in a new tab) is one set of standards that can be used to measure the accessibility of a project. WCAG is a widely recognized set of guidelines developed by the World Wide Web Consortium (W3C) to help make web content more accessible to people with disabilities. It provides a set of recommendations for making web content more accessible, including guidelines for design, layout, and formatting, as well as guidelines for the use of multimedia and other interactive elements.

WCAG is organized into four principles: perceivable, operable, understandable, and robust. Each principle is further divided into a set of guidelines, which are then divided into individual success criteria. The success criteria are specific requirements that must be met in order for a project to be considered accessible according to WCAG.

There are three levels of conformance to WCAG: A, AA, and AAA. The A level represents the minimum level of conformance and includes the most essential success criteria. The AA level represents a higher level of conformance, and the AAA level represents the highest level of conformance. The level of conformance that is appropriate for a project will depend on the specific needs and requirements of the project.

Using WCAG or a similar set of standards can be a helpful way to measure the accessibility of a project and ensure that it meets the necessary guidelines and requirements.

Overall, agreeing on a minimum level of conformance to WCAG based on your project's requirements can help ensure that your project is accessible and meets the necessary standards and guidelines.

Consider using an accessible design system

An accessible design system is a set of design guidelines and standards that ensure that your site is accessible and usable for all users, including those with disabilities. It can include guidelines for layout, color contrast, font sizes, and other design elements that help ensure that your site is accessible and easy to use for all users.

Here is a list of popular accessible design systems that you may find useful:

• Material Design (https://material.io/ (opens in a new tab))
• Ant Design (https://ant.design/ (opens in a new tab))
• Lightning Design System (https://www.lightningdesignsystem.com/ (opens in a new tab))
• Foundation (https://foundation.zurb.com/ (opens in a new tab))
• Semantic UI (https://semantic-ui.com/ (opens in a new tab))
• Grommet (https://v2.grommet.io/ (opens in a new tab))
• Carbon Design System (https://www.carbondesignsystem.com/ (opens in a new tab))
• Fluent Design System (https://www.microsoft.com/design/fluent/ (opens in a new tab))

Use semantic HTML

Use semantic HTML tags, such as headings and lists, to help screen readers and other assistive technologies understand the structure and meaning of your content.

Using semantic HTML elements is important for improving the accessibility and SEO of your site. It is recommended to use semantic HTML elements whenever possible, rather than relying on div elements or other non-semantic elements.

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>My Blog Post</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
</main>
<footer>
  <p>Copyright 2021 My Website</p>
</footer>

Use ARIA landmarks

ARIA landmarks are special attributes that can be added to HTML elements to identify important regions or sections of a webpage. They provide a way for assistive technologies such as screen readers to quickly and easily navigate a webpage and understand its structure and content.

Use ARIA landmarks to identify specific areas of your page, such as the main content or navigation, to make it easier for users to navigate.

Here is a list of ARIA landmarks that you can use to identify important regions or sections of a webpage:

• role="banner": Identifies the region that contains the site or page banner, which typically includes the site logo, site name, and main site navigation.
• role="navigation": Identifies the region that contains the site or page navigation.
• role="main": Identifies the main content of the page.
• role="complementary": Identifies content that is complementary to the main content, but is still important and relevant.
• role="contentinfo": Identifies the footer or other content that provides information about the page or site, such as copyright information or contact information.
• role="search": Identifies the search form or search region of the page.

These ARIA landmarks can be added to HTML elements using the role attribute. For example:

<header role="banner">
  <!-- Site banner content goes here -->
</header>
<nav role="navigation">
  <!-- Site navigation content goes here -->
</nav>
<main role="main">
  <!-- Main content goes here -->
</main>

Use a consistent layout and navigation

A consistent layout and navigation is a design approach that ensures that the layout and navigation of a website or application is the same across all pages and devices. This is important for accessibility because it helps users understand how to find and access information on the site, and makes it easier for users with disabilities, such as cognitive or mobility impairments, to navigate the site. It can also help assistive technologies, such as screen readers, understand the structure and layout of the site and better assist users in accessing the content.

Use a consistent layout and navigation across your site to help users understand how to find and access information.

Use a logical tab order

A logical tab order is the order in which a user can navigate through the focusable elements on a web page using the tab key. It is important for accessibility because it helps users who are using a keyboard or assistive technology, such as a screen reader, easily access and interact with the page. A logical tab order ensures that the focus moves through the elements in a logical and intuitive way, rather than jumping around randomly or skipping over important elements.

Use a logical tab order to ensure that users can navigate through your site using the keyboard tab key.

Use keyboard-accessible controls

Keyboard-accessible controls are elements on a web page that can be accessed and controlled using a keyboard, such as buttons, links, and form inputs. This is important for accessibility because it allows users who are using assistive technologies, such as screen readers, or who are unable to use a mouse, to access and interact with the page.

Make sure that all interactive elements on your site can be accessed using a keyboard.

Avoid using content that requires users to scroll horizontally

Using content that requires users to scroll horizontally can be inconvenient and frustrating for users, and can also make it harder to read and understand the content. To avoid these issues, avoid using content that requires users to scroll horizontally, and focus on creating content that is easy to read and navigate.

Allow users to skip repetitive content

Allowing users to skip repetitive content, like navigation links, can improve the accessibility and usability of a website or application by simplifying navigation, enhancing accessibility for users with disabilities, and decreasing cognitive load. It can also reduce the amount of time they have to spend listening to the same information repeatedly when using assistive technologies.

Make it more efficient for users to find and access the information they need.

Help users avoid and correct mistakes

Providing the tools and guidance needed to avoid and correct mistakes can help users feel more in control, can improve the functionality and efficiency of the website or application, and can increase the reliability and trustworthiness of the content.

There are several ways you can help users avoid and correct mistakes on a website or application:

• Use clear and concise language: Use clear and concise language to help users understand what is expected of them and how to use the website or application.
• Provide clear instructions: Provide clear instructions on how to use the website or application, including any necessary steps or processes.
• Use error messages: Use error messages to inform users when they have made a mistake and provide them with guidance on how to correct it.
• Use form validation: Use form validation to alert users to any mistakes they have made when filling out forms, and provide them with guidance on how to correct them.
• Use input masks: Use input masks to restrict the format of user input and help users avoid making mistakes.
• Use confirmation dialogs: Use confirmation dialogs to double-check with users before they submit important actions, such as deleting content or making a purchase.

Use responsive design

Responsive design is a design approach that ensures that a website or application looks and functions correctly on different devices and screen sizes. This is important because it allows the website or application to be accessible and usable on a wide range of devices, including desktop computers, tablets, and smartphones.

Use responsive design to ensure that your site is accessible and easy to use on different devices and screen sizes.

Use adaptive font sizes

Adaptive font sizes are font sizes that automatically adjust based on the size of the device or screen, and can also be controlled by the user through native browser settings. This is important for accessibility because it helps ensure that the text is readable on different devices and screen sizes, especially for users with visual impairments, and allows users to customize the font size to meet their specific needs.

Use font sizes that are expressed in relative units, such as rem or em, to allow users to adjust the font size of your content.

body {
  font-size: 16px; /* base font size */
}
h1 {
  font-size: 2.5rem; /* 40px (2.5 x 16) */
}
p {
  font-size: 1.5rem; /* 24px (1.5 x 16) */
}

Avoid using color as the only means of conveying information

Using color as the only means of conveying information can be difficult for users with certain visual impairments, such as color blindness. It can also make it more difficult if users are viewing the content on a device with a low-quality display, as the colors may not be rendered accurately.

Instead of relying solely on color to convey information, you can use other means of conveying information, such as text labels, icons, or patterns.

Use sufficient color contrast

Color contrast is the difference in luminance or lightness between the foreground and background colors of an element. Using sufficient color contrast helps to ensure that text and other elements of the user interface are legible and easy to read for users with visual impairments, such as those with low vision or color blindness.

It is generally recommended to use a high color contrast ratio, such as a ratio of 4.5:1 for normal text and 3:1 for large text, to ensure that the text is easy to read and meets accessibility standards.

Provide users enough time to read and use content

Providing users enough time to read and use content can help ensure that users with disabilities, such as those with cognitive or visual impairments, are able to fully access and understand the content.

Provide users with a way to turn off or pause animations

Animations can be distracting or disorienting for some users, especially those with cognitive or physical disabilities, so it is important to use them sparingly and to provide controls or options for disabling them if necessary.

The prefers-reduced-motion media query is a way to detect if the user has indicated a preference for reduced motion in their operating system or browser settings. It allows you to adapt the motion of your webpage to the user's preference and help ensure that your application is accessible and usable for all users, regardless of their motion preference.

@media (prefers-reduced-motion: reduce) {
  /* Styles to disable animations */
  * {
    transition: none !important;
    animation: none !important;
  }
}

Use language tags

Use language tags to specify the language of your content and help screen readers and other assistive technologies provide the correct pronunciation.

<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p lang="fr">Voici un paragraphe en français.</p>
    <p lang="es">Aquí hay un párrafo en español.</p>
  </body>
</html>

Use clear and concise language

Clear and concise language is language that is easy to understand and free of unnecessary jargon or complexity. This is important for accessibility because it helps ensure that your content is accessible and understandable to a wide range of users, including those who may have limited language skills or cognitive disabilities.

Using clear and concise language can also help improve the overall usability and readability of your content.

Use descriptive link text

Use descriptive link text so users know what to expect when they click on a link.

// 🚫 Bad
<a href="/about">Click here</a>
 
// ✅ Good
<a href="/about">Learn more about our company</a>

Use descriptive titles

Descriptive titles are short, concise, and meaningful descriptions that accurately reflect the content or purpose of an element on a webpage.

They are used to provide additional context or information about the element and can be helpful for users who are using assistive technologies or who may have difficulty understanding the content of the element.

<a href="https://example.com" title="Learn more about our products and services">
  Our Products and Services
</a>
<button type="submit" title="Submit your contact information">
  Send Message
</button>
<input type="text" placeholder="Enter your name" title="Name field" />

Use text alternatives for non-text content

Text alternatives for non-text content are descriptions or captions that provide the same information as non-text content, such as images, videos, or audio files. This is important for accessibility because it helps users who are unable to see, hear, or understand the non-text content, such as users who are using assistive technologies or who have visual or auditory impairments.

Text alternatives can be provided using the following attributes:

<img src="image.jpg" alt="A photo of a cat sitting on a windowsill" />

Use captioning and transcripts for audio and video content

Using captioning and transcripts for audio and video content can help ensure that users with hearing impairments or disabilities are able to fully access and understand the content. Captioning provides a written transcript of the audio content, while transcripts provide a written record of the entire audio or video content, including dialogue, sound effects, and other important information.

<video src="video.mp4" controls>
  <track src="captions.vtt" kind="captions" label="English captions" default />
</video>

Test your application for accessibility

Testing your application for accessibility can help ensure that users with disabilities are able to fully access and use the application, and can help identify and fix any issues or barriers that may be preventing users with disabilities from fully accessing the content.

By using a combination of automated tools, manual testing, and user testing, you can get a comprehensive understanding of the accessibility of your application and identify any areas that need improvement.

• Use automated tools: There are several tools available that can help you test your application for accessibility automatically. These tools can scan your application and identify potential issues with things like color contrast, headings, alt text, and more. Some popular tools include the WebAIM WAVE tool (opens in a new tab), the Lighthouse tool (opens in a new tab) in Google Chrome DevTools, the aXe plugin (opens in a new tab) for Chrome, and A11Y linters for specific libraries and frameworks such as Angular (opens in a new tab), React (opens in a new tab), and Vue (opens in a new tab).
• Manually test the application: In addition to using automated tools, it is also important to manually test your application for accessibility. This can involve using a screen reader to navigate the application and ensure that the content is properly structured and readable, testing the application with a keyboard to ensure that all elements are keyboard-accessible, and testing the application on different devices and screen sizes to ensure that the layout and design are responsive and flexible.
• Involve users with disabilities: Another effective way to test your application for accessibility is to involve users with disabilities in the testing process. This can help you get valuable feedback on the usability and accessibility of your application from real users who may be using assistive technologies or facing specific challenges when using your application.