✎ Technique: Referring to page content by its position

Source: https://accessibility.huit.harvard.edu/technique-referring-controls-position Parent: https://accessibility.huit.harvard.edu/color-meaning

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

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.

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.