14

Is it bad practice to use the HTML entities of the guillemets « («) and » (») on links?

Originally they're used in many languages like French and Spanish to indicate quotes. Is it a bad idea to use these for a totally different thing, like so?

  « previous   next »

Whats with screenreaders?

Any other important thoughts?

Improve this question
1
  • To answer your specific question: screen readers (at least VoiceOver on OS X/iOS) ignore the guillemets entirely when reading the page (your example is read out as "previous, next"). The characters proposed by lobelia (← and →) are read out as "left arrow" and "right arrow" respectively.
    – Kit Grose
    Apr 27, 2014 at 5:59

4 Answers 4

Reset to default
6

Back in the day these were quite common so perhaps has become a form of an anti-pattern.

But you are correct, these are actually punctuation characters...not visual arrows. So it is awkward to have them read out-loud in a screen reader (or view them if you are French).

Today, I'd argue, we can do much better with CSS. Create the arrow icon as you see fit and then use it as a background image inside the link. That takes care of accessibility issues, plus gives you the flexibility to make it visually as you see fit.

Improve this answer
12

It's semantically incorrect, and I'm not sure of all the ramifications of that incorrectness, but I recommend using more semantically appropriate characters like
right arrow → (→) and left arrow ← (←). I think most screen readers, if they audiblize them, would use the character names ("right arrow" and "left arrow"), and this is probably better than audiblizing "left double angle bracket".

Of course you could use background images that look however you like and are invisible to screen readers, but there's nothing wrong with using characters, and the characters give you better performance (lighter payload) than images.

Improve this answer
2
  • 2
    Re "there's nothing wrong with using characters": I'd argue that as a screen reader user reading "left arrow previous" and "right arrow next" would be much worse than a background image.
    – Kit Grose
    Apr 28, 2014 at 1:33
  • @KitGrose - You might have a point there.
    – obelia
    Apr 28, 2014 at 1:39
1

If you want the better performance of using characters over graphics, but also want something that is truly an icon, you could take a look at font awesome. These are scalable, and won't trip up any screen readers.

Improve this answer
2
  • 2
    I'm using icomoon.io in a project, which allows to use your own vectors which are converted to fonts.
    – Sascha
    Apr 28, 2014 at 7:18
  • @voodoocode That sounds interesting, as I do like making my own icons. Thanks!
    – Franchesca
    Apr 28, 2014 at 7:23
1

Maybe the style should be in <style /> ?

CSS:

.prev:before { content: "« "; }
.next:after { content: " »"; }

HTML:

<a class="prev" href="prev.html">previous</a>
<a class="next" href="next.html">next</a>

Result would be something like:

« previous   next »
Improve this answer
2
  • How do the screen readers apply information in pseudo-elements?
    – Mayo
    Apr 9, 2015 at 17:27
  • I believe they are described out loud by most screen readers, so care should be taken for accessibility. You should use role="presentation", but that's a HTML5 tag attribute, not something created out of CSS.
    – vahanpwns
    Apr 16, 2015 at 15:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.