Re: 4.13.1 Bread crumb navigation - use of right angle brackets

I like the idea of using aria-label to provide the "You are here"
context if it isn't included in the structure.

I don't agree the > character should be used to separate the links (or
any other type of punctuation), because it's just more gibberish for
screen reader users (I understand some people think "greater than" in
this context has some meaning, but that's some leap of logic).
Realistically, the > is just decoration, so should be provided with
CSS.

The links in the breadcrumb are a collection of links, so should be
marked up as a list to adhere with WCAG 2.0 1.3.1: Info and
relationships [1] (see the following WCAG 2.0 technique for making
information and relationships conveyed through presentation
programmatically determinable: H48: Using ol, ul and dl for lists or
groups of links [2]).

The examples provided should meet WCAG, so I suggest the following
(using an unordered list, but an ordered list would be fine in this
context):

<nav aria-label="You are here">
<ul>
  <li><a href="/">Main</a></li>
  <li><a href="/products/">Products</a></li>
  <li><a href="/products/dishwashers/">Dishwashers</a></li>
  <li>Second hand</li>
</ul>
</nav>

Regards,

Gez


[1] http://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic
[2] http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/H48


On 27 January 2013 08:48, Steve Faulkner <faulkner.steve@gmail.com> wrote:
> Hi Silvia,
>
>>> I found no indication of accessibility users complaining about breadcrumbs.
>> Do you have any indications of such problems?
>
> right thats why I was asking :-)
>
> Upon looking into the issue further what I did find was that providing
>  a label providing context is accessible best practice [1]
>
>
> Suggest the current advice/examples be augmented to include a text cue
> such as "You are here" at the start of the trail.
>
>
> <nav>
>  <p> You are here:
> <a href="/">Main</a> >
> <a href="/products/">Products</a> >
> <a href="/products/dishwashers/">Dishwashers</a> >
> <a>Second hand</a>
> </p>
> </nav>
>
>
> This may be visible (example [2]) or hidden offscreen but available to
> screen reader user (example:[1]) it could also be added using an
> aria-label attribute on the nav element.
>
> <nav aria-label="You are here">
>  <p>
> <a href="/">Main</a> >
> <a href="/products/">Products</a> >
> <a href="/products/dishwashers/">Dishwashers</a> >
> <a>Second hand</a>
> </p>
> </nav>
>
> regards
> SteveF
>
>
> [1] http://webaim.org/articles/siteredesign/#decisions
> [2]  http://juicystudio.com/services.php
>
>
>
> On 26 January 2013 22:26, Silvia Pfeiffer <silviapfeiffer1@gmail.com> wrote:
>> The greater sign is a typical breadcrumb sign used on many sites as a
>> hierarchy indicator, see also
>> http://en.wikipedia.org/wiki/Breadcrumb_%28navigation%29 . Having it
>> announced as "greater" seems appropriate. I found other examples here:
>> http://www.hongkiat.com/blog/breadcrumb-navigation-examined-best-practices-examples/
>> . Most of the time something arrow-like is being used.
>>
>> I found no indication of accessibility users complaining about breadcrumbs.
>> Do you have any indications of such problems? What alternative symbol would
>> you suggest?
>>
>> Regards,
>> Silvia.
>>
>>
>> On Sun, Jan 27, 2013 at 4:00 AM, Steve Faulkner <faulkner.steve@gmail.com>
>> wrote:
>>>
>>> Section 4.13.1 Bread crumb navigation (under Common idioms without
>>> dedicated elements [1])
>>>
>>>  encourages the use of the right angle bracket to indicate a
>>> breadcrumb navigation trail:
>>>
>>> <p>
>>>   <a href="/">Main</a> >
>>>   <a href="/products/">Products</a> >
>>>   <a href="/products/dishwashers/">Dishwashers</a> >
>>>   <a>Second hand</a>
>>>  </p>
>>>
>>> The use of > in this context does not appear to be a good practice to
>>> promote as the angle bracket is a symbol that depending on user agent
>>> (AT in this case) is typically announced as "greater" or not announced
>>> in this context. Either way it is not clearly convyed that its a
>>> breadcrumb trail.
>>>
>>>
>>>  It may be that this is not an issue for users who consume the angle
>>> brackets in this context and the pattern of its use conveys that it is
>>> a breadcrumb trail. If it is a problem I suggest that this example
>>> would need to be revisited to see if we can come up with something
>>> that is more useful to a wider range of users.
>>>
>>> [1]
>>> http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#common-idioms
>>>
>>> --
>>> with regards
>>>
>>> Steve Faulkner
>>>
>>
>



-- 
_____________________________
Supplement your vitamins
http://juicystudio.com
http://twitter.com/gezlemon

Received on Sunday, 27 January 2013 15:28:23 UTC