Principles

✎ Technique: Managing focus and inactive elements

Visually indicating which element has focus is important for effective keyboard navigation. It's also important to ensure that only those elements that are available visually for interaction are focusable. If an active element is intended to be unavailable in a particular state and it’s hidden from view, it should not be able to receive focus.

Having to tab through invisible controls to reach visible ones is arduous and potentially confusing for sighted users navigating the page by keyboard. Also, screen-...

Read more about ✎ Technique: Managing focus and inactive elements

✎ Technique: The main landmark

Landmarks help assistive-technology users navigate to and between areas of a page, and they improve the efficiency of in-page navigation.

Landmarks are to sections what continents are to countries—they help break the interface up into a few large, semantically distinct areas such as headers, footers and navigation blocks. The main landmark defines the unique content of the page: the most likely reason a user visited the page in the first place.

... Read more about ✎ Technique: The main landmark

✎ Technique: Heading structure

The heading levels (1-6) are often considered a way of describing and determining the “importance” of a heading, with h1 being the most important. This might be reflected in the visual appearance of headings—higher-level headings typically appear as bigger and bolder text than lower-level headings.

But you can't just put an “important” heading anywhere. Its heading level relates to how much content it refers to, and that has to do with structure.

Reflecting structure accurately allows screen-reader users to use their screen reader's heading-navigation feature to navigate by heading level, building up an idea of document structure. It also ensures that, for people who use custom stylesheets, heading structure is preserved even when the appearance of headings is changed.... Read more about ✎ Technique: Heading structure

✎ Technique: Grouping section content

For a readable interface, it's important to use visual cues to group or separate content to show which content relates to other content. This makes content easier to read, especially for people who have difficulty reading on-screen content and people who use screen readers.

When grouping content visually, you must make sure that you're not skewing the source order and breaking up the same content for screen-reader users.

... Read more about ✎ Technique: Grouping section content

✎ Technique: Writing captions

Captions allow people who can't hear a video's soundtrack to have access to a text version of the information provided in the audio.

If you decide to caption your own video content rather than outsource this job to a captioning service, make sure the captions provide an accurate and meaningful alternative to the audio. In particular, when writing captions for audio content in a video, make sure all the spoken content is available in captions, as well as indications of speaker switching (using ">> SPEAKER NAME:") and...

Read more about ✎ Technique: Writing captions

✎ Technique: Using diagrams to illustrate text

People differ in the way that they can (or like to) consume information, especially in educational contexts. Some people might prefer information provided in text, or video, or audio; and their accessibility needs can also influence their preferences.

But while accessibility for images often focuses on providing a text alternative for screen-reader users, we can also look at the issue from the other way around—providing a graphic alternative for text to make the underlying information or concept easier to understand. This...

Read more about ✎ Technique: Using diagrams to illustrate text

Pages