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