Search code examples
htmlaccessibilitywhitespacescreen-readerswcag

Are there accessibility concerns with removing the whitespace between two text elements? (e.g. span, a)

I am wondering if it's hurting accessibility in any way to have this HTML:

<a href="privacy.html">Privacy</a><a href="terms">Terms</a>

instead of this:

<a href="privacy.html">Privacy</a> <a href="terms">Terms</a>

or this:

<a href="privacy.html">Privacy</a>
<a href="terms">Terms</a>

I'm thinking in the context of a screen reader: will it properly recognize that they are two different words, and not "PrivacyTerms"? Is there a difference if I'm using <span> or any other element instead of <a>?

The reason I sometimes remove the whitespace is that I like to specify the exact gap between the elements with CSS (margin), and keeping a whitespace in the source adds a visual space depending on the font-size, which is selectable too (especially annoying when the elements are clickable, since the cursor changes from pointer to text to default as you move it from an element to the next). If there are better ways to solve this problem, I'd love to hear them.

Solution

  • In your example with links, there isn't likely to be an issue for screen readers nowadays. They will be recognized as separate links, and announced as such. Typically a user will hear the "link" role for each one: "Privacy, link. Terms, link."

    In the case of adjacent spans, the outcome varies between different combinations of browser, OS, and screen reader. The spans are run together as a single word, which sometimes leads to unusual pronunciation. I'd advise whitespace between adjacent spans, wherever there would normally be a space between words.

    For example, in a recent Drupal issue, a <button> contained two spans, but no whitespace:

    <button><span>Collapse</span><span>Development</span></button>

    The button's accessible name was computed as "CollapseDevelopment" and some screen readers announced it like "Collaps-ey Development", with an extra syllable. Eventually I discovered that it came down to which voice the screen reader was using (some screen readers can use several text-to-speech engines).

    Historical note: WCAG 1.0 (outdated, use WCAG 2...) advised the following. Note the emphasis "Until".

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

    Nowadays this isn't a issue: the "until" clause was satisfied years ago. Screen readers do treat adjacent links distinctly.