Add headings across the app for easier screen reader navigation #12427
Conversation
|
Hi, thanks for your contribution! |
|
Allowing myself to bump this in case you missed it 🙏 @saghul |
|
Sorry for the delay! @Calinteodor will be looking at these shortly! |
| @@ -446,6 +447,12 @@ class Filmstrip extends PureComponent <IProps, State> { | |||
| _verticalViewGrid && 'no-vertical-padding', | |||
| _verticalViewBackground && classes.filmstripBackground) } | |||
| style = { filmstripStyle }> | |||
| <span | |||
There was a problem hiding this comment.
Why is this useful here? I am using VoiceOver and it does not read/see this section.
There was a problem hiding this comment.
That's weird, works great for me… Don't you see "Video thumbnails" in the headings list if you open the VoiceOver rotor (via the VO+U shortcut)?
There was a problem hiding this comment.
All good!
I was more familiar with NVDA than with VoiceOver.
Thank you for the indications!
react/features/participants-pane/components/web/MeetingParticipants.tsx
Outdated
Show resolved
Hide resolved
|
@Leimi thanks so much for your contribution! |
|
Thanks for the feedback, will take the time to answer to this hopefully by monday 🙏 edit : unfortunately i won't have the time right now, will go back to this next week. |
manuhabitela
force-pushed
the
headings-for-screenreaders
branch
from
249b2fb
to
083c82d
Compare
|
Please rebase and resolve conflicts. Thanks! |
manuhabitela
force-pushed
the
headings-for-screenreaders
branch
from
083c82d
to
e16ffd0
Compare
| className = 'sr-only' | ||
| role = 'heading'> | ||
| { t('participantsPane.title') } | ||
| </span> |
There was a problem hiding this comment.
changed the logic here after the rebase. Since 50c4748 added a potential visitors count in addition to the participants count, we can't rely on the participants count sentence to be the heading anymore. If we did, the visitors count would certainly be missed by people navigating from heading to heading.
|
Same steps as #12657 to fix errors. |
This doesn't change anything for sighted users, but it can make a noticeable difference for users using a screen reader. Because a screen reader has keyboard shortcuts to jump from heading to heading, a user can quickly scan the content of a webpage or quickly navigate from one part to the other thanks to them.
manuhabitela
force-pushed
the
headings-for-screenreaders
branch
from
e16ffd0
to
5c46d8b
Compare
|
So I guess it should be good now, thanks for your patience, still figuring out this project, first PR is bound to be messy 🙃 |
Don't worry, Leimi! |
|
jenkins test this please |
|
jenkins test this please |
…12427) feat(a11y): added headings across the app for easier screen reader nav
This doesn't change anything for sighted users, but it can make a noticeable difference for users using a screen reader. Because a screen reader has keyboard shortcuts to jump from heading to heading, a user can quickly scan the content of a webpage or quickly navigate from one part to the other thanks to them.
I didn't add any heading to the "video space" central part of the UI (except when the whiteboard is shown), because I'm not sure there is actual content to announce to screen reader users in this part, but maybe I'm wrong?
Below is a screenshot with the headings list popup of NVDA, a free and open source screen reader on Windows, to show the benefits of adding this. Before this PR, the headings list only contained the headings from Excalidraw when the whiteboard was shown.
Related to #12379
@saghul