Re: Breadcrumb design pattern

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> 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] 
> Sent: Donnerstag, 28. Juli 2016 10:32
> To: Jason Kiss <jason@accessibleculture.org>
> Cc: Birkir Gunnarsson <birkir.gunnarsson@deque.com>; Matt King <mck@fb.com>; ARIA Working Group <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> wrote:
>> 
>> Hi,
>> 
>>> On 28/07/2016, at 3:04 PM, Michiel Bijl <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> 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> 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>
>>>>> 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]
>>>>> Sent: Wednesday, July 27, 2016 6:48 PM
>>>>> To: Matt King <mck@fb.com>
>>>>> Cc: ARIA Working Group <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
>> 
>> 
> 
>