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

aria-hidden="false" is unreliable for accessibility #4014

Closed
hollsk opened this issue Aug 11, 2024 · 0 comments · Fixed by #4074
Closed

aria-hidden="false" is unreliable for accessibility #4014

hollsk opened this issue Aug 11, 2024 · 0 comments · Fixed by #4074
Labels
type/accessibility Issues relating to accessibility (keyboard navigation, screenreaders, text contrast, etc.)
Milestone

Comments

@hollsk
Copy link

hollsk commented Aug 11, 2024

Current Behavior

There's an aria-hidden="false" on the main #app div, where most of the page content is loaded. This doesn't work reliably in assistive technology - it's just as likely to be interpreted as aria-hidden="true" as aria-hidden="false", so in spite of your consideration, some screen reader users (or voice input users, who also rely on the accessibility tree) still may not be able to see or interact with the main content at all 😅

Steps to Reproduce

  1. go to pretty much any page
  2. observe the aria-hidden attribute in the #app div (class and style attributes removed for clarity): <div id="app" aria-hidden="false">

Expected Behavior

no potential for unreliability!

Screenshots

No response

Environment

  • Flarum version: 1.8.5

Output of php flarum info

Output of "php flarum info", run this in terminal in your Flarum directory.

Possible Solution

The best way to treat aria-hidden is as if it were a boolean attribute instead, so when it's true, it says <div id="app" aria-hidden="true">, and when it's false it just says <div id="app">.

I'm not yet confident enough with Flarum to try submitting a pull request, but I'm hoping this is a simple enough fix that I'll be able to use it as a starter demonstration if someone is able to pick it up!

Additional Context

See the second warning note on the ARIA 2.1 spec for the aria-hidden state here (copied below): https://www.w3.org/TR/wai-aria-1.2/#aria-hidden

At the time of this writing, aria-hidden="false" is known to work inconsistently in browsers. As future implementations improve, use caution and test thoroughly before relying on this approach.

@SychO9 SychO9 added this to the 2.0 milestone Oct 22, 2024
@SychO9 SychO9 added type/accessibility Issues relating to accessibility (keyboard navigation, screenreaders, text contrast, etc.) and removed type/bug labels Oct 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type/accessibility Issues relating to accessibility (keyboard navigation, screenreaders, text contrast, etc.)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants