search

OxfordRSE / gutenberg

https://oxfordrse.github.io/gutenberg
BSD 3-Clause "New" or "Revised" License
5 stars 7 forks source link

Page breadcrumbs have multiple aria-current states #197

Closed eatyourgreens closed 6 months ago

eatyourgreens commented 7 months ago

The list of links in the page breadcrumb should wrap the current page in aria-current='page' but it actually adds that attribute to all the links.

Screenshot of the breadcrumb HTML, showing that it has multiple aria-current states.

The aria-current attribute indicates the element on which it is set, to a value other than false, represents the current item within a container or set of related elements. Only mark one element in a set of elements as current with aria-current.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#description

alasdairwilson commented 7 months ago

I think the idea here was that they are on page: "theme - course - section" but that is probably not how a screenreader sees it, instead the screenreader might be looking for a unique element with it set to page and be unpredictable when there are multiple ones.

I guess the solution then is to set the aria label to "[theme] [course] [section]" "[theme] [course]" "[theme]" on those list items respectively but only put aria-current="page" on the deepest of those 3 that appear (i.e. do not add it to theme if course exists and do not add it to course if section exists).

Am i understanding correctly?

eatyourgreens commented 7 months ago

The list items all have text content, so ARIA labels would be redundant (and possibly confusing.) I think aria-current=“page” will always go on the last item in the breadcrumb trail, as that’s where you are.

eatyourgreens commented 7 months ago

Aha! We can follow the ARIA breadcrumb pattern, which includes example code.

Wrapping the list in <nav aria-label=“breadcrumb”> sounds like a good idea.

eatyourgreens commented 7 months ago

The breadcrumb navigation is inside the main page content at the moment, and includes the page tools (Edit Source, Search, Sign In, License info.)

A better structure would be to pull it out into a page header:

With that structure, it should be easy to add a skip link that bypasses the header and goes straight to the <main> element.

eatyourgreens commented 7 months ago

I had a quick go at editing the page structure to make those changes. I'll tidy my changes up and open a PR.

WAVE is very useful for inspecting page structure and also checking that the heading structure is correct.

Screenshot of course materials page open in WAVE, showing the page structure and headings.