RE: Breadcrumb design pattern

Well ,

<nav role=navigation ..

does not harm although redundant but the proposal was for a div container. And folks, I have other examples where only the ARIA roles will bring screen readers to displaying landmarks and *not* their HTML5 counterparts. This is pragmatic coding, not ideal one.

Also, I’m not so sure that the separators MUST be CSS based, there will be zillion variants out in the wild where people will fight to death to get chars in place, but of course CSS is most simple and elegant.

Regarding order, I agree that ol is more straightforward.


-          Stefan

From: Michiel Bijl [mailto:michiel@agosto.nl]
Sent: Donnerstag, 28. Juli 2016 16:19
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