Accessibility Best Practices

Accessibility is the practice of making your website accessible to users with disabilities.

Sometimes you will see the term A11y which is a numeronym for "accessibility." It's formed by taking the first and last letters of the word and replacing the middle letters with the number of letters between them.

WCAG

WCAG stands for Web Content Accessibility Guidelines. It's the international standard for web accessibility, created by the W3C (World Wide Web Consortium) through the WAI (Web Accessibility Initiative).

Key Versions:

  • WCAG 2.0 (2008) - Still widely used
  • WCAG 2.1 (2018) - Current recommended version
  • WCAG 2.2 (2023) - Latest version

The POUR Principles

The POUR principles are a set of guidelines for building accessible websites. They are:

  • Perceivable: The content should be perceivable by all users.
  • Operable: The content should be operable by all users.
  • Understandable: The content should be understandable by all users.
  • Robust: The content should be robust enough to be used by all users.

Semantic HTML

Always start with proper HTML structure before using ARIA or JavaScript enhancements.

  • Use the lang attribute on the html element
  • Use only one h1 tag per page
  • Use correct heading hierarchy (<h1> → <h2> → <h3>).
  • Use a description with the title tag
  • Use <button> instead of clickable <div> or <span>.
  • Use <nav>, <main>, <header>, <footer>, <section>, <article> for web page structure.
  • Use <ul>, <ol>, <dl> for lists.

Keyboard Navigation

Many users navigate solely with a keyboard (e.g., Tab, Shift+Tab, Enter, Space). Your site must be fully operable this way.

  • The tab order should follow the visual flow of the page (usually left-to-right, top-to-bottom). This is generally automatic if you use semantic HTML.
  • Never remove the default focus outline with outline: none. If you customize it, ensure it has a strong contrast ratio (3:1) against the background.
/* Good custom focus */
button:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}
  • All Interactive Elements Must Be Focusable: Buttons, links, and form inputs are natively focusable. If you create a custom interactive component (e.g., a div acting as a button), you must add tabindex="0" and the appropriate ARIA roles/states.
<div tabindex="0" role="button" aria-label="Click me">Click me</div>

ARIA Landmarks

ARIA is a set of attributes that you can add to your HTML to improve the accessibility of your website. It is a way to make your website more accessible to users with disabilities.

There are 3 main ARIA concepts:

  • ARIA roles: These are the roles that your elements can have.
  • ARIA states: These are the states that your elements can have.
  • ARIA properties: These are the properties that your elements can have.

Other

  • Support keyboard navigation
  • Set focus on modals, popovers, alerts
  • Use correct HTML5 input types
  • Images should have alt descriptions
  • Use the lang attribute on the html element
  • Use only one h1 tag per page
  • Use a description with the title tag
  • Use aria landmarks where possible
  • Screen readers
  • Make sure that media is not autoplay
  • Provide transcriptions for video/audio
  • Add labels to form fields
  • Use text, not pictures of text
  • Web page size should not be larger than 500kb
  • Make a website for people with disabilities: larger font size, different color pallet
  • Dark/Light mode
  • Responsive design

Material