Re: Breadcrumb design pattern

The ARIA 1.1 definition for the navigation role is:
"
A collection of navigational elements (usually links) for navigating
the document or related documents.
"
The aria-label is used to distinguish this nav element from other nav
elements on the page (such as "user account" or "social media links").
There is no magic to the breadcrumb "widget", i.e. it is not a widget,
just a way to programmatically present a list of navigation links with
a common purpose, just like they are visually presented together
across the top of the page.


On 8/8/16, Richard Schwerdtfeger <richschwer@gmail.com> wrote:
> that is not sufficient. it is NOT a label. This is the thought process that
> caused problems for MSAA. … find a slot and stick it in.
>
> If you want to place it some where it should be in aria-roledescription.
>
> Rich
>
>
>> On Aug 8, 2016, at 2:29 PM, Matt King <a11ythinker@gmail.com> wrote:
>>
>> I feel like role=navigation with aria-label=breadcrumb is adequate.
>>   <>
>> If we go down the path of classifying different types of navigation
>> elements with roles instead of labeling them, we could end up with role
>> explosion, which can make things more difficult for users. However, if we
>> were aware of the need for a set of assistive technology functions unique
>> to breadcrumbs, I would advocate for a breadcrumb role. I do not have any
>> knowledge of a need for assistive tehcnologies to treat breadcrumbs
>> differently from other navigation elements.
>>
>> Matt
>> From: Rich Schwerdtfeger [mailto:richschwer@gmail.com]
>> Sent: Monday, August 8, 2016 11:51 AM
>> To: Michiel Bijl <michiel@agosto.nl>
>> Cc: Stefan Schnabel <stefan.schnabel@sap.com>; 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
>>
>> 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
>>> <mailto: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
>
>


-- 
Birkir Gunnarsson, CPACC
Senior Accessibility Subject Matter Expert | Deque Systems
2121 Cooperative Way, Suite 210
Herndon, VA, 20171

Ph: (919) 607-27 53
Twitter: @birkir_gun

Received on Monday, 8 August 2016 22:38:17 UTC