Should angle quotation marks be used as arrows?

Question

Angle quotes (a.k.a. guillemets) are often used as arrows in pagination and such. For example, this image is from a pagination example on Bootstrap's site:

As a native U.S. English speaker, these symbols look to me like nifty arrows and nothing else, but in many countries they serve as quotation marks. Should they be avoided for that reason?

More specifically, I'm interested in whether native speakers of languages which use angle quotes as quotation marks will perceive their use as arrows, like in the above example, as strange or inappropriate to any degree. Therefore I'm particularly interested in responses from speakers of those languages.

Answer 1

Disclaimer: I am not a native speaker of a language which does use guillemets as a way to denote quotes. But I wanted to offer a view on how context can help identify if the content being referenced is a phrase or a case of pagination

---

I believe there are two aspects to it

1. I believe this is one of those cases where users can visualize whether a phrase is being referenced or if the site refers to pagination since the design structure enables users to establish the connection.

Taking your own example of bootstrap

The breaking or seperation of content helps establish the differential relationship of the elements within the section and helps establish that is a method of pagination. However if the design had been

<< 1 2 3 4 5 6 >>

Users could potentially get confused since they dont have any distinctive breakpoints to break the assumption that this is a quote.

It also helps that multiple pagination designs follow a similar format helping users establish the connection easily.

Reference : All of these images were referenced from this Smashing magazine article

2. The positioning : The second aspect which would help users establish the connection is the positioning of the pagination design pattern. Pagination elements are generally positioned at the bottom (with some exceptions being at the top as well) and hence users, as they scan the page will be able to relate to it as a pagination element rather than a phrase since its positioned right at the bottom.

Here are examples from Google, Bing and Amazon with regards to how users would make the association

Google

Bing

Amazon

Also taking the above examples, the content type above would also help users make the connection as pagination is generally used to show list views of content.

---

30 seconds research

While I would really like to see someone who speaks russian or French to answer this question, I did a quick research to see how french ,Norwegian, Russian sites handle pagination since these two languages (along with numerous others use guillemets)

A french site

Yandex (Russian search site)

Norway

The key theme I could find in this quick research is that while guillemets are not used in the full sense, (refer to the french site example), most pagination methods seem to go to the safer route of just avoiding using chevrons or guillemets and using color and highlights to draw user focus. However this said, this is just a preliminary research and would need to be dug in deeper.

Answer 2

A non-blind user will usually already be familiar with that symbolic usage of « and », and also pairs ‹/›, </>, <</>>. Color, size, padding and border can improve the recognizability – your sample image shows the latter two used successfully. Localized text at the open/tall side of the symbols helps even more. If they appeared inside a text run, however, that may lead to problems.

When, several years ago, the Opera browser introduced a navigation aid that discovered “next” links in an HTML document automatically and made them available for the forward function (button and keyboard shortcut), it supported most of the symbolic patterns mentioned above and also knew keywords from several languages that it found in link texts and targets, of course HTML semantics rel=next were supported as well. Similar add-ons are available for other browsers, too. I assume screen readers have similar logic built into them.

As for textual alternatives, the ISO standard arrow symbols for page up and down keys are U+21DE ⇞ and U+21DF ⇟ respectively. Rotated variants are also available in Unicode, U+21FA ⇺ and U+21FB ⇻. Those are unfamiliar to almost everyone, though, and inappropriate since they belong on keytops. You can also find more intuitive symbols for previous and next page, U+2397 ⎗ U+2398 ⎘. These are intended for paged media, though, and not for paginated content where only n items are represented on each page. In media playback, the standard skip backward/forward symbols U+23EE ⏮ and U+23ED ⏭ are similar to horizontal tabulators U+21E4 ⇤ and U+21E5 ⇥ (but quite newly encoded and hardly supported), whereas U+23EA ⏪ and U+23E9 ⏩ (can) mean fast backward/forward. Refrain from using APL symbols like U+2347 ⍇ and U+2348 ⍈ or U+2350 ⍐ and U+2357 ⍗. There are even more Unicode characters with “right-pointing” in their names, but none seems semantically perfect for the job.

However, I always thought that it would be nice to incorporate the next-page symbol into the lower right corner of the paginated content, e.g. <article> in HTML5, as kind of a dog-ear. This is less relevant today, because more content is often dynamically auto-loaded when the view reaches the bottom.

Answer 3

In my experience in French, a language that makes common use of guillemets, you would have no confusion using « and » as previous and next page links respectively, and giving the arrows affordance (such as boxing them in the same way as the page numbers, as the examples Mark Nugent provides) would absolutely ensure it.

Your biggest challenge, as others have alluded to, is the semantic meaning of the text. This is especially important for those visually impaired users who won't see the guillemets themselves or the direction they point.

For that, I would recommend providing a rel value to identify the type of link, and a aria-label value to tell screen readers what to say.

Example:

<a href="?p=2" rel="next" aria-label="Next page">&raquo;</a>

Answer 4

I would interpret the two arrows as "Advance/Recede 5 pages.", as it is the number of pages you have in that bar.

So, no you should not.

How I see the buttons meaning:

^{download bmml source – Wireframes created with Balsamiq Mockups}

|< ... >| First ... Last page

<< ... >> Recede ... Advance 5 pages

< ... > Previous ... Next page

Note I used two lesser/greater than symbols instead of guillemots because they are more universal.