W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > July to September 2012

RE: Recursive Links in menu bars [SEC=UNOFFICIAL]

From: ANDERSEN, Leon <Leon.Andersen@fahcsia.gov.au>
Date: Mon, 17 Sep 2012 00:20:05 +0000
To: 'Jan Eric Hellbusch' <hellbusch@2bweb.de>, "w3c-wai-ig@w3.org" <w3c-wai-ig@w3.org>
Message-ID: <F52216DBF187D842887AC0F4BD83EFCB3A32D4BE@PRMSGEXC001.production.local>
Hi Jan,

In the past it has been considered best practice to remove the link to save users from clicking again. There should also be some visual and textual indicator that the link is 'current', especially if the link cannot be removed due to authoring tool restrictions.

I prefer your first option, assuming that the 'current page' information is hidden off screen via CSS, as I'm not convinced whether the use of <strong> is correct semantically speaking. Plus, if a bold effect on the link is the aim then this is easily achievable with CSS. If it's for the benefit of screen reader users, from what I understand even though it is intended the speech output has some audible emphasis on the word, they don't. Also with regard to adding a 'title' to convey the message, this again from my understanding will not be read by screen readers and is not available to keyboard only users. And while aria-selected="true" exists I don't think it is appropriate for use in this type of situation.

So considering all of the above, and if the link can't be removed, maybe this could work:

<ul id="nav">
<li><a href="#">page 1</a></li>
<li class="current"><a href="#" title="current page"><span class="sr">Current page: </span>Page 2</a></li> ...
</ul>

One downside of this is screen readers that do announce 'title' will get the message twice.

Leon

-----Original Message-----
From: Jan Eric Hellbusch [mailto:hellbusch@2bweb.de] 
Sent: Monday, 17 September 2012 1:15 AM
To: w3c-wai-ig@w3.org
Subject: Recursive Links in menu bars

Hi all,

recently I had a discussion with somebody about recursive links in menu bars. We were talking about static pages and identifying the current item in the menu bar. At the simplest level we are talking about the following
alternatives: 

<ul id="nav">
<li><a href="#">page 1</a></li>
<li><a href="#"><span class="sr">Current page: </span>Page 2</a></li> ...
</ul>

Or

<ul id="nav">
<li><a href="#">Page 1</a></li>
<li><strong><span class="sr">Current page: </span>Page 2</strong></li> ...
</ul>

Considerations:

* Visual ques are expressed in CSS. The currently displayed item in the menu bar is visually highlighted with standard color settings and in contrast mode.
* It is unclear whether the current item should be a link or not.

There is now success criterion in WCAG 2.0 to clarify the question, but in the best practice technique http://www.w3.org/TR/WCAG20-TECHS/G128.html
the third example presents a possibility.

I would be interested to know how others go about the matter. Should menu items that refer to the current page be linked or not? Are there pros or cons with respect to accessibility or usability (in general), or are there other (e.g. technical) reasons?

Regards,
Jan

--
Jan Eric Hellbusch
Tel.: +49 (231) 86436760 oder +49 (163) 3369925
Web: http://2bweb.de     Twitter: www.twitter.com/2bweb
--
Das Buch über barrierefreies Webdesign:
"Barrierefreiheit verstehen und umsetzen - Webstandards für ein zugängliches und nutzbares Internet"
812 Seiten, Dpunkt Verlag (2011)
http://www.barrierefreies-webdesign.de/dpunkt/
Received on Monday, 17 September 2012 00:20:42 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 5 February 2014 07:13:30 UTC