RE: Breadcrumb design pattern

Hi

The <nav> element automatically maps to role=”navigation, no need to explicitly map it.

But we agree, I think, that having a navigation role (i.e. using a <nav> element) is appropriate,, maybe with a precautionary warning not to overuse landmarks in general but explaining why it makes sense here.

 

From: Michiel Bijl [mailto:michiel@agosto.nl] 
Sent: Thursday, July 28, 2016 10:19 AM
To: Schnabel, Stefan <stefan.schnabel@sap.com>
Cc: 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

 

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