Elements

✎ Technique: Differentiating controls

Placement of controls affects their ease of use. For example, for a search feature, the “submit” button should be positioned right after the input field. Appearance and positioning are particularly important when providing a control that supports “destructive” actions, such as a “delete” or “clear” button. In these cases, ensure that these controls are clearly differentiated .

Examples

This example shows two closely spaced buttons, one to submit the form and one to reset the form fields

Read more about ✎ Technique: Differentiating controls

✎ Technique: Choosing a media player

Media player accessibility is essential for video content. Evaluate the accessibility and cross-device compatibility of the media player that comes with your video-distribution platform. Test the player in different platforms and devices to evaluate the user experience it provides out of the box.

Examples

Test the player for keyboard accessibility:

  • Can all the controls receive keyboard focus?
  • Can you operate them using your keyboard?
  • Can you see which
Read more about ✎ Technique: Choosing a media player

✎ Technique: Building tables

The <table> element is for data that one might find in a spreadsheet, consisting of rows and columns of cells. Browsers provide this mechanism to display table structures and to convey table data to assistive technologies. It's important to ensure that the editing process allows identifying row and column headers so that screen reader users can access the meaning of each data cell by understanding what row and column it appears in.

Read more about ✎ Technique: Building tables

✎ Technique: Structuring content

Adding structure to web content makes it more readable and comprehensible to everyone and especially to people with a visual or cognitive impairment that makes reading on-screen content difficult.

The purpose of HTML is to give structure to otherwise seamless runs of text. HTML allows us to provide semantic meaning to text so that it's available to assistive technologies.

Example

Read more about ✎ Technique: Structuring content

✎ Technique: Writing headings

The most important part of any page is its content, which is made up of paragraph text and sometimes supplementary media like images or video. Headings are used to group and label sections of content, giving visual structure to the page and providing a means of navigation to screen-reader users.

Examples

Think of headings as labels that identify the content that follows. Like the text you put in links, heading text should be descriptive and make sense out of context. This is

Read more about ✎ Technique: Writing headings

✎ Technique: Writing link text

Link text is the text you select for a link that describing what happens when a user activates it. So it needs to clearly and accurately convey the link's purpose. Commonly, link text is the name of the linked page or document. When a link leads to a document that's not a web page, such as a PDF or Word document, that should be clarified in the link text. Avoid overly terse, ambiguous link text, and avoid reusing the same link text within a page for links that lead to different destinations.

Good link text helps all

Read more about ✎ Technique: Writing link text

✎ Technique: Writing readable content

Readable content is accessible content. You should aim to choose words and sentence structures that are not difficult or unnecessarily time-consuming to read for your target audience.

Examples

Know your audience, and write in language that’s familiar to them. Even for a specialist audience, there is value in clearly communicating information and concepts when writing online content.

In general, keep words, sentences, and paragraphs short. Remove redundant information and

Read more about ✎ Technique: Writing readable content

✎ Technique: Referring to page content by its position

Avoid referring to a button, menu, or other item in the page only by its position on the page; instead, use additional information that describes the content.

Referring to a specific item in the page content by only its visual position prevents people who use screen readers from being able to make sense of this visual description. Another downside to referring to items by their position is that their position might change when the page is viewed at different screen sizes, such as on a smartphone

Read more about ✎ Technique: Referring to page content by its position

✎ Technique: Identifying lists of content

Lists are collections of related content. For example, a navigation bar is a list of links or a set of instructions may be an ordered (numbered) list. Clearly identifying a set of items as a list helps people understand that relationship. When you include a list in your page content, this relationship needs to be conveyed visually, and it also needs to be conveyed to people using screen readers.

Examples

✗ Bad example

It's perfectly possible to create a structure

Read more about ✎ Technique: Identifying lists of content

✎ Technique: Identifying headings

Headings are important orientation aids, and they help people quickly identify the content on your page. When headings are correctly identified, they also allow screen-reader users to quickly navigate from heading to heading using the screen reader's heading navigation functionality.

The best way to do this is to ensure that headings are identified in HTML. When using a web-content editor or a word-processing application, you can do this by making use of the heading options in the styles menu. 

Read more about ✎ Technique: Identifying headings

✎ 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 text, such as

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.

Example

Imagine that your page layout consists of a navigation area placed at the top of the page, a sidebar

Read more about ✎ Technique: Consistent layout

✎ Technique: Visited links

In long lists of links, it's helpful to show users which links they've already followed so they can focus on unseen content. Browsers do not tend to let you style visited links with anything but the color property.

Examples

Good example

With link styling, as with many aspects of web-interface design, you can aid comprehension by capitalizing on convention. By default, browsers style unvisited links with a #0000EE

Read more about ✎ Technique: Visited links

✎ Technique: Readable paragraph text

Paragraphs of text are a fundamental core of web content, so it's important to display them in a fashion that is optimally readable to the majority of your audience without requiring them to change their display settings. For people who do need to customize display of text to make it easier to read, it's important to support this customization rather than forcing them to read the text the way you specify.

For the most part, this means applying typesetting best practices, which predate the web.

Read more about ✎ Technique: Readable paragraph text

Pages