3.13 Separate adjacent links with non-link, printable characters surrounded by spaces
Contents
WAI Checkpoint 10.5
Full WAI text: "Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links." A user agent is a piece of software for accessing Web content. User agents could be desktop graphical browsers, text browsers, voice browsers, mobile phones, multimedia players, plug-ins, and some software assistive technologies used in conjunction with browsers such as screen readers, screen magnifiers, and voice recognition software.
Not all user agents can differentiate between hyperlinks that appear beside each other, unless they are separated by a text character which is not part of the link. Until such time as they can, text characters that are not part of a link should separate hyperlinks.
Rationale
Older user agents, especially screen readers, can't differentiate between hyperlinks when the links are listed side by side. Some designers try to overcome this by placing an "invisible" image between the links but this does not work reliably.
Consider this list representing 4 different of hyperlinks, displayed in a horizontal line: "Home About Us Contact Us Site Search". An older screen reader would read this as one hyperlink called "HomeAboutUsContactUsSiteSearch" and would try to read that title aloud. This would sound like nonsense, making navigation impossible.
Directions and Techniques
Insert a text character between lists of links
A text character such as the "|" character, a comma or the space " " character can be used to separate adjacent links.
How you could check for this:
There are no specific test methods recommended for this guideline.
Guidelines for Web Accessibility - Priority 3- 3.1 Ensure that text and background have sufficient contrast for people with colour deficient vision
- 3.2 Provide text links to emulate client-side image maps
- 3.3 Expand the first occurrence of any abbreviation or acronym
- 3.4 Identify the primary language of the document text
- 3.5 Place distinguishing information at the beginning of headings, paragraphs, lists, etc.
- 3.6 Supplement text with graphic or auditory presentations where they will facilitate comprehension
- 3.7 Provide summaries for tables
- 3.8 Provide abbreviations for table header labels
- 3.9 Identify groups of related links and provide a way to bypass them
- 3.10 Provide a linear alternative for parallel, word-wrapped columns of text
- 3.11 Create a logical tab order through links, form controls, and objects
- 3.12 Provide keyboard shortcuts to important links, form controls, and groups of form controls
- 3.13 Separate adjacent links with non-link, printable characters surrounded by spaces
- 3.14 Provide navigation bars
- 3.15 If search functions are provided, enable different types of searches for different skill levels and preferences
- 3.16 Provide information about documents comprising multiple pages
- 3.17 Provide a means to skip over multi-line ASCII art
- 3.18 Create a style of presentation that is consistent across pages
- 3.19 Include default text in form text boxes
- 3.20 Provide information to enable users to receive documents according to their preferences
