RE: Breadcrumb design pattern

+1 Birkir. The label is definitely appropriate.

-----Original Message-----
From: Birkir Gunnarsson [mailto:birkir.gunnarsson@deque.com] 
Sent: Monday, August 8, 2016 3:38 PM
To: Richard Schwerdtfeger <richschwer@gmail.com>
Cc: Matt King <a11ythinker@gmail.com>; ARIA Working Group <public-aria@w3.org>
Subject: Re: Breadcrumb design pattern

The ARIA 1.1 definition for the navigation role is:
"
A collection of navigational elements (usually links) for navigating the document or related documents.
"
The aria-label is used to distinguish this nav element from other nav elements on the page (such as "user account" or "social media links").
There is no magic to the breadcrumb "widget", i.e. it is not a widget, just a way to programmatically present a list of navigation links with a common purpose, just like they are visually presented together across the top of the page.


On 8/8/16, Richard Schwerdtfeger <richschwer@gmail.com> wrote:
> that is not sufficient. it is NOT a label. This is the thought process 
> that caused problems for MSAA. … find a slot and stick it in.
>
> If you want to place it some where it should be in aria-roledescription.
>
> Rich
>
>
>> On Aug 8, 2016, at 2:29 PM, Matt King <a11ythinker@gmail.com> wrote:
>>
>> I feel like role=navigation with aria-label=breadcrumb is adequate.
>>   <>
>> If we go down the path of classifying different types of navigation 
>> elements with roles instead of labeling them, we could end up with 
>> role explosion, which can make things more difficult for users. 
>> However, if we were aware of the need for a set of assistive 
>> technology functions unique to breadcrumbs, I would advocate for a 
>> breadcrumb role. I do not have any knowledge of a need for assistive 
>> tehcnologies to treat breadcrumbs differently from other navigation elements.
>>
>> Matt
>> From: Rich Schwerdtfeger [mailto:richschwer@gmail.com]
>> Sent: Monday, August 8, 2016 11:51 AM
>> To: Michiel Bijl <michiel@agosto.nl>
>> Cc: Stefan Schnabel <stefan.schnabel@sap.com>; Jason Kiss 
>> <jason@accessibleculture.org>; Birkir Gunnarsson 
>> <birkir.gunnarsson@deque.com>; Matt King <mck@fb.com>; ARIA Working 
>> Group <public-aria@w3.org>
>> Subject: Re: Breadcrumb design pattern
>>
>> Placing roles in a label is hack and it becomes very brittle over 
>> time. If you want a breadcrumb role you should add one to ARIA 2.0. 
>> It should require things like aria-current. Also, having a range 
>> experience or posinset and set size to determine where you are in the list is important.
>>
>>
>> Rich
>>
>> Rich Schwerdtfeger
>>
>>
>>
>>
>>> On Jul 28, 2016, at 9:19 AM, Michiel Bijl <michiel@agosto.nl 
>>> <mailto:michiel@agosto.nl>> wrote:
>>>
>>> Not sure I follow, why should it have a role role of navigation? 
>>> It's already a nav element. An aria-label of breadcrumbs should do 
>>> fine. Of course, “breadcrumb trail” could work too, but I would 
>>> prefer to keep it as simple as possible.
>>>
>>> The reason it's an ordered list is stated in the specification. The 
>>> code example shows a separator graphic which is added through CSS, 
>>> this is preferred over an actual image in the code.
>>>
>>> —Michiel
>>>
>>>> On 28 Jul 2016, at 10:37, Schnabel, Stefan <stefan.schnabel@sap.com 
>>>> <mailto:stefan.schnabel@sap.com>> wrote:
>>>>
>>>> Container should have role=”navigation” and aria-label=”Breadcrumb 
>>>> Trail”
>>>>
>>>> The structure should be an unordered list containing anchors and 
>>>> separators inside list items:
>>>>
>>>> ul -> li -> a + separator
>>>>
>>>> Separator (“>”)
>>>> -  if char, do nothing
>>>> -  if img, provide alt text in addition
>>>> -  put separator item at the end of the <li> role
>>>>
>>>> Regards
>>>> Stefan
>>>>
>>>>
>>>> -----Original Message-----
>>>> From: Michiel Bijl [mailto:michiel@agosto.nl 
>>>> <mailto:michiel@agosto.nl>]
>>>>
>>>> Sent: Donnerstag, 28. Juli 2016 10:32
>>>> To: Jason Kiss <jason@accessibleculture.org 
>>>> <mailto:jason@accessibleculture.org>>
>>>> Cc: Birkir Gunnarsson <birkir.gunnarsson@deque.com 
>>>> <mailto:birkir.gunnarsson@deque.com>>; Matt King <mck@fb.com 
>>>> <mailto:mck@fb.com>>; ARIA Working Group <public-aria@w3.org 
>>>> <mailto:public-aria@w3.org>>
>>>> Subject: Re: Breadcrumb design pattern
>>>>
>>>> Thank you, that all makes sense. I'll add a line and make the thing 
>>>> plural :)
>>>>
>>>> —Michiel
>>>>
>>>>
>>>>> On 28 Jul 2016, at 04:31, Jason Kiss <jason@accessibleculture.org 
>>>>> <mailto:jason@accessibleculture.org>> wrote:
>>>>>
>>>>> Hi,
>>>>>
>>>>>
>>>>>> On 28/07/2016, at 3:04 PM, Michiel Bijl <michiel@agosto.nl 
>>>>>> <mailto:michiel@agosto.nl>> wrote:
>>>>>>
>>>>>> That is good advice Jason. Would it be enough to link to the 
>>>>>> navigation role/nav element warning about this?
>>>>>
>>>>> A very short sentence noting that navigation role/nav element 
>>>>> might not always be required, with a link to the warning would be fine, I think.
>>>>>
>>>>>
>>>>>>
>>>>>> It makes sense to me to make it navigation as that's its purpose.
>>>>>
>>>>> Every group of links has navigation as its purpose, but not every 
>>>>> group of links needs to be a <nav> or navigation landmark, no?
>>>>>
>>>>>
>>>>>
>>>>>> I'd argue that a breadcrumb is more important than cruft in a fat 
>>>>>> footer.
>>>>>
>>>>> It’s going to depend on context, isn’t it?
>>>>>
>>>>>
>>>>>>
>>>>>> That said, if not a nav, what then?
>>>>>
>>>>> I wish there were a document structure role like “region” that 
>>>>> wasn’t also a landmark, wasn’t included in a page summary or ToC, 
>>>>> but that took a nice aria-label. Is that role=“group”? What about 
>>>>> <div role=“group” aria-label=“Breadcrumbs”>? (By the way, in your 
>>>>> example, shouldn’t it be Breadcrumbs, plural? It’s a collection of 
>>>>> crumbs, right? How far do you get on just one crumb? ;)
>>>>>
>>>>> Otherwise, and I’m not suggesting this, but the web did at one 
>>>>> point do DIVs with visually hidden headings….
>>>>>
>>>>> Another pattern I’ve seen is to have the Breadcrumbs included in 
>>>>> the <nav> element that also contains the main navigation menu, so 
>>>>> you only have one navigation landmark with two sections in it, but 
>>>>> now that’s getting more complicated on a few fronts.
>>>>>
>>>>> Ultimately, my comment was largely spurred on by what I see as 
>>>>> rampant overuse of landmarks, which defeats their usefulness in my 
>>>>> opinion, and nothing personal against Breadcrumbs as navigation landmarks per se.
>>>>>
>>>>> Jason
>>>>>
>>>>>
>>>>>>
>>>>>> —Michiel
>>>>>>
>>>>>>
>>>>>>> On 28 Jul 2016, at 03:15, Jason Kiss 
>>>>>>> <jason@accessibleculture.org <mailto:jason@accessibleculture.org>> wrote:
>>>>>>>
>>>>>>> Is it always appropriate for breadcrumbs to be a navigation 
>>>>>>> landmark?
>>>>>>> Might it not depend on the site/page and the other navigational 
>>>>>>> sections it contains? I'd say it's a judgment call for the 
>>>>>>> author whether the breadcrumbs represent a section of "major 
>>>>>>> navigation blocks". Yes, that is a note from the definition of 
>>>>>>> <nav>, but given that <nav> maps to a navigation landmark, 
>>>>>>> there's a certain equivalence. It's how I decide whether or not 
>>>>>>> a navigation block deserves the <nav> element: Is it so major a 
>>>>>>> navigation block that it deserves to be a landmark? I think that 
>>>>>>> landmarks tend to get overused and thus lose their 
>>>>>>> effectiveness: how useful is a landmark in a sea of landmarks?
>>>>>>>
>>>>>>> I often recommend against breadcrumbs being a navigation 
>>>>>>> landmark if there are a number of other navigational landmarks, 
>>>>>>> e.g. main menu, section menu, fat footer menu with more than the 
>>>>>>> typical links to copyright, privacy, etc., and especially if 
>>>>>>> these exist among a whole bunch of other landmarks.
>>>>>>>
>>>>>>> Maybe it's worth noting something along these lines in the 
>>>>>>> authoring practice?
>>>>>>>
>>>>>>> Jason
>>>>>>>
>>>>>>>
>>>>>>>> On Thu, Jul 28, 2016 at 12:10 PM, Michiel Bijl 
>>>>>>>> <michiel@agosto.nl <mailto:michiel@agosto.nl>> wrote:
>>>>>>>> Oh right, well, the agenda for the week after that works too :)
>>>>>>>>
>>>>>>>> The markup you suggest is what is in the code example. As for a 
>>>>>>>> separate landmark region, you mean a new role of breadcrumb?
>>>>>>>>
>>>>>>>> —Michiel
>>>>>>>>
>>>>>>>> On 28 Jul 2016, at 00:27, Birkir Gunnarsson 
>>>>>>>> <birkir.gunnarsson@deque.com 
>>>>>>>> <mailto:birkir.gunnarsson@deque.com>>
>>>>>>>> wrote:
>>>>>>>>
>>>>>>>> Hi
>>>>>>>>
>>>>>>>> We are not having a meeting until the 8th, right?
>>>>>>>> I would like to suggest that the breadcrumb be exposed as an 
>>>>>>>> ordered list inside a labeled navigation landmark.
>>>>>>>> <div role=”navigation” aria-label=”breadcrumb”> <ol> <li><a 
>>>>>>>> href=”/”>Main page</a></li> <li><a 
>>>>>>>> href=”/categorypage”>Category page</a></li> <li><a 
>>>>>>>> href=”/categorypage/subpage” aria-current=”page”>Current 
>>>>>>>> subpage</a></li> </ol> </div>
>>>>>>>>
>>>>>>>> I think a separate landmark region is appropriate for this, of 
>>>>>>>> course it is just one man’s opinion.
>>>>>>>>
>>>>>>>>
>>>>>>>> From: Michiel Bijl [mailto:michiel@agosto.nl 
>>>>>>>> <mailto:michiel@agosto.nl>]
>>>>>>>> Sent: Wednesday, July 27, 2016 6:48 PM
>>>>>>>> To: Matt King <mck@fb.com <mailto:mck@fb.com>>
>>>>>>>> Cc: ARIA Working Group <public-aria@w3.org 
>>>>>>>> <mailto:public-aria@w3.org>>
>>>>>>>> Subject: APG: Breadcrumb design pattern
>>>>>>>>
>>>>>>>> Hi Matt,
>>>>>>>>
>>>>>>>> During today's London Accessibility Meetup I've pushed the 
>>>>>>>> breadcrumb design pattern to the Editor's Draft after a short 
>>>>>>>> review with the crowd.
>>>>>>>> Can we
>>>>>>>> add this to next week's agenda please? It includes a short 
>>>>>>>> description and code example all ready to go.
>>>>>>>>
>>>>>>>> —Michiel
>
>


--
Birkir Gunnarsson, CPACC
Senior Accessibility Subject Matter Expert | Deque Systems
2121 Cooperative Way, Suite 210
Herndon, VA, 20171

Ph: (919) 607-27 53
Twitter: @birkir_gun

Received on Friday, 12 August 2016 03:18:11 UTC