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

Add visibility: aural #13

jhabdas opened this Issue May 21, 2017 · 2 comments


None yet
2 participants
Copy link

jhabdas commented May 21, 2017

I'm not sure exactly where to place this issue, so here you go. The Web needs a simple way to hide text for screen readers. We've been dealing with hacks for years. WIA-ARIA use is spotty at best. And the newish hidden attribute doesn't serve this purpose.

Let's introduce a new value for visibility, simply call it aural and hide it always from the screen before another 10 years of hacks get added to the Web.


This comment has been minimized.

Copy link

jhabdas commented May 21, 2017


This comment has been minimized.

Copy link

Malvoz commented May 15, 2018

This has been discussed in:

I think we can agree hiding/showing content from screen readers needs standardization. Even if one would not agree, this is being done on numerous sites to enhance the experience, or to hide extraneous information from screen readers, and...

The current solutions are flaky.

Current solutions used to convey or hide content from screen readers includes (sometimes a mix) of aria-hidden, aria-label, the title attribute and the widely adopted ".visually-hidden" or ".sr-only" CSS module as recommended by WebAim and used by Google (+ AMP), Bootstrap and others - which has seen various issues (depending on the specific CSS implementation) causing:

  • Screen readers to announce text out of order.
  • "Smushed" unreadable text.
  • Repaints in overflowing elements.
  • Scrollbars appear on the x-axis due to negative position using offsets.
  • Google's AMP-project documents their ".i-amphtml-screen-reader" requires a minimum width and height of 2px for buttons to be operable using VoiceOver on Safari.
  • etc.

In other words, the non-standard CSS approach is not a stable solution.

As mentioned, we already have aria-hidden to hide content. And aria-label to convey it.
Why are we using CSS to do the same job?

  • aria-labels can not include interactive elements, a common pattern for skipnav-links, or regular links beneficial for screen reader users only.
  • aria-* requires javascript to be altered.

Is what I can think of for now.

What else do we have?

The speak property allows authors to convey content independently of its display and visibility property. Unfortunately, AFAIK the property has no browser implementations as of today and honestly, I don't know how speak affects the accessibility tree...

However, the proposed box-suppress property may be used in conjunction with speak.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment