HOME / ROLES / CONTENT CREATORS / STRUCTURE /

Provide visual and semantic structure

Using visual characteristics can be a powerful and effective way to communicate information, whether by using color or by referring to visual location, appearance, size, or orientation. But if you don’t make that same information available in another way, people who can’t see these visual characteristics won’t have access to that information.

For example, the red text below indicates that the 100GEPH course is full. But people who cannot distinguish the color won’t know that the course is full.

  • 100GEPH Introduction to Physical Geography
  • 105GESC Surveying and Cartography
  • 110GEGP Geopolitics

The following instructions use visual characteristics to identify controls. But people who cannot perceive color or spatial information will not be able to follow these instructions.

  • Click on the pink arrow
  • Select an option from the menu on the right

When using visual characteristics, make sure the information is also available to people who can’t see color:

  • Provide another cue. Use color as a way to convey information to people who can perceive color, but also provide the information in another way for people who can’t see color—in text, for example.
  • Provide meaningful labels. Give controls such as links and menus meaningful labels and titles so that people understand what they do without needing instructions.

Testing

  • Print out your page in black and white. Do its information and instructions make sense when color isn’t available?
  • Read your page to someone who isn’t looking at the screen. Can they make sense of everything they hear?
  • Check your page for references to visual appearance, size, position, or orientation. Is this information provided in a way that's understandable to someone who can't see?

Resources

✎ 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

A diagram showing a web page increasing in structural clarity by being divided into paragraphs then lists and headings being added

In the diagram, three versions of a web page are illustrated. From left to right, they increase in structural clarity. 

The first (left-most) example imagines a web page with no structural block-level elements at all. That would be a dense and frustrating read, especially for those using assistive technologies who would have no choice but to start at the beginning and read the whole content.

The second example improves on the first by dividing the mass of text into distinct, reasonably small paragraphs. Paragraphs divide groups of sentences thematically, aiding comprehension.

The third example is optimally structured using paragraphs, headings, and lists to give form to the content. Headings divide the content into larger sections than paragraphs and simultaneously label those sections. They can be used as a navigation aid by screen reader users who can, for example, skip past a section that doesn't interest them by pressing the "h" key to take them to the next heading.

Lists aid comprehension by grouping together short, digestible pieces of information, and they can be used to summarize the salient points in the preceding body text. Lists are announced and enumerated in assistive technologies.

You don't have to be able to write HTML in order to create well-structured web content—most web content editors provide features to allow you to give text semantic meaning, so make sure you use them over features that only provide visual styling.

Code editor: Markdown

One way to easily write structured content that outputs as HTML is to use Markdown syntax. This code editor is set up for Markdown so you can play with the syntax and see the HTML output it creates.

See the Pen Markdown by HUIT - Web, UX and Digital Accessibility Services (@hwpdas) on CodePen.

See also: Provide visual and semantic structure ✎, Blind, Low vision, Cognitive, Screen reader, Screen magnification, High contrast mode, Custom stylesheet, Perceivable, Text, HTML

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

Examples

✗ Bad example

Text reading to start, click the button on the right, with a button reading start to the right of the text

In this example, the text refers to the button by its position. If the button wraps on a small screen and appears under the text, the description would no longer be accurate. In addition, screen reader users read pages sequentially. In this context, "right" is meaningless: the button always appears after the text in the markup, regardless of visual style. 


<p>To start, click the button to the right.</p>
<button>start</button>

✓ Good examples

 

We can avoid reference to a specific position or other visual characteristics. 

The text are you ready to start? followed by a button with start as its label

This example uses more compelling copy based on a question and a call to action as an answer. There's no need to refer to position at all, but it's important that the button is next in the source order so that it is encountered directly after the question both visually and structurally.

See also: Provide visual and semantic structure ✎, Blind, Low vision, Color blind, Screen reader, Screen magnification, High contrast mode, Custom stylesheet, Perceivable, Controls, Images, Inputs, Text, CSS, HTML, PDF, Word

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

Examples

✗ Bad example

Imagine that your content requires users to use a key to identify different states. A key based solely on flat colors using identical shapes is inadequate because color would be the only way to distinguish between incorrect and correct answers.

Key which identifies incorrect as red and correct as green using colored squares

✓ Good example

In this example, the square shapes are replaced by pictographic symbols; a cross and a check mark. Not only are these discernible without relying on color, but color differentiation has been retained as a secondary form of differentiation, making the interface clearer still to those who can determine color.

A key wherein incorrect is defined by a red cross and correct by a green cross

Note that for this approach to be accessible, the icons used for the cross and check mark need to have appropriate text alternatives so that screen-reader users have access to the information that the icons convey.

See also: Provide visual and semantic structure ✎, Blind, Low vision, Color blind, Screen reader, Screen magnification, High contrast mode, Custom stylesheet, Perceivable, Controls, Images, Inputs, Text, CSS, HTML