When a link falls at the end of a sentence put the full stop outside the anchor tag

Consider the World Wide Web Consortium Web Content Accessibility Guidelines (WCAG 1), Checkpoint 10.5:

“Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links. ”

Generally when trying to ensure that my web pages meet this particular requirement I’m thinking about navigation bars; I’m either marking them up as lists, or putting printable characters between adjacent links (if necessary I make them invisible via CSS).

Unfortunately that isn’t always enough to ensure a clean bill of health with regard to this particular checkpoint. It is easy – particularly on a page that gets updated often – to violate this rule in the bodytext of the page, e.g., when a sentence that ends with a link, is followed by one that begins with a link.

The solution is to get into the habit of adding the full stop after the anchor tag; simple but effective. As web accessibility tips go – it’s not the most significant one I’ve ever published. However, having adjacent links without a printable character between them, means your well-crafted page won’t pass WCAG Priority 1; and someone is bound to get in touch to alert you to that fact.

Links

WCAG 1 Checkpoint 10.5.

Take my Web Accessibility Online Training Course - WCAG 2.1 Compliance

Learn to design and manage WCAG compliant, accessible websites with my online course

You will learn both the techniques of accessible website design and an entire ‘framework for thinking about the subject’. It will equip you with the skills to understand, identify and fix issues any accessibility issues you come across. Watch the free videos to get a taste of what is on the course.