Introduction to screen‐readers: Voiceover MacOS Edition

As we've already seen, screen‐readers can extract all occurrences of certain elements like headings and links into a list in the Rotor for the user to choose from. Users can also jump from link to link on a page using VO + Cmd + L.

But if you have two links with different urls but with the same link text, the user might not be able to determine which one they should click on, forcing the user to search around.

Activity - contextual links

Below are two lists with links in.

Open the link listing in the Rotor VO + U to view the links on this page.

Poorly marked-up links

The first list has standard links - containing just the visible text. When you view these in the dialog you won't know which “Change” or “Remove” link refers to which person. They all seem identical.

Voiceover Rotor showing how links from the items in the first example are indistinguishable from each other

Well marked-up links

In the second list we've added some hidden contextual information to make the links more explanatory. Now the user can clearly see what each link does. Now they can action them knowing what the link will do.

Voiceover Rotor showing how hidden copy can make links much clearer - links in the second example with the hidden content are clearly defined

If you find you are needing to add hidden copy to help out screen‐reader users it is a good idea to review the design and see if either having that content exposed would help all users, or if the design could be adjusted to make the hidden content redundant.

In the cases above adding the contextual information is probably the best solution without cluttering up the interface with repetitive information.

Always add hidden copy after the visible text to make it as accessible as possible for speech-recognition users.

Key takeaway

Check all the links on your page in the Rotor. Can you tell what each one will do without looking at the page? Consider adding some contextual copy if you cannot, especially where links use the same copy.

Next, tables