E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 5 (In chronological order)

From: Beattie, Allan
Date: Sat, Dec 30 2017 11:27AM
Subject: Breadcrumbs, aria-current, and tabindex zero
No previous message | Next message →

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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS 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.

From: Mallory
Date: Sat, Dec 30 2017 12:08PM
Subject: Re: Breadcrumbs, aria-current, and tabindex zero
← Previous message | Next message →

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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS 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.
> > > >

From: Date: Sat, Dec 30 2017 4:08PM
Subject: Re: Breadcrumbs, aria-current, and tabindex zero
← Previous message | Next message →

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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS 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.
> > > > >

--
@LeonieWatson @ = EMAIL ADDRESS REMOVED = tink.uk carpe diem

From: Beattie, Allan
Date: Sun, Dec 31 2017 3:33AM
Subject: Re: Breadcrumbs, aria-current, and tabindex zero
← Previous message | Next message →

Thanks for the responses; I suspected as much.

I've added the suggested revision (i.e. removing `tabindex` and `aria-current`) to our backlog.

In the meantime, happy Hogmanay everyone, and all the best for the coming year!


--
Allan A Beattie
Senior Web Developer

Digital & Information Services | University of Aberdeen
e: = EMAIL ADDRESS 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.

From: Joe Chidzik
Date: Tue, Jan 02 2018 5:45AM
Subject: Re: Breadcrumbs, aria-current, and tabindex zero
← Previous message | No next message

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




>