Development

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

Full details

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.

Full details

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.

Full details

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.

Full details

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.

Full details

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

Full details

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.

Full details

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

Full details

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.

Full details

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

Full details

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.

Full details

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.

Full details

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

Full details

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.

Full details

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.

Full details

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.

Full details

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.

Full details

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.

Full details

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.

Full details

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.

Full details

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.

Full details

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.

Full details

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.

Full details

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.

Full details

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.

Full details