USWDS - Table: Allow stacked table to be readable with VoiceOver + Safari combo#5477
Conversation
|
Unable to test in Safari. Do you want me to test in JAWS and/or NVDA? |
|
@amycole501 Yeah if you don't mind comparing to the develop builds with other browsers/screen readers to confirm no accidental readout changes that would be great! |
amyleadem
left a comment
There was a problem hiding this comment.
@mahoneycm, this is looking good! I like that there is a clean, one-line answer to an important bug fix.
I don’t see a big issue with Safari reading the content out as one column. It is not ideal but it is better than what we have now and does match the visual presentation.
I tested on Chrome, Safari, and Firefox with VoiceOver in MacOS. I also tested in iOS Safari with VoiceOver Gestures. I tested the following:
- Confirmed existence of the bug with VoiceOver in Safari on MacOS and VoiceOver Gestures Safari on iOS
- Confirm that the stacked table content is now accessible with VoiceOver in Safari VoiceOver Gestures in iOS Safari
- Confirm no visual regression in Safari and other browsers
- Confirm the readout makes sense
- Confirm no visual or screen reader regression in other browsers
There was a problem hiding this comment.
The table sounds great in JAWS in Chrome. No issues detected and all rows were read correctly. I'm currently having issues with NVDA reading the table. However, I asked @alex-hull if it sounded OK to her and she said it's good; it read the table data and rows. I just installed an update to NVDA so I think it's just a glitch for me and the table is fine as-is.
|
@amycole501 Glad to hear it! Would you mind approving the PR if it looks good to you? Whenever you get the chance 😊 |
thisisdano
left a comment
There was a problem hiding this comment.
Clean fix, great documentation!
Summary
Fixed a bug that prevented VoiceOver from reading stacked table content while using Safari.
Breaking change
This is not a breaking change
Related issue
Closes #5434
Related pull requests
Changelog →
Preview link
Stacked table →
Problem statement
Specifically when using VoiceOver on Safari, tables with
display: blockon the are skipped or read as empty.This is caused by a well known bug1 which causes tables with
displayproperties to break accessibility with screen readers.This bug used to affect most browsers, but in recent years has been resolved. Safari seems to be the only browser still affected by this. At the time of this PRs creation the referenced article was last updated:
August 14th, 2023.Additional mdn doc PR with a well organzied list of associated bugs: mdn/browser-compat-data#19994
Solution
I was able to improve the screen reader experience by removing
display: blockfrom stacked tabletrtags.Now, VoiceOver + Safari can properly navigate through the stacked table’s content and read it’s values
Differences
There is one slight difference between the way VO + Safari read the table data compared to other browsers.
Other browsers will read cells data labels with “column # of #” depending on how many data cells there are in each row. In our example, this would be “column 1 of 3” for example.
Safari now reads this as “Column 1 of 1”. While this differs from the other browsers, it is considered accurate because there is only one column.
The downside is that it doesn’t let the user know how many “columns” (if table wasn't stacked) are within the said “row”.
VoiceOver will correctly read out how many “rows” (sections) of the stacked table there are.
This is caused by a Safari bug
Testing and review
Confirm existence of bug
Confirm improvement
Testing checklist
Footnotes
https://adrianroselli.com/2022/07/its-mid-2022-and-browsers-mostly-safari-still-break-accessibility-via-display-properties.html ↩
https://github.com/mdn/browser-compat-data/issues/19994 ↩