Development

Adding an aria-label to your navigation elements allows people using screen readers to understand each landmark's purpose quickly.

People with low vision use zoom to scale content, sometimes up to 400%. As they zoom, content should reflow vertically (as a column) and remain fully legible and logical without a need for horizontal scrolling.

Videos, animations, and audio that automatically play can be confusing and stressful for people with cognitive impairments. Autoplaying media also makes it hard for people using screen readers to hear a page’s content.

Scrolljacking is when a website overrides expected up/down scrolling patterns on a page. Scrolljacking can make it difficult to navigate a website, especially for people using assistive technologies.

Autofocus can create confusion, especially for screenreader users, by moving them to a form field without permission or context. When the page <input> includes other content, or when the input field isn’t the primary purpose of the page, it's best practice to let visitors choose to fill out a form.

Keyboard users navigate a site by tabbing through actionable items on a page, and focus states indicate which item is being focused.

People with partial vision and low vision enlarge text to make it more readable. Using user-scalable=”no” in the <meta name=”viewport” element blocks people from resizing text, and ultimately from using your site.

Accordion elements should use an ARIA attribute to communicate an open or closed status to screen readers and other assistive technology.

Sighted people perceive page structure and relationships through visual cues like headings, spacing, color, etc. Having these structures and relationships set or available in text make your site easier to understand for everyone.

You can communicate that people can interact with an element by changing how it looks and behave in different states.

Many people use only the keyboard to navigate a website. Tabbing order should be logical so that keyboard users can sequentially navigate and use every interactive element on a page.

When keyboard users tabs into modals (like a popup or dialog), focus should remain in that window. This helps prevent users from accidentally moving focus outside the modal without closing it. Users should be able to use the ESC key to close the modal.

Decorative elements (that aren’t images) should be hidden with an aria attribute so assistive technology can ignore them.

Keyboard users use the “Tab” key to navigate from link to link on a web page. Without a “Skip to main” link (sometimes referred to as a “skip navigation link”), users are forced to tab through every link in a navigation bar before getting to the main content.

Alt text describes images to visitors who are unable to see them. This includes screen readers and browsers that block images, but it also includes users who are sight-impaired or otherwise unable to visually identify an image.

Audio descriptions describe visual information presented in video or other media. This benefits people who are blind, have low vision, or have cognitive limitations that make it hard to interpret visual cues.

Captions allow Deaf or hard of hearing people to access audio content. Some video services like YouTube use an algorithm to automatically generate captions. This is a fast but often ineffective method, as the captions are often incorrect.

The title element, contained in the document's head element, is often the first piece of information announced by assistive technology. This helps tell people what page or view they are going to start navigating.

Provide a global pause function on media elements. If the device has a keyboard, make sure the space key can pause playback. Make sure your site doesn’t interfere with the space key's ability to scroll the page/view when not focusing on a form control.

Most of the time, content that’s not visible on the screen should also be hidden from keyboard and screen readers. This means that hidden content should not be focusable. For example, an inactive modal shouldn’t be focusable.

A common web pattern is to animate the transition to an anchor link within a page. This animation can be harmful to people who are sensitive to motion.

Setting the language on a webpage allows more people to access your content. This benefits people who use assistive technologies like text-to-speech, people who rely on captions, and people who have a hard time reading written material.

Landmark regions help communicate the layout and important areas of a page or view to assistive technologies and can allow quick access to these regions.

Headings give people a sense of a page’s organization and structure, like a table of contents. They break up content to be easily scanned with screen readers or visually. Absent or poor heading structure forces visitors to work hard to find what they’re looking for.

When you have a list of several similar elements like cards or bullets, make sure they’re always contained in a list, either a semantic unordered list <ul> or an ordered list <ol>. When screen readers come to a semantic list, they’ll notify the user that there’s a list and how many items it has.