updates for screen readers

[carylwyatt]

As I've been testing our UI with a screen reader, I've noticed some small things that probably pass official a11y guidelines but would be nice to fix for screen readers if we have the time to make the changes.

design components

• [ ] "item viewability" accordion in search results pages (ls, mb, catalog) announces "all items, [number]" without explaining what that number means. maybe that pill/badge should have an aria-label like "[number] search results"
• [ ] the facet accordions have links that will add the facet to limit the search, but because the associated number of results isn't focusable, it doesn't get announced by the screen reader. it probably should be announced!

[aelkiss]

I was curious to try with NVDA and what I observed was that for the facet accordions it does read it, but doesn't seem to know that the number of results should be grouped with the link text, so for https://babel.hathitrust.org/cgi/ls?q1=aardvark&field1=ocr&a=srchls&ft=ft&lmt=ft with subjects it will read e.g.:

heading level 3 button expanded Subject link English language 389 link United States 365 link Encyclopedias and dictionaries 313 link Subject headings, Library of Congress 286 link Trademarks 284

which is not what we want...

another thing I noticed is that in the search results e.g. https://catalog.hathitrust.org/Search/Home?lookfor=aardvark&searchtype=all&ft=ft&setft=true#sidebar

it says:

list with 6 items Iowa Library Commission. Iowa State Traveling Library. State Library of Iowa. Author 1970 Published

which seems not quite what we would want...

[aelkiss]

I looked more into the "list with 6 items" thing and as far as I can tell, we're doing the right thing -- these use <dl>, <dd>, <dt> and appear to be nested correctly, and the NVDA behavior is just to announce the combined number of <dd> and <dt> elements. (In fact, there's an example in the HTML standard using <dl> for bibliographic information. I also tried just using a minimal example and verified that NVDA with Chrome, Firefox, and Edge does the same thing. So I guess this is expected behavior.

[aelkiss]

I'm very confused why the behavior of reading facet counts seems to differ between ls and catalog. The markup looks the same to me...

catalog:

<div class="filter-list-item d-flex flex-nowrap align-items-center justify-content-between gap-3 mb-2 px-3">
  <a href="/Search/Home?type%5B%5D=all&amp;lookfor%5B%5D=chaucer&amp;filter%5B%5D=authorStr%3AChaucer%2C%20Geoffrey%2C%20-1400&amp;pagesize=100&amp;ft=ft">Chaucer, Geoffrey, -1400</a>
  <span>389</span>
</div>

ls:

<div class="filter-list-item d-flex flex-nowrap align-items-center justify-content-between gap-3 mb-2 px-3">
  <a href="/cgi/ls?q1=aardvark;field1=ocr;a=srchls;lmt=ft&amp;facet=authorStr:&quot;United%20States.%20Patent%20and%20Trademark%20Office.&quot;">United States. Patent and Trademark Office.</a>
  <span>317</span>
</div>

[carylwyatt]

I'm very confused why the behavior of reading facet counts seems to differ between ls and catalog. The markup looks the same to me...

With VoiceOver, ls and catalog filter lists sound identical. When I tab through, it reads "Link, (facet name)" and moves down the list of links without reading any facet count. If I put it in reading mode it announces "Link, (facet name) (number)" and moves through the list.

I'll add this to my question list for deque-- should we announce the facet count when the user is tabbing through the filter links? Or should the entire item be focusable (instead of just the link with the facet name)? I'm leaning toward cleaning up the markup by making the whole element a focusable item (a button maybe) so the screen reader will announce the facet count when that filter is focused.

[aelkiss]

Got it, that's a helpful description - I missed that the issue was specifically in what was announced when tabbing through links. I think we could probably use aria-describedby there as well?

[carylwyatt]

I think we could probably use aria-describedby there as well?

That's exactly what I wrote in my notes for office hours!

Something else I noticed when I was testing yesterday: the Item Viewability links have the count/badge <span> inside the link, so those are read when tabbing, but the rest of the filters have the <span> outside the link. Maybe this happened because of style differences? It should be easy enough to move the span inside the link, but styling the facet count to not look like a link might be tricky. More reason to use aria-describedby.