Improve screen reader experience for site meta (v2)

[adamwoodnz]

Fixes #235
Alternative to #239

The PR uses separate content for screen reader and visual layout, so that Voiceover and NVDA will both read the entire content of the list item.

Home (no visible label)

<ul>
	<li class="is-meta-post_title">
		<span class="screen-reader-text">Site title: <a href="http://localhost:8888/google-ventures/">GV (Google Ventures)</a></span>
		<span aria-hidden="true"><a href="http://localhost:8888/google-ventures/">GV (Google Ventures)</a></span>
	</li>
	<li class="is-meta-domain">
		<span class="screen-reader-text">URL: <a class="external-link" href="https://www.gv.com/" target="_blank" rel="noopener noreferrer">gv.com</a></span>
		<span aria-hidden="true"><a class="external-link" href="https://www.gv.com/" target="_blank" rel="noopener noreferrer">gv.com</a></span>
	</li>
	<li class="is-meta-category">
		<span class="screen-reader-text">Category: <a href="http://localhost:8888/category/business/" rel="tag">Business</a></span>
		<span aria-hidden="true"><a href="http://localhost:8888/category/business/" rel="tag">Business</a></span>
	</li>
</ul>

Single

<ul>
	<li class="is-meta-country">
		<span class="screen-reader-text">Country: United States</span>
		<span aria-hidden="true"><strong>Country</strong><span>United States</span></span>
	</li>
	<li class="is-meta-category">
		<span class="screen-reader-text">Category: <a href="http://localhost:8888/category/business/" rel="tag">Business</a></span>
		<span aria-hidden="true"><strong>Category</strong><span><a href="http://localhost:8888/category/business/" rel="tag">Business</a></span></span>
	</li>
	<li class="is-meta-published">
		<span class="screen-reader-text">Published: September 2023</span>
		<span aria-hidden="true"><strong>Published</strong><span>September 2023</span></span>
	</li>
	<li class="is-meta-post_tag">
		<span class="screen-reader-text">Site tags: <a href="http://localhost:8888/tag/entrepreneur/" rel="tag">Entrepreneur</a>, <a href="http://localhost:8888/tag/startups/" rel="tag">Startups</a>, <a href="http://localhost:8888/tag/technology/" rel="tag">Technology</a></span>
		<span aria-hidden="true"><strong>Site tags</strong><span><a href="http://localhost:8888/tag/entrepreneur/" rel="tag">Entrepreneur</a>, <a href="http://localhost:8888/tag/startups/" rel="tag">Startups</a>, <a href="http://localhost:8888/tag/technology/" rel="tag">Technology</a></span></span>
	</li>
</ul>

Using specific screen reader content means we can avoid nested elements or visual space between elements, which cause screen readers to not read the list item as one.

Using NVDA where there are specific keys for navigating lists (L) and list items (I), the whole first item is read out when either key is used, eg. 'Country: United States' or 'Category: Creative (link)'. Full transcript from focusing list, then navigating items:

main landmark list with 4 items Country: Germany
Category: Creative
Published: September 2023
Site tags: Architecture link , Development link , Sustainability

Using Voiceover the nested anchor tags still require another keyboard navigation with right arrow, and are read individually, but the country and published items (without links) are read as one.

My understanding is that JAWS and NVDA cover the vast majority of screen reader users, so I think optimising for them is the best choice.

There are no visual changes.

Testing

Use a screen reader to navigate the home and single site pages, checking how the screen reader interprets the meta list.

It should announce the list, then read each list item as 'label: value', and you should be able to navigate to the link within if appropriate (only country and published don't have links).

The label text should not be read twice.

[adamwoodnz]

The last version was no good using NVDA @alexstine. I'll merge this one for testing instead 🤞

[adamwoodnz]

This solution has dropped our overall Lighthouse accessibility score due to focusable elements being aria-hidden 😞

If it improves the experience with these lists, maybe that doesn't matter too much. I didn't have any success using different layout techniques and keeping the label and value read together. Any space between them causes the screen reader to separate them.

[adamwoodnz]

Hey @alexstine this is merged, would you be able to give it a spin on staging please?

An alternative approach which works ok in NVDA and doesn't harm the Lighthouse score, is to wrap the previous contents of the list item in <div role="group">, eg.

<li class="is-meta-post_tag">
	<div role="group">
		<strong>Site tags</strong> <span><a href="http://localhost:8888/tag/entrepreneur/" rel="tag">Entrepreneur</a>, <a href="http://localhost:8888/tag/startups/" rel="tag">Startups</a>, <a href="http://localhost:8888/tag/technology/" rel="tag">Technology</a></span>
	</div>
</li>

This does result in the list items being read as one (using I in NVDA), however not when the list is initially focused (with L). The transcript when focusing the list and then navigating the items is:

main landmark list with 4 items Country
Category Publication
Published September 2023
Site tags Journalism link , Media link , Newspaper

I notice the MDN docs suggest restrictions on the usage of this role within lists, but the a11y tools I'm using don't flag that:

When a group is used in the context of list, limit the children of the group to listitem elements. In this case, it is recommended to use multiple ordered or unordered lists, <ol> or <ul>, with nested <li> children.

The technique also doesn't really help in Voiceover, but I don't think that is so important.

Thoughts?

[alexstine]

@adamwoodnz So, you cannot add aria-hidden="true" without also adding tabindex="-1" which would also take it out of tab order for sighted users. Using role="group" is really not valid here. Is there a way we can avoid using flex box on the list items?

Thanks.

[adamwoodnz]

Thanks for checking

you cannot add aria-hidden="true" without also adding tabindex="-1" which would also take it out of tab order for sighted users

Ah I got so busy navigating using special keys I forgot about standard tab behaviour 🤦

Is there a way we can avoid using flex box on the list items?

So far I have not been able to find a way to make this spread out design work with screen readers. I've tried flex, grid and table. I'll try absolute positioning, but that gets brittle. It's the combination of nested elements and visual space which seems to cause the issues.