Improve table caption accessibility #41980
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Soean
added
[Focus] Accessibility (a11y)
|
Size Change: +135 B (0%) Total Size: 1.25 MB
ℹ️ View Unchanged
|
talldan
reviewed
Jun 28, 2022
There was a problem hiding this comment.
I guess this PR still has some way to go. Styles seem to be broken and the markup in the edit.js file still needs to be updated, so not sure if this is too early to leave a review.
I'm supportive of any change to improve accessibility, but it's worth pointing out there were two more problems with using a rich text <caption> that weren't mentioned in #41502:
- Tab order is incorrect because the caption element is before the table in the DOM, but after it visually.
- Voiceover didn't announce rich text
captionelements correctly when the table is focused. Potentially this may have been fixed in VO.
| <Section type="body" rows={ body } /> | ||
| <Section type="foot" rows={ foot } /> | ||
| </table> | ||
| <table |
There was a problem hiding this comment.
The <figure> element provided a horizontally scrolling container for wide tables, and without that wide tables now breakout of the layout. I think a div wrapper might be needed to replace that.
The markup in the editor now also doesn't match the frontend.
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This PR improves the Table markup for better A11y:
Fixes #41502
Old:
New:
Testing Instructions
Paste this code in the editor. The
oldcontent should be migrated to thenewcontent: