Accessible link labels
Link labels are an important part of your design accessibility, so I have a few tips for you. Some of these come from the WCAG criteria at the AAA level – the top tier of accessibility standards. They're not strictly required, but I find it worth considering when it's easy to implement. Ultimately, it's up to you to decide what works best in your situation.
Avoid using all caps for button labels
All caps text is harder to read, especially for dyslexic people. Depending on type and font, capitals can be more challenging to distinguish than lowercase because words form a uniform rectangular shape.
It's also problematic for people using screen readers. Those can spell out capitals letter by letter, like we do for acronyms.
Additionally, all caps text can come across as shouted text. So try to use it only when absolutely necessary.
Integrate links instead of sending URLs
Accessibility extends to emails and text messages. When sending a link to someone using a screen reader, embed it within your text. Avoid simply pasting the URL, as screen readers may read it aloud letter by letter, which can take a while.
Remember, screen readers are beneficial not only for blind or visually impaired people but also for dyslexic people.
Don't write "link" as part of a label
Sighted users typically recognise links by underlined text. Screen readers announce links before reading their content. For instance, my blog will be read by most screen readers as "Link my blog". So writing "link" in the label is unnecessary.
Don't use Read More links
People who use screen readers can navigate from link to link on a page. In those cases, the screen reader will read out all the link and button labels one by one, ignoring context. If those labels are all the same, it'll be hard to know where each one leads.
You can add code for screen readers only to specify the link's destination. But why not provide the same information to everyone? It'll save time because you won't have to maintain two versions (one for screen readers and one for other users). And everyone will get more precise information regardless of their abilities.
This recommendation is part of the WCAG criteria at the AAA level.
Test your link labels with Wave
To understand how a screen reader interacts with your page, I recommend using Wave, a browser extension that lists link labels as a screen reader would. Once installed, right-click anywhere on the page and select "Wave this page." In the "Order" tab, you can view the list of links and buttons. The Wave extension is available for download on all major browsers.
