Accessibility Demo
Headings used as text:
Screen readers depend on headings to form an outline of a webpage, to enable navigation and finding specific content more easily.
But if you use headings for emphasis:
It can mess up the flow of a page and cause the screen reader to treat text as section breaks.
The biggest thing to avoid is using blank headings to format the layout of a page by creating larger line breaks.
A screen reader won't know what to do with a blank header line, and an accessibility checker will register it as an error.
Suspicious Link Text
Screen reader users can generate a list of links on a page to navigate them alphabetically. Users can also navigate through pages by tabbing through links.
To ensure that the website is accessible to all users, all link text on a page should be
- unique
- descriptive (meaningful when read out of context)
- preferably short
Check out the WCAG standard for suspicious link text.
Read University of Washington's page on using meaningful link text.
Redundant Links
In addition to suspicious link text that makes it unclear where a link is supposed to go, redundant links can also gum up the works. Most obviously, a redundant link make that list longer. It also confuses users by making it seem like they haven't successfully tabbed through to the next link.
Redundant links also often happen when both an image and adjacent text lead to the same URL.
This isn't a major accessibility violation, but avoiding the practice of using redundant links can make the ride a little smoother for user who access the site structurally, not visually.
How would you resolve the problem created by the redundant links above?
Redundant Title Text
Move your cursor over the link to see the hover text
The hover text comes from the Title field when a link is created.