WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Breadcrumbs, aria-current, and tabindex zero

for

From: Mallory
Date: Dec 30, 2017 12:08PM

Hi,
my idea is that the non-link-ness of the final item would sorta be doing the work you want aria-current to do.

Or, to fall back to the hidden text if the next thing after the breadcrumb isn't an obvious h1 repeating basically the breadcrumb item name (something like <li><span class="offscreen">current page: </span> {pagetitle}</li>)

I think making it focusable is more confusing than any clarity you get in exchange with the aria-current, especially for sighted keyboarders who never heard of aria-current and are relying on the last text to be distinctly ... non-linky-ish. Making it focusable may trick me into thinking it is a link, but somehow maybe broken.

But that's my thoughts. Another breadcrumb pattern is to not include the current page at the end at all, so that there are only links in the breadcrumb and the h1 of the current page speaks for itself. But a reason for that pattern is also to get around any trouble with "telling links from non-links by something other than colour alone" which we ran into since our breadcrumb clickabled weren't underlined like most in-text links, so only their blue colour separated them from the final, non-link item. Not having a final, non-link item was one solution (another was keep it but make it both black *and* bold).

cheers,
Mallory

On Sat, Dec 30, 2017, at 7:27 PM, 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.
> > > >