WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL] Breadcumb nav same page accessibility

for

From: Samuel Hobson
Date: Dec 9, 2019 3:13PM

It had never occurred to me to make a breadcrumb an <ol> before, I've just realised. Otherwise, the below has been the exact pattern I've used also. (Would love to know your thinking around using <ol> vs <ul>!)

And I too welcome something better as a label. But I also wonder, if this pattern is in wide use, and the label 'breadcrumb' is already associated with a certain expectation, how much leeway do we actually have to remove that word? 🙂

Get Outlook for Android<https://aka.ms/ghei36>
From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of Mark Magennis < <EMAIL REMOVED> >
Sent: Monday, December 9, 2019 9:52:27 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] [EXTERNAL] Breadcumb nav same page accessibility

Hi Allyssa,

Do you mean in a breadcrumb trail Grandparent/Parent/This Page, should "this page" be a link or just plain text?

If that's the question, then I would say plain text. I don't see a need for it to be a link. So the coding could be (with full hrefs and CSS for visual dividers):

<nav aria-label="breadcrumb trail">
<ol>
<li><a href="#">Grandparent</a></li>
<li><a href="#">Parent</a></li>
<li aria-current="page">This page</li>
</ol>
</nav>

The use of aria-current is not essential but useful.

Incidentally, I've always hated using aria-label="breadcrumb trail" for the whole thing because it's developer jargon and I imagine most users have no idea what it means. But I haven't been able to think of anything much better. Suggestions welcome.

Mark

Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist