W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > October to December 2017

Re: [breadcrumbs] best practice

From: Harry Loots <harry.loots@ieee.org>
Date: Tue, 21 Nov 2017 10:13:12 +0100
Message-ID: <CA++-QFdk62h49vmZgLSkct=1vz5aTWXT+v-t3b6CmjyH-k0rrQ@mail.gmail.com>
To: Michiel Bijl <michiel.list@moiety.me>
Cc: Phill Jenkins <pjenkins@us.ibm.com>, Matt King <a11ythinker@gmail.com>, "Fathauer, Laura" <fathauer@ohio.edu>, "Patrick H. Lauke" <redux@splintered.co.uk>, W3C WAI ig <w3c-wai-ig@w3.org>
> re:  WebAIM’s 2014 screenreader survey[1]

Thanks Michiel , That's useful. I would however venture a guess that the
respondents may have been text-to-speech technology users (the rest of us
would not know, unless we examined the source code, that the HTML was an
ordered/unordered/nested list, etc.). (Somewhat interestingly, in the late
90s I was designing/building a website for a UK Local Gov agency. Back then
there was still a strong emphasis on text-only browsers, as some of you
will remember, and I tested the site with a group of lynx users - who had a
definite preference for nested lists for both navigation elements as well
as breadcrumbs, as the nested list showed, visually, the hierarchy.)

The point that I would like to get to is to have an *inclusive *design
pattern, that works for all. ARIA is useful to AT users, but meaningless to
sighted users, where visual patterns are far more beneficial.

And, since the comment was made that my 'user research' of fifteen years
ago was past it's sell-by-date (smile), I've had a look around at what
'research' was available and how various websites were using breadcrumbs
(e.g., google, amazon, banking websites, gov websites, etc).

What I did find is that

   1. Most articles on the subject appears to have borrowed heavily from an
   NN 2007 study;
   2. Breadcrumbs on the websites of large banks, google, etc all appear to
   lean towards the follow similar pattern:  *Homepage* > *Current section*
   > Current page* (* not linked; and omitted by some).

While these patterns are similar to how I had designed this feature, I'd
suggest that insufficient conclusive evidence exists to influence common
inclusive design patterns.

I would be happy to help write user research briefs, if someone had the
capacity / audience to do user research to help inform common inclusive
design patterns.

Take care

On 21 November 2017 at 09:08, Michiel Bijl <michiel.list@moiety.me> wrote:

