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> 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
>>> 
>>> 
>> 
>> 
>