WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Breadcrumbs, aria-current, and tabindex zero

for

From: Joe Chidzik
Date: Jan 2, 2018 5:45AM

An approach I've seen in navigation lists, though not breadcrumbs (I think I saw this in Heydon Pickering's book on inclusive design) was to leave the current page text as a link, but point it to the main content area of the current page e.g.

<li><a href="#main" aria-current="page">Baz</a></li>
...
<main id="main" tabindex="-1">...</main>

This seemed like quite a neat approach to same page links as used in nav lists.

Joe




> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Léonie Watson
> Sent: 30 December 2017 23:09
> To: WebAIM Discussion List < <EMAIL REMOVED> >; Beattie, Allan
> < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Breadcrumbs, aria-current, and tabindex zero
>
> The aria-current attribute is intended to identify the current item in a
> collection of similar items. So if the last thing in the breadcrumb isn't a link, it's
> already differentiated from the other links
>
> If you want to keep the focus behaviour and use aria-current, then I'd suggest
> leaving the last item in the breadcrumb as a link.
>
> Léonie.
>
> On 30/12/2017 18:27, Beattie, Allan wrote:
> > I've been reviewing our website and comparing patterns to the examples
> given in the WAI-ARIA Authoring Practices. I'd like some opinions on whether
> what I've done with our breadcrumb is advisable.
> >
> > It seems odd to make the last item in the list a link, since it's the current
> page, but if the element isn't focusable users won't benefit from the `aria-
> current` attribute.
> >
> > So I added `tabindex="0"` to the last item in the list to make it focusable,
> even though it won't do anything.
> >
> > Full markup is as follows:
> >
> > ```HTML
> > <nav role="navigation" aria-label="Breadcrumb">
> > <ol>
> > <li><a href="foo">Foo</a></li>
> > <li><a href="bar">Bar</a></li>
> > <li tabindex="0" aria-current="page">Baz</li>
> > </ol>
> > </nav>
> > ```
> >
> > It sounds fine, at least in the latest NVDA and JAWS, but users of browser /
> atech combinations that don't recognise `aria-current` will be left wondering
> what the heck this is.
> >
> > Have we commited an a11y faux pas?
> >
> > Allan
> > --
> > Allan A Beattie
> > Senior Web Developer
> >
> > Digital & Information Services | University of Aberdeen
> > e: <EMAIL REMOVED> <mailto: <EMAIL REMOVED> > | t: +44
> > (0)1224 27 4486
> >
> >
> >
> > The University of Aberdeen is a charity registered in Scotland, No
> SC013683.
> > Tha Oilthigh Obar Dheathain na charthannas cl?raichte ann an Alba, ?ir.
> SC013683.
> > > > > > archives at http://webaim.org/discussion/archives
> > > >
>
> --
> @LeonieWatson @ <EMAIL REMOVED> tink.uk carpe diem
> > > http://webaim.org/discussion/archives
>