> Phill,
> While this doesn’t directly refute your findings, WebAIM’s 2014
> screenreader survey[1] has a section on breadcrumbs where users were asked
> about their preferred markup for breadcrumbs. This at least shows users are
> fairly familiar with the pattern. The high number of people that didn’t
> have a preference is telling though (as noted in the survey).
> FWIW: the APG notes that the linked current page is optional. Meaning you
> can have it as plain text. In that case aria-current is optional.
> It would certainly be a good thing to do new user research on this. Do you
> have any tips on how to go about this?
> 1. https://webaim.org/projects/screenreadersurvey5/#breadcrumb
> — Michiel
> On 20 Nov 2017, at 20:22, Phill Jenkins <pjenkins@us.ibm.com> wrote:
> some of us are not questioning the creation of the *aria-current*
> attribute, as specified at https://www.w3.org/TR/wai-
> aria-1.1/#aria-current
> but I believe the question is if there is enough data (current) that
> refutes or confirms earlier studies that showed confusion when making the
> "current page" an active link in a "bread-crumb" trail.
> I believe there are clearly other use cases that justify the need and
> utility of the*aria-current* attribute, but I'm questioning the use with
> bread-crumb specifically.
> . . .  The aria-current attribute is used when an element within a set of
> related elements is visually styled to indicate it is the current item in
> the set. For example:
>    - A page token used to indicate a link within a set of pagination
>    links, where the link is visually styled to represent the
>    currently-displayed page.
>    - A step token used to indicate a link within a step indicator for a
>    step-based process, where the link is visually styled to represent the
>    current step.
>    - A location token used to indicate the image that is visually
>    highlighted as the current component of a flow chart.
>    - A date token used to indicate the current date within a calendar.
>    - A time token used to indicate the current time within a timetable.
>    Authors *SHOULD* only mark one element in a set of elements as current
>    with aria-current.
>    Authors *SHOULD NOT* use . . .
>    There isn't a "bread-crumb" attribute or widget, correct? Other than
>    using a nav-element with an aria-label of “breadcrumb”.
>    So the author would have to give a clue that the set of link elements
>    are quote bread-crumbs unquote via the *aria-label or title attribute*,
>    otherwise the burden of learning the pattern will rely on the user to be
>    able to recognize that it is in fact a "bread-crumb" navigation set of
>    hierarchal links.  I believe there is also a "burden" or "responsibility"
>    on the user agent / assistive technology (if any).  So, even if this all
>    "works" and is "specified", I would recommend some "end-user
>    testing/studies" to develop and document the best practice.  We need
>    something that refutes or confirms earlier studies
>    __________
>    Regards,
>    Phill Jenkins
>    pjenkins@us.ibm.com
>    Senior Engineer & Accessibility Executive
>    IBM Research Accessibility
>    linkedin.com/in/philljenkins/
>    <https://www.linkedin.com/in/philljenkins/>
>    ibm.com/able <http://www.ibm.com/able>
>    facebook.com/IBMAccessibility
>    <http://www.facebook.com/IBMAccessibility>
>    <http://ageandability.com/>twitter.com/IBMAccess
>    ageandability.com
> From:        Michiel Bijl <michiel.list@moiety.me>
> To:        Harry Loots <harry.loots@ieee.org>
> Cc:        "Fathauer, Laura" <fathauer@ohio.edu>, Phill Jenkins <
> pjenkins@us.ibm.com>, Matt King <a11ythinker@gmail.com>, W3C WAI ig <
> w3c-wai-ig@w3.org>, "Patrick H. Lauke" <redux@splintered.co.uk>
> Date:        11/20/2017 10:34 AM
> Subject:        Re: [breadcrumbs] best practice
> ------------------------------
> ARIA 1.1 introduced aria-current: *https://www.w3.org/TR/wai-aria-1.1/*
> <https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2D1.1_&d=DwMFaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=aWgRqmoh0Xuzjf7UaXq44Tf6K41u809DPE44ioVTOvk&m=ub-ddeC6nrau1KGgW2ij-KfJ07OloXIcCcuSl12kihU&s=l2BtBiQ2R-TdE0FG6XHARvPVokjqHDddZdV1hcfIM2g&e=>
> Its use is demonstrated in the APG pattern Matt linked to.
> — Michiel
> On 20 Nov 2017, at 17:08, Harry Loots <*harry.loots@ieee.org*
> <harry.loots@ieee.org>> wrote:
> The issue is not about whether users have gained the ability to recognise
> breadcrumb navigation, but about providing a link that does nothing (i.e.,
> creating a redundancy).
> And, what's more important is whether this causes a nuisance to AT users?
> Will it mean they have to listen to the name of the page twice - once from
> the breadcrumb, and another time from the heading?
> How will users tabbing through the page hear "current page"?
> Many thanks
> Harry
> On 20 November 2017 at 15:45, Fathauer, Laura <*fathauer@ohio.edu*
> <fathauer@ohio.edu>> wrote:
> My rationale is that users tabbing through the page will be able to land
> on that link and hear “current page” and therefore be able to know that the
> breadcrumb hierarchy of links ends with that link and where that page sits.
> If your usability tests were around 15  years ago, I would posit that in
> general people may have advanced in with their ability to recognize
> breadcrumb navigation.
> Laura
> *From:* *harry.loots@googlemail.com* <harry.loots@googlemail.com>[mailto:
> *harry.loots@googlemail.com* <harry.loots@googlemail.com>] *On Behalf Of *Harry
> Loots
> *Sent:* Monday, November 20, 2017 2:36 AM
> *To:* Phill Jenkins <*pjenkins@us.ibm.com* <pjenkins@us.ibm.com>>
> *Cc:* Matt King <*a11ythinker@gmail.com* <a11ythinker@gmail.com>>; W3C
> WAI ig <*w3c-wai-ig@w3.org* <w3c-wai-ig@w3.org>>; Patrick H. Lauke <
> *redux@splintered.co.uk* <redux@splintered.co.uk>>
> *Subject:* Re: [breadcrumbs] best practice
> In my experience making the current active page a linked item in the
> breadcrumbs lead to potential confusion for all users. I observed users (in
> usability tests), clicking on this link - expecting to go to a previous
> page - and then ending on the same page (probably around early 2000s), and
> have ever since avoided 1) placing the current page name as a member of the
> breadcrumb, and 2) would most definitely not make it an active link.
> Thanks all for the comments - it appears as if we could do with some
> research in this area...
> Kindest regards
> Harry
> On 18 November 2017 at 01:36, Phill Jenkins <*pjenkins@us.ibm.com*
> <pjenkins@us.ibm.com>> wrote:
> Why is it a best practice to make the current page an active link to the
> same page - isn't an active visible link distracting or at least confusing
> to users with cognitive disabilities?
>        snip of code from pattern:
>        . . .
>        <li>
>        <a href="./index.html"aria-current="page">
>          Breadcrumb Example
>        </a>
> ___________
> Regards,
> Phill Jenkins
> From:        Matt King <*a11ythinker@gmail.com* <a11ythinker@gmail.com>>
> To:        "'Patrick H. Lauke'" <*redux@splintered.co.uk*
> <redux@splintered.co.uk>>, <*w3c-wai-ig@w3.org* <w3c-wai-ig@w3.org>>
> Date:        11/17/2017 03:38 PM
> Subject:        RE: [breadcrumbs] best practice
> ------------------------------
> BTW, we have a breadcrumb pattern in the ARIA Authoring Practicess:
> *https://urldefense.proofpoint.com/v2/url?u=http-3A__w3c.github.io_aria-2Dpractices_-23breadcrumb&d=DwIFaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=aWgRqmoh0Xuzjf7UaXq44Tf6K41u809DPE44ioVTOvk&m=EaHSkTPXnr7dz7IhuHLdmQGRwCs_U25W6xuCtcpx4xw&s=e5C8yTeHLQIvfyj7gYB1HCJtEUe9xxudgWp1JsAYXeo&e=*
> <https://urldefense.proofpoint.com/v2/url?u=http-3A__w3c.github.io_aria-2Dpractices_-23breadcrumb&d=DwIFaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=aWgRqmoh0Xuzjf7UaXq44Tf6K41u809DPE44ioVTOvk&m=EaHSkTPXnr7dz7IhuHLdmQGRwCs_U25W6xuCtcpx4xw&s=e5C8yTeHLQIvfyj7gYB1HCJtEUe9xxudgWp1JsAYXeo&e=>
> Matt King
> -----Original Message-----
> From: Patrick H. Lauke [*mailto:redux@splintered.co.uk*
> <redux@splintered.co.uk>]
> Sent: Friday, November 17, 2017 2:09 AM
> To: *w3c-wai-ig@w3.org* <w3c-wai-ig@w3.org>
> Subject: Re: [breadcrumbs] best practice
> On 17/11/2017 09:43, Harry Loots wrote:
> > Hi all
> > what is the current thinking on breadcrumbs.
> >
> > I have a situation where a client want to display the page name in the
> > breadcrumb, then repeat the page name immediately afterwards as a
> > heading, which I know can be a nuisance for text-to-speech users.
> I'd say across all the things that can be problematic/nuisance on web
> pages, that's a pretty minor thing. I'd further argue that even if the text
> is repeated, it does serve two separate purposes: in the breadcrumb
> navigation, to indicate this is the current page; as a heading, to, well,
> act as heading for the actual page's content.
> In short, don't think it's an actual problem.
> > Are their any firm rules on breadcrumbs, or strong views for that
> > matter :)
> No firm rules, as with most things in accessibility *grin*
> And as is often the case, it'll depend on the specific situation (i.e.
> how is the breadcrumb actually marked up? how long are these page titles
> - a few words, or as long as a whole sentence - etc).
> P
> --
> Patrick H. Lauke
> *www.splintered.co.uk*
> <https://urldefense.proofpoint.com/v2/url?u=http-3A__www.splintered.co.uk&d=DwMFaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=aWgRqmoh0Xuzjf7UaXq44Tf6K41u809DPE44ioVTOvk&m=ub-ddeC6nrau1KGgW2ij-KfJ07OloXIcCcuSl12kihU&s=0iSCuOEgM-Mpq4ZREVDh0x-20B5M9nLUXBGLejCt2os&e=>|
> *https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_patrickhlauke&d=DwIFaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=aWgRqmoh0Xuzjf7UaXq44Tf6K41u809DPE44ioVTOvk&m=EaHSkTPXnr7dz7IhuHLdmQGRwCs_U25W6xuCtcpx4xw&s=J975Gwb3-Ry2o92iqMAP_PFQbnC6dMa3J0OrDfrDMig&e=*
> <https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_patrickhlauke&d=DwIFaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=aWgRqmoh0Xuzjf7UaXq44Tf6K41u809DPE44ioVTOvk&m=EaHSkTPXnr7dz7IhuHLdmQGRwCs_U25W6xuCtcpx4xw&s=J975Gwb3-Ry2o92iqMAP_PFQbnC6dMa3J0OrDfrDMig&e=>
> *https://urldefense.proofpoint.com/v2/url?u=http-3A__flickr.com_photos_redux_&d=DwIFaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=aWgRqmoh0Xuzjf7UaXq44Tf6K41u809DPE44ioVTOvk&m=EaHSkTPXnr7dz7IhuHLdmQGRwCs_U25W6xuCtcpx4xw&s=E-yGcPVgZ3j5HsanJo6IZR8ue5Lp2jALvkQKRFh3s8Q&e=*
> <https://urldefense.proofpoint.com/v2/url?u=http-3A__flickr.com_photos_redux_&d=DwIFaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=aWgRqmoh0Xuzjf7UaXq44Tf6K41u809DPE44ioVTOvk&m=EaHSkTPXnr7dz7IhuHLdmQGRwCs_U25W6xuCtcpx4xw&s=E-yGcPVgZ3j5HsanJo6IZR8ue5Lp2jALvkQKRFh3s8Q&e=>|
> *https://urldefense.proofpoint.com/v2/url?u=http-3A__redux.deviantart.com&d=DwIFaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=aWgRqmoh0Xuzjf7UaXq44Tf6K41u809DPE44ioVTOvk&m=EaHSkTPXnr7dz7IhuHLdmQGRwCs_U25W6xuCtcpx4xw&s=KGbXWvU6wp3d7m7ac7HfF4DTluIOlvt_KrAKkbX-j3E&e=*
> <https://urldefense.proofpoint.com/v2/url?u=http-3A__redux.deviantart.com&d=DwIFaQ&c=jf_iaSHvJObTbx-siA1ZOg&r=aWgRqmoh0Xuzjf7UaXq44Tf6K41u809DPE44ioVTOvk&m=EaHSkTPXnr7dz7IhuHLdmQGRwCs_U25W6xuCtcpx4xw&s=KGbXWvU6wp3d7m7ac7HfF4DTluIOlvt_KrAKkbX-j3E&e=>
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
Received on Tuesday, 21 November 2017 09:13:43 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 6 December 2017 16:04:47 UTC