When a link falls at the end of a sentence always put the full stop outside the anchor tag
Consider the World Wide Web Consortium Web Content Accessibility Guidelines (WCAG), 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.
Date Submitted: Monday, 21 March 2005
Author: Jim Byrne
Position:
Website: Guild of Accessible Web Designers
Bio:
Copyright © 2002, 2003, 2004, by Jim Byrne. All rights reserved. Jim is a recognised authority on accessible web design, author of Making Websites Accessible (SAIF, 2002), and Accessible Web Typography (ScotConnect 2003). He was a founder member of the award winning, accessible web design consultancy established in 1996, 'The Making Connections Unit' (http://www.mcu.com).
Date Created: 25-Oct-2007
Last Updated: 25-Oct-2007
Permalink: [link]
Articles
- 3 Tips: Free Bobby, Free Waizilla, and use Acrobot
- A better approach is to design pages so that the presentation of content can be changed by the end u
- Add structural meaning to image based headings
- Associate form fields explicitly with their labels
- Check colour contrast by creating a greyscale image of your web page
- Decide whether your non-text elements are functional, decorative or providing content?
- Develop your sites for a standard compliant browser
- Don't rely on automated tools for checking web accessibility
- Don't use HTML & CSS color attributes
- Don't use the statistics defence as a reason to exclude people from your content
- Download ready made style sheets to meet your access needs
- How to hide a flash
- How to make client-side image maps accessible
- How to make your pages validate when they include urls with ampersands (&'s) in them
- If you need help, ask an expert!
- Layout your forms using CSS instead of tables
- Make HTML pages created from MS Word more Accessible
- Structure your menus by marking them up as lists
- The Flash Satay method to embed flash in your pages and support standards
- Understanding colour contrast and accessibility
- Use absolute size keywords to set the text size on your pages
- Use alternative style sheets to give users control of critical elements such as text size or colour
- Use favelets to check validation and accessibility of your web pages
- Use Javascript to add default text to input fields
- Validate when using blockquote
- Web accessibility for deaf people
- Web Accessiblity Toolbar for Internet Explorer
- What is the object element for?
CATEGORY INDEX
Site Sponsors
- Attitude e-media designs websites to be mobile ready, adhere to international standards, and be an attractive online business entity, including hosting services.
- TOLRA Micro Systems Limited offers web design, e-commerce enabled sites, web hosting, and off the shelf scripts, such as the TOLRA php Directory Script
