Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility improvements for the Site metadata table #235

Closed
ndiego opened this issue Oct 10, 2023 · 14 comments · Fixed by #239, #245, #249 or #266
Closed

Accessibility improvements for the Site metadata table #235

ndiego opened this issue Oct 10, 2023 · 14 comments · Fixed by #239, #245, #249 or #266
Assignees
Labels
Accessibility Issues related to keyboard navigation, screen readers, etc [Status] Needs Design Feedback Feedback is needed on an existing or new component
Milestone

Comments

@ndiego
Copy link
Member

ndiego commented Oct 10, 2023

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?

image
@ndiego ndiego added Accessibility Issues related to keyboard navigation, screen readers, etc [Status] Needs Design Feedback Feedback is needed on an existing or new component labels Oct 10, 2023
@adamwoodnz adamwoodnz added this to the Launch milestone Oct 10, 2023
@adamwoodnz adamwoodnz self-assigned this Oct 11, 2023
@adamwoodnz adamwoodnz moved this from Todo to In Progress in @adamwoodnz's WIP Oct 11, 2023
@adamwoodnz adamwoodnz moved this from Todo to In Progress in WordPress.org Redesign: Showcase Oct 11, 2023
@adamwoodnz
Copy link
Contributor

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.

@github-project-automation github-project-automation bot moved this from In Progress to Done in @adamwoodnz's WIP Oct 11, 2023
@github-project-automation github-project-automation bot moved this from In Progress to Done in WordPress.org Redesign: Showcase Oct 11, 2023
@adamwoodnz adamwoodnz reopened this Oct 11, 2023
@adamwoodnz adamwoodnz moved this from Done to In Progress in @adamwoodnz's WIP Oct 11, 2023
@adamwoodnz adamwoodnz moved this from Done to In Progress in WordPress.org Redesign: Showcase Oct 11, 2023
@adamwoodnz
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Member Author

ndiego commented Oct 16, 2023

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

@ndiego ndiego reopened this Oct 16, 2023
@ndiego ndiego moved this from Done to In Progress in WordPress.org Redesign: Showcase Oct 16, 2023
@marko-srb
Copy link

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
Copy link

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

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

@ndiego
Copy link
Member Author

ndiego commented Oct 16, 2023

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
Copy link
Contributor

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
Copy link

@adamwoodnz Yes, it is also a problem. 😞

@ndiego ndiego modified the milestones: Launch, Future Oct 17, 2023
@ndiego
Copy link
Member Author

ndiego commented Oct 17, 2023

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
Copy link

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
Copy link
Contributor

adamwoodnz commented Nov 15, 2023

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 adamwoodnz moved this from Done to In Progress in @adamwoodnz's WIP Jan 5, 2024
@github-project-automation github-project-automation bot moved this from In Progress to Done in @adamwoodnz's WIP Jan 8, 2024
@github-project-automation github-project-automation bot moved this from In Progress to Done in WordPress.org Redesign: Showcase Jan 8, 2024
@adamwoodnz
Copy link
Contributor

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment