Content design

Blind users rely heavily on clear, properly structured headings to understand and navigate content (via a screen reader). Keep headings clear and brief. Avoid beginning different headings with the same words or phrases, since users have to read (or listen to) more information to differentiate between topics.

The heading structure provides an outline so blind users can quickly understand the organization and contents of the page. Content writers should indicate the hierarchy of the headings in the wireframes. This ensures they are properly implemented by developers. In most situations, the main topic or section of the page should be a level one heading (H1, in HTML). A logical heading structure normally increments by only one level as it descends. For example, an H4 should follow an H3, not an H2. Skipping a level can cause users to wonder if the H2 content is hidden or intentionally not included on the page.

Strive to have a single top-level heading (H1, in HTML) per page, as users typically think of an H1 heading as the main topic. The text of the H1 heading frequently matches the page title. Sometimes the heading may be a shortened form of the title. Note: There are rare circumstances where more than one H1 heading may exist on a page, such as when a web portal embeds many articles within a single page of content.

On HTML pages, the text within the title element appears as the window title on most browsers. Since the title is not part of the designed UI, it should be specifically called out in the wireframes so it is properly coded by developers. The title should succinctly identify the topic and uniquely identify the page, so that it provides context on a site map or search results.

Page titles will often include information on the set of pages to which they belong. A site selling clothing may have pages where each title consists of the item, the kind of clothing it is, and the target audience. For example “No-name Brand Khakis - Shorts - Mens.” The unique string should be at the start of the title, so that users see or hear the critical information first.

Screen readers can generate an alphabetical list of links on a page, which lets blind users quickly navigate to linked content. If the link text isn’t descriptive or if there are several links with the same text, such as “Read more,” the links can’t be understood out of context. Good link text can help prevent time lost from navigating to irrelevant content. Meaningful, stand-alone link text is also useful to someone with a cognitive disability.

Good link text

Sometimes a design includes generic links, such as “Read more,” “Help,” or “Click here”. It’s a technique used to conserve space or provide a consistent and predictable visual presentation of links in the content. The accessibility issue with such links is that someone who cannot see the context of its use may not know where the link will take them. Screen reader users sometimes use a short-cut function that navigates from link to link, skipping the surrounding text that provides the link context. The user must use additional screen reader functions to read the text before and after the link to find out what they might “Read more” about or get “Help” for. It may take a few tries to find the right link, leading to a frustrating experience.

First, consider whether the design could change to give the links a unique name. If not, be sure to annotate the connection between the link and the text that gives the additional context. Development can implement this association so that a screen reader announces the additional information along with the generic link text. The association gives clarity for a user who cannot see the surrounding text that provides an obvious context for sighted users.

The first cells in rows and columns often form the equivalent of a label for the table’s contents. Blind users or those who cannot see the whole table at the same time benefit greatly from this information, but only if it is coded properly. Where row or column headers exist, content designers should mark them in the wireframes so that developers can properly implement them. Only mark headers where the cell actually provides a header role; especially for rows, the first cell may not perform any function.

When you need to design complex data tables that have more than one level of row or column heading, or column and row headings that span multiple columns or multiple rows, make an explicit note of the levels or spans in the design. In many cases it is worth restructuring the information or splitting complex tables into smaller more simple tables.

In the wireframes, note each occurrence of phrases or passages that are in a different human language than the rest of the page. Your notation will inform the developer to code the language of each phrase in the content so that assistive technologies (AT) will present or speak it correctly.

Do not flag proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the page or topic.

As is common with most editorial standards, you should spell out the first use of a term, with the abbreviation or acronym appearing in parentheses. However, there may be situations where spelling out the phrase is not practical, such as when table headers are heavily abbreviated to fit a small cell space. In such cases, flag the abbreviation to developers, along with the spelled out text, so that they can programmatically incorporate it. There is a simple HTML technique that allows users and assistive technologies to expand abbreviations. Note that using this technique is not required at level AA of WCAG.

Table captions are basically headings for tables, while figure captions normally appear beneath the images they explain. Captions help all users better understand the figures and tables, but are especially helpful to users of assistive technology (AT). Note in your wireframes and designs where you use such captions so that developers can properly code them.

Figure captions, which typically appear beneath and describe an image, help all users better understand the image but can be especially helpful to users of assistive technology (AT). In most situations, figure captions can supplement the alternative text for an image. For instance, the caption may tell all users what an image is, why it is there, or an important thing about it. In such cases, the alternative text for the image can often be kept to just one or two words.

Refer to the resources and requirements below.