HTML

✎ 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: Consistent layout

Consistency is one of the cornerstones of good usability. Although it is possible in advanced CMSs to create radically different page layouts according to content type, it's important that areas outside of the page’s content area remain consistent across the site for wayfinding purposes. This can be controlled through carefully designing and implementing page templates.... Read more about ✎ Technique: Consistent layout

✎ 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: Site search

People use different methods to find web content. Screen-reader users might prefer navigation regions, people with dyslexia might prefer the logic of a site map, and people with motor impairments might prefer to type in a search term using a search facility.

So it's important the search facility on your site is logically and conventionally placed and constructed for optimal accessibility.... Read more about ✎ Technique: Site search

✎ Technique: Site and page navigation

It's important to provide consistent navigation regions to navigate between a site's pages and—where there is a lot content on each page—between sections of pages.

Clear, logical and consistent navigation tools reliably help people find their way to the content they need and recover quickly when they are in the wrong place. This helps everyone but particularly people with visual, cognitive, or motor impairments who might otherwise find it time-consuming to locate the information they need....

Read more about ✎ Technique: Site and page navigation

✎ 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: Autocomplete input controls

Autocomplete widgets can be helpful for accessibility because they can make it easier to enter text by providing suggestions based on the characters initially typed. This particularly helps people who find typing more difficult and people who may be susceptible to spelling mistakes.

Creating an accessible integrated autocomplete widget is a complex process. You need to ensure that screen-reader users are notified when the list of suggestions appears and that they can enter the list and select an option...

Read more about ✎ Technique: Autocomplete input controls

✎ Technique: Form error communication

Effectively and accessibly communicate form errors by:

  1. Communicating that a form has errors,
  2. Communicating any individual errors case by case, including clear guidance on how to address the error.

In part, this involves thoughtful content-writing to clearly and unambiguously help users recover from the error. But it also requires that error messages are made clear to screen-reader users, who may not otherwise be aware of them. This can...

Read more about ✎ Technique: Form error communication

✎ 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: 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

Pages