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

Screen readers should not announce current time every time a new message is received #5696

Closed
pafcu opened this issue Nov 26, 2017 · 10 comments · Fixed by matrix-org/matrix-react-sdk#10584
Assignees
Labels
A11y Help Wanted Extra attention is needed O-Occasional Affects or can be seen by some users regularly or most users rarely S-Major Severely degrades major functionality or product features, with no satisfactory workaround T-Defect

Comments

@pafcu
Copy link
Contributor

pafcu commented Nov 26, 2017

Description

Currently Riot permanently shows the time of the last message in the timeline (for other messages this is only shown on hover). This is fairly annoying with a screen reader as it means that the current time is announced every time a new message arrives. We could probably hide this information from screen readers.

We may also need to figure out how to show timestamps on request using something else than hover (e.g. show on some specific keypress).

Steps to reproduce

  • Start orca screen reader
  • Create a new room
  • Invite riot-bot
  • Trigger the tutorial
  • Observe that you now definitely know what time it is

Version information

Riot web c28d9e5-react-c002d3ff9967-js-36ff0ad0193e on FF57 and orca 3.26.0

@turt2live
Copy link
Member

Brief research tells me this might be solvable with aria-live.

@lampholder lampholder added I18n T-Defect S-Major Severely degrades major functionality or product features, with no satisfactory workaround P2 Help Wanted Extra attention is needed labels Dec 1, 2017
@pvagner
Copy link
Contributor

pvagner commented Dec 5, 2017

I think the same thing would also fix #5697.
The thing is we do currently have aria-live set to polite on the outer time line div hoping screen readers would automagically anounce new events as they arrive.
However now with these two bug reports it's apparent this is not very nice strategy although some casual screen reader users like me might be fine overlooking this issue all the time.
With the current state screen readers do read all the changes to the time line if the place which has just been changed is visible.
I am thinking that the fix here might be

  • Remove the aria-live from the outer div.
  • Only set aria-live conditionally just when appending new messages.

This way aria-live won't be kicking in even when scrolling.

@pvagner
Copy link
Contributor

pvagner commented Dec 6, 2017

I haven't yet tested this but now when looking at the ScrollPanel and TimelinePanel components I think we should use the same strategy these components are using for when to push content. They are only adding new events to the end if the ScrollPanel is stuck at bottom.

pvagner added a commit to pvagner/matrix-react-sdk that referenced this issue May 28, 2018
(fixes element-hq/element-web#5696 and element-hq/element-web#5697)
We only wish to set aria-live to polite when the list is scrolled to the
bottom
to avoid flooding screen readers with loads of DOM changes when
scrolling
causing presentation of random message events.
To avoid presenting outgoing events twice we are only setting aria-live
when there is
a new content to add so e.g. style changes and similar won't be
propagated to assistive tools.
@turt2live turt2live added this to the Accessibility Improvements milestone May 16, 2019
@turt2live turt2live added the Z-Community-PR Issue is solved by a community member's PR label May 16, 2019
@jryans jryans added A11y and removed I18n labels Mar 5, 2021
@Palid
Copy link
Contributor

Palid commented Aug 24, 2021

Related #5679

@Palid
Copy link
Contributor

Palid commented Aug 24, 2021

@pafcu @pvagner it seems matrix-org/matrix-react-sdk#1939 solved this, is this one still relevant?

@Palid Palid added X-Needs-Info This issue is blocked awaiting information from the reporter O-Occasional Affects or can be seen by some users regularly or most users rarely and removed P2 labels Aug 24, 2021
@pvagner
Copy link
Contributor

pvagner commented Aug 24, 2021

Unfortunatelly the proposed fix has been reverted because it was causing other severe issues when uhandling timeline content with a screen reader.
See this comment for my ideas matrix-org/matrix-react-sdk#3019 (comment) . Bits related to live region are still relevant today and this is still an issue.

@Palid
Copy link
Contributor

Palid commented Aug 24, 2021

Unfortunatelly the proposed fix has been reverted because it was causing other severe issues when uhandling timeline content with a screen reader.
See this comment for my ideas matrix-org/matrix-react-sdk#3019 (comment) . Bits related to live region are still relevant today and this is still an issue.

Thank you for your verification and suggested solution. @kittykat @novocaine can you look at that? I think we want to definitely have it in the next sprint, at least partially. It's been waiting way too long.

@novocaine
Copy link
Contributor

novocaine commented Aug 25, 2021

I understand the timeline is still noisy for screen readers, but it's still not quite clear to me whether the problem referred to in this specific issue still exists: do screen readers still announce the current time every time a new message is received? Current EW doesn't show all timestamps by default - you need to enable "Always show message timestamps" - so I'm curious whether this is still happening and why it doesn't seem to match the visual UI

@pvagner
Copy link
Contributor

pvagner commented Aug 25, 2021

Always show timestamps option has no effect to screen reader users as it's currently implemented.
Timestamp is a part of the permalink anchor. When the timestamp is shown that anchor includes the timestamp as its text. When the timestamp is not shown the permalink anchor has no textual content. For screen readers it's nice to label unlabeled controls. So to make sure the permalink is always labelled for accessibility purposes an aria-label with event timestamp has been added to the permalink anchor.
The issue we are discussing here is related to the fact screen reader announce the text when corresponding DOM node rerenders. The fact it's a timestamp which is being reported is just a coincidence and should hopefully not be important when fixing this.
If it's possible I'd start exploring if we can implement a check that would set aria-live="polite" on the parent div when the message being added is appended to the bottom of the timeline. When scrolling aria-live should definatelly be set to off.
If this turns out to be difficult, I would suggest removing aria-live from the timeline entirely and consider creating a live region that is only visible to screen reader users that would be used for notifying screen readers about important events happening in the app. Google docs, Github, facebook and other sites are doing this for example. It would work such a special status bar only visible to screen reader users and if we wanted something to get announced by the screen reader we'd placed it there.
See here for an article describing this paradigm https://webaim.org/techniques/css/invisiblecontent/

Perhaps we can discuss this in more details in the #element-accessibility:matrix.org room with @MarcoZehe, @t3chguy and other accessibility aware people.

@SimonBrandner SimonBrandner removed the Z-Community-PR Issue is solved by a community member's PR label Aug 27, 2021
@MadLittleMods
Copy link
Contributor

Related to #10952

@novocaine novocaine removed the X-Needs-Info This issue is blocked awaiting information from the reporter label Oct 19, 2021
@turt2live turt2live added the good first issue Good for newcomers label May 17, 2022
@turt2live turt2live removed the good first issue Good for newcomers label Jun 27, 2022
@t3chguy t3chguy self-assigned this Apr 12, 2023
su-ex added a commit to SchildiChat/element-desktop that referenced this issue Apr 25, 2023
* Fixes for [CVE-2023-30609](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE-2023-30609) / GHSA-xv83-x443-7rmw
* Pick sensible default option for phone country dropdown ([\#10627](matrix-org/matrix-react-sdk#10627)). Fixes element-hq/element-web#3528.
* Relate field validation tooltip via aria-describedby ([\#10522](matrix-org/matrix-react-sdk#10522)). Fixes element-hq/element-web#24963.
* Handle more completion types in rte autocomplete ([\#10560](matrix-org/matrix-react-sdk#10560)). Contributed by @alunturner.
* Show a tile for an unloaded predecessor room if it has via_servers ([\#10483](matrix-org/matrix-react-sdk#10483)). Contributed by @andybalaam.
* Exclude message timestamps from aria live region ([\#10584](matrix-org/matrix-react-sdk#10584)). Fixes element-hq/element-web#5696.
* Make composer format bar an aria toolbar ([\#10583](matrix-org/matrix-react-sdk#10583)). Fixes element-hq/element-web#11283.
* Improve accessibility of font slider ([\#10473](matrix-org/matrix-react-sdk#10473)). Fixes element-hq/element-web#20168 and element-hq/element-web#24962.
* fix file size display from kB to KB ([\#10561](matrix-org/matrix-react-sdk#10561)). Fixes element-hq/element-web#24866. Contributed by @NSV1991.
* Handle /me in rte ([\#10558](matrix-org/matrix-react-sdk#10558)). Contributed by @alunturner.
* bind html with switch for manage extension setting option ([\#10553](matrix-org/matrix-react-sdk#10553)). Contributed by @NSV1991.
* Handle command completions in RTE ([\#10521](matrix-org/matrix-react-sdk#10521)). Contributed by @alunturner.
* Add room and user avatars to rte ([\#10497](matrix-org/matrix-react-sdk#10497)). Contributed by @alunturner.
* Support for MSC3882 revision 1 ([\#10443](matrix-org/matrix-react-sdk#10443)). Contributed by @hughns.
* Check profiles before starting a DM ([\#10472](matrix-org/matrix-react-sdk#10472)). Fixes element-hq/element-web#24830.
* Quick settings: Change the copy / labels on the options ([\#10427](matrix-org/matrix-react-sdk#10427)). Fixes element-hq/element-web#24522. Contributed by @justjanne.
* Update rte autocomplete styling ([\#10503](matrix-org/matrix-react-sdk#10503)). Contributed by @alunturner.
* Workaround Squirrel.Mac wedging app restart after failed update check ([\element-hq#629](element-hq#629)).
* Fix error about webContents on log out ([\element-hq#627](element-hq#627)).
* Fix error when breadcrumb image fails to load ([\element-hq#609](element-hq#609)).
* Fix create subspace dialog not working ([\#10652](matrix-org/matrix-react-sdk#10652)). Fixes element-hq/element-web#24882
* Fix multiple accessibility defects identified by AXE ([\#10606](matrix-org/matrix-react-sdk#10606)).
* Fix view source from edit history dialog always showing latest event ([\#10626](matrix-org/matrix-react-sdk#10626)). Fixes element-hq/element-web#21859.
* #21451 Fix WebGL disabled error message ([\#10589](matrix-org/matrix-react-sdk#10589)). Contributed by @rashmitpankhania.
* Properly translate errors in `AddThreepid.ts` so they show up translated to the user but not in our logs ([\#10432](matrix-org/matrix-react-sdk#10432)). Contributed by @MadLittleMods.
* Fix overflow on auth pages ([\#10605](matrix-org/matrix-react-sdk#10605)). Fixes element-hq/element-web#19548.
* Fix incorrect avatar background colour when using a custom theme ([\#10598](matrix-org/matrix-react-sdk#10598)). Contributed by @jdauphant.
* Remove dependency on `org.matrix.e2e_cross_signing` unstable feature ([\#10593](matrix-org/matrix-react-sdk#10593)).
* Update setting description to match reality ([\#10600](matrix-org/matrix-react-sdk#10600)). Fixes element-hq/element-web#25106.
* Fix no identity server in help & about settings ([\#10563](matrix-org/matrix-react-sdk#10563)). Fixes element-hq/element-web#25077.
* Fix: Images no longer reserve their space in the timeline correctly ([\#10571](matrix-org/matrix-react-sdk#10571)). Fixes element-hq/element-web#25082. Contributed by @kerryarchibald.
* Fix issues with inhibited accessible focus outlines ([\#10579](matrix-org/matrix-react-sdk#10579)). Fixes element-hq/element-web#19742.
* Fix read receipts falling from sky ([\#10576](matrix-org/matrix-react-sdk#10576)). Fixes element-hq/element-web#25081.
* Fix avatar text issue in rte ([\#10559](matrix-org/matrix-react-sdk#10559)). Contributed by @alunturner.
* fix resizer only work with left mouse click ([\#10546](matrix-org/matrix-react-sdk#10546)). Contributed by @NSV1991.
* Fix send two join requests when joining a room from spotlight search ([\#10534](matrix-org/matrix-react-sdk#10534)). Fixes element-hq/element-web#25054.
* Highlight event when any version triggered a highlight ([\#10502](matrix-org/matrix-react-sdk#10502)). Fixes element-hq/element-web#24923 and element-hq/element-web#24970. Contributed by @kerryarchibald.
* Fix spacing of headings of integration manager on General settings tab ([\#10232](matrix-org/matrix-react-sdk#10232)). Fixes element-hq/element-web#24085. Contributed by @luixxiul.
su-ex added a commit to SchildiChat/element-web that referenced this issue Apr 25, 2023
* Fixes for [CVE-2023-30609](https://cve.mitre.org/cgi-bin/cvekey.cgi?keyword=CVE-2023-30609) / GHSA-xv83-x443-7rmw
* Pick sensible default option for phone country dropdown ([\element-hq#10627](matrix-org/matrix-react-sdk#10627)). Fixes element-hq#3528.
* Relate field validation tooltip via aria-describedby ([\element-hq#10522](matrix-org/matrix-react-sdk#10522)). Fixes element-hq#24963.
* Handle more completion types in rte autocomplete ([\element-hq#10560](matrix-org/matrix-react-sdk#10560)). Contributed by @alunturner.
* Show a tile for an unloaded predecessor room if it has via_servers ([\element-hq#10483](matrix-org/matrix-react-sdk#10483)). Contributed by @andybalaam.
* Exclude message timestamps from aria live region ([\element-hq#10584](matrix-org/matrix-react-sdk#10584)). Fixes element-hq#5696.
* Make composer format bar an aria toolbar ([\element-hq#10583](matrix-org/matrix-react-sdk#10583)). Fixes element-hq#11283.
* Improve accessibility of font slider ([\element-hq#10473](matrix-org/matrix-react-sdk#10473)). Fixes element-hq#20168 and element-hq#24962.
* fix file size display from kB to KB ([\element-hq#10561](matrix-org/matrix-react-sdk#10561)). Fixes element-hq#24866. Contributed by @NSV1991.
* Handle /me in rte ([\element-hq#10558](matrix-org/matrix-react-sdk#10558)). Contributed by @alunturner.
* bind html with switch for manage extension setting option ([\element-hq#10553](matrix-org/matrix-react-sdk#10553)). Contributed by @NSV1991.
* Handle command completions in RTE ([\element-hq#10521](matrix-org/matrix-react-sdk#10521)). Contributed by @alunturner.
* Add room and user avatars to rte ([\element-hq#10497](matrix-org/matrix-react-sdk#10497)). Contributed by @alunturner.
* Support for MSC3882 revision 1 ([\element-hq#10443](matrix-org/matrix-react-sdk#10443)). Contributed by @hughns.
* Check profiles before starting a DM ([\element-hq#10472](matrix-org/matrix-react-sdk#10472)). Fixes element-hq#24830.
* Quick settings: Change the copy / labels on the options ([\element-hq#10427](matrix-org/matrix-react-sdk#10427)). Fixes element-hq#24522. Contributed by @justjanne.
* Update rte autocomplete styling ([\element-hq#10503](matrix-org/matrix-react-sdk#10503)). Contributed by @alunturner.
* Fix create subspace dialog not working ([\element-hq#10652](matrix-org/matrix-react-sdk#10652)). Fixes element-hq#24882
* Fix multiple accessibility defects identified by AXE ([\element-hq#10606](matrix-org/matrix-react-sdk#10606)).
* Fix view source from edit history dialog always showing latest event ([\element-hq#10626](matrix-org/matrix-react-sdk#10626)). Fixes element-hq#21859.
* element-hq#21451 Fix WebGL disabled error message ([\element-hq#10589](matrix-org/matrix-react-sdk#10589)). Contributed by @rashmitpankhania.
* Properly translate errors in `AddThreepid.ts` so they show up translated to the user but not in our logs ([\element-hq#10432](matrix-org/matrix-react-sdk#10432)). Contributed by @MadLittleMods.
* Fix overflow on auth pages ([\element-hq#10605](matrix-org/matrix-react-sdk#10605)). Fixes element-hq#19548.
* Fix incorrect avatar background colour when using a custom theme ([\#10598](matrix-org/matrix-react-sdk#10598)). Contributed by @jdauphant.
* Remove dependency on `org.matrix.e2e_cross_signing` unstable feature ([\element-hq#10593](matrix-org/matrix-react-sdk#10593)).
* Update setting description to match reality ([\element-hq#10600](matrix-org/matrix-react-sdk#10600)). Fixes element-hq#25106.
* Fix no identity server in help & about settings ([\element-hq#10563](matrix-org/matrix-react-sdk#10563)). Fixes element-hq#25077.
* Fix: Images no longer reserve their space in the timeline correctly ([\element-hq#10571](matrix-org/matrix-react-sdk#10571)). Fixes element-hq#25082. Contributed by @kerryarchibald.
* Fix issues with inhibited accessible focus outlines ([\element-hq#10579](matrix-org/matrix-react-sdk#10579)). Fixes element-hq#19742.
* Fix read receipts falling from sky ([\element-hq#10576](matrix-org/matrix-react-sdk#10576)). Fixes element-hq#25081.
* Fix avatar text issue in rte ([\element-hq#10559](matrix-org/matrix-react-sdk#10559)). Contributed by @alunturner.
* fix resizer only work with left mouse click ([\element-hq#10546](matrix-org/matrix-react-sdk#10546)). Contributed by @NSV1991.
* Fix send two join requests when joining a room from spotlight search ([\#10534](matrix-org/matrix-react-sdk#10534)). Fixes element-hq#25054.
* Highlight event when any version triggered a highlight ([\element-hq#10502](matrix-org/matrix-react-sdk#10502)). Fixes element-hq#24923 and element-hq#24970. Contributed by @kerryarchibald.
* Fix spacing of headings of integration manager on General settings tab ([\element-hq#10232](matrix-org/matrix-react-sdk#10232)). Fixes element-hq#24085. Contributed by @luixxiul.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A11y Help Wanted Extra attention is needed O-Occasional Affects or can be seen by some users regularly or most users rarely S-Major Severely degrades major functionality or product features, with no satisfactory workaround T-Defect
Projects
None yet
10 participants