✎ Technique: Describing graphs

Some people understand complex information best when it's presented visually, such as as a chart or diagram, while others find that reading the information suits them better. For people who use screen readers, a good text equivalent of the information that’s presented graphically is essential for their understanding.

For simple graphics, providing a succinct, informative text alternative is usually fine. But for complex graphics, it's not enough to provide a screen reader user with only short alternative...

Read more about ✎ Technique: Describing graphs

✎ Technique: Text and images of text

Some people with reading difficulties or visual impairments need to customize the display of text to make it easier to read. When text is presented as an image of text, that limits their ability to change the appearance of that text. So wherever possible, use text along with CSS to apply styling (such as color, typeface, or size).

If you use an online content editor to write content, the styling will happen automatically. If you feel that you need text that deviates from the style, formatting options...

Read more about ✎ Technique: Text and images of text

✎ Technique: Using color to convey information

Some people with color deficit have trouble differentiating between specific colors, such as between red and green or red and black. Screen reader users do not access content visually, so they do not have access to color information.

Color is a powerful visual means of presenting or distinguishing information, but when you use color to identify or distinguish information, make sure that this information is still available to people who can't perceive color.

... Read more about ✎ Technique: Using color to convey information

✎ Technique: Session extension

For a number of reasons including data persistence, performance and security, it is sometimes beneficial to terminate idle user sessions.

So that users do not lose data, it's important to warn them of a session that is about to expire and give them the option to continue. This is especially true in the case of people who might take longer to read or interact with a page due to a disability. It's important to make such prompts accessible.

... Read more about ✎ Technique: Session extension

✎ Technique: Enable text resizing

Some people with reduced visual acuity may not need screen magnification software or screen readers but might still have problems reading smaller fonts. So the ability to allow easy enlargement of text size is important.

There are a number of ways to zoom web-page content in to enlarge text without needing to provide explicit controls to do so. To avoid diminishing this variety of user control, you have to be careful how you code font sizes.

... Read more about ✎ Technique: Enable text resizing

✎ Technique: Form feedback with live regions

Providing form feedback accessibly helps users submit data more accurately and reduces the chance for error. For learning resources, easy access to feedback supports the learning process; for forms collecting data, good feedback helps to reduce the chance of input errors being made. 

When providing feedback on user input, JavaScript is often employed to print messages to the screen. Users looking at the screen will see the message appear in response to their actions. Screen-reader users who do not...

Read more about ✎ Technique: Form feedback with live regions

✎ Technique: Accessible modal dialogs

Modal dialogs can enhance usability by focusing attention on a specific message that requires a user action to continue.

An accessible modal dialog is one where keyboard focus is managed properly, and the correct information is exposed to screen readers. HTML and WAI-ARIA can be used to provide the necessary semantic information, CSS the appearance and Javascript the behavior.

... Read more about ✎ Technique: Accessible modal dialogs

✎ Technique: Expandable sections

Expandables (sometimes called “collapsible” or “disclosure widgets”) are simple interface patterns that allow you to expand and collapse content. They can be helpful accessibility aids as they give users the choice of revealing content to read it, or bypassing the content, making page navigation more efficient for screen-reader users and people using the keyboard or alternative input devices.

To ensure that they are accessible, it's important that expandable sections are coded so that their state (...

Read more about ✎ Technique: Expandable sections

✎ Technique: Accessible names for buttons

Accessible names are the labels given to HTML elements that can be announced in assistive technologies such as screen readers. They may or may not be visible to sighted interface users, depending on context.

Whether you provide controls using standard HTML elements or create custom controls, ensure that controls are given appropriate names. There are a number of ways to provide accessible names.

... Read more about ✎ Technique: Accessible names for buttons

✎ 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