RE: Breadcrumb design pattern

Totally agree that breadcrumbs are an important navigation feature when they are available. I have always advocated using the navigation role with a lable of breadcrumbs. If there are too many landmark regions on a page, one that I would work to keep is breadcrumb nav; in practice, it is that useful. A primary driver of that utility is the value of the breadcrumb trail as an orientation aid. The breadcrumb trail is a concise and powerful way of helping a user understand the context of a page.

On the topic of ordered list verses unordered list, there is no difference between them for screen reader users if the CSS includes a list-type value of none as the example does. Primarily for this reason, I prefer unordered list simply because it feels like cleaner code. But, I will admit that is a rather arbitrary and somewhat meaningless feeling.

One thing I can say for sure is that I would not want the list to be polluted with numbers.

Another option for people who want to flatten the tab sequence would be to present the trail in a grid. 

Matt

-----Original Message-----
From: Birkir Gunnarsson [mailto:birkir.gunnarsson@deque.com] 
Sent: Thursday, July 28, 2016 5:25 AM
To: 'Schnabel, Stefan' <stefan.schnabel@sap.com>; 'Michiel Bijl' <michiel@agosto.nl>; 'Jason Kiss' <jason@accessibleculture.org>
Cc: 'Matt King' <mck@fb.com>; 'ARIA Working Group' <public-aria@w3.org>
Subject: RE: Breadcrumb design pattern

I totally agree with Jason's concerns that landmarks are overused.
Where I see values in landmarks is to designate areas of the page that have a clear and consistent role that is not obvious from contents or context alone, and that are consistent across pages within a website.
One of the few things I have recommended the navigation role for is breadcrumbs, because they usually meet both criteria.
Also aria labeling works fairly well on landmarks but results when applied to lists is still spotty (I know we shouldn't let a.t. support dictate our recommendations, but at the end of the day we are trying to improve the accessibility for end users today and tomorrow).
 I prefer Stefan's suggestion of unordered lists rather than ordered lists, but I don't have a very strong preference either way.
-----Original Message-----
From: Schnabel, Stefan [mailto:stefan.schnabel@sap.com]
Sent: Thursday, July 28, 2016 5:37 AM
To: Michiel Bijl <michiel@agosto.nl>; 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

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

Received on Sunday, 7 August 2016 01:31:23 UTC