Accessibility improvements for the Site metadata table

[ndiego]

Copied from WordPress Slack: https://wordpress.slack.com/archives/C04U953K77A/p1696899077421269?thread_ts=1696525287.393319&cid=C04U953K77A

Really need to do something about the lists. It would be nice if it was read as Category: X but instead the list item is split. I wonder if the usage of flex is causing this?

On screenreaders, the content in the Site metadata table is not being read well. What could we do to improve this?

[adamwoodnz]

It appears that flex is causing this. I think that's the best layout technique, so I'll investigate ways to create a better reading experience.

[adamwoodnz]

My first attempt at using an aria-label on the list item did not work in NVDA. I've also tried using different layout display techniques for the list item such as grid and table but it seems that any CSS that introduces space between the words leads to them being read separately. I think rendering separate screen reader and visual text in each item is the only way forward.

[adamwoodnz]

V2 didn't work as link elements were duplicated in the tab order. Starting V3 with absolute positioning of labels to avoid the nested elements required for the flex layout.

[ndiego]

I am reopening, given this comment. Thanks for all your hard work on this @adamwoodnz.

[marko-srb]

Don’t we already have this working on tutorials single page?

Let me know if we can replicate solution done there?

CC: @adamwoodnz , @ndiego

Thank you!

[marko-srb]

https://learn.wordpress.org/tutorial/the-wordpress-database/

Additional example, with more than one item / link...

[ndiego]

https://learn.wordpress.org/tutorial/custom-database-tables/ https://learn.wordpress.org/tutorial/the-wordpress-database/

If the design in the above examples exhibits the same problem. Then we might consider this a post-launch item where we update all instances of the same design pattern across WordPress.org.

[adamwoodnz]

Don’t we already have this working on tutorials single page?

You're correct that the original layout is very similar to the Learn examples linked, eg. https://learn.wordpress.org/tutorial/custom-database-tables/

The NVDA transcript reads like this for me:

main landmark list with 6 items Length Topic Extending WordPress Related Version 6.4 Language English Subtitles English Print View Print View

Very similar to how the Showcase list is read.

@alexstine is the Learn meta list also problematic for you?

[alexstine]

@adamwoodnz Yes, it is also a problem. 😞

[ndiego]

Yes, it is also a problem. 😞

Darn, but I am glad we caught it. I am going to remove this issue from the launch milestone, but let's explore a holistic solution to this design pattern and then update both.

[joedolson]

Visually, this is a table; it's presented as two columns of data, with the left column as table headers and the right column data cells. Is there any reason this can't use the same semantics that it presents visually?

[adamwoodnz]

Visually, this is a table; it's presented as two columns of data, with the left column as table headers and the right column data cells. Is there any reason this can't use the same semantics that it presents visually?

@joedolson I agree, this is essentially where @alexstine and I ended up too

[adamwoodnz]

I've now converted this to a table as discussed. @alexstine and @joedolson please try it out when you have a chance, and reopen if any issues 🙏

[joedolson]

Should probably define the scope attribute for the th elements. <th scope="row">; it helps give context for what the purpose of those heading cells is. Although this is a simple table, there's really no reason to add th without scope declaration.