9

I'm just wondering whether I should expect browsers and assistive technilogy circa January 2015 to use speak:none in a manner equivalent to setting aria-hidden="true". I'd like to indicate that some semi-opaque text should be ignored, and am wondering whether I can do it in one operation (just adding a class that sets the opaque style and speak:none, rather than adding the class and setting the aria-hidden attribute).

3
  • I'm not sure I understand the scenario; is the text here obscured by some modal UI (eg lightbox); or is this just text that is visually hidden by setting opacity to fully transparent instead of (for whatever reason) using display:none or visibility:hidden, which are the usual ways to hide content?
    – BrendanMcK
    Jan 4, 2015 at 19:18
  • @BrendanMcK, the scenario here is that the text is greyed out in a way that makes it visually irrelevant. I would like it to be irrelevant to accessibility devices as well.
    – Mike Godin
    Jan 6, 2015 at 12:18
  • If it's really "visually irrelevant", then aria-hidden sounds like a good match. Hard to know for sure without seeing the UI perhaps; as a counter-example, disabled buttons are typically greyed-out, but still visible and still available to screenreaders, since they're still relevant, just not actionable at that specific point in time (eg because not all fields n a form have yet been filled in).
    – BrendanMcK
    Jan 6, 2015 at 21:47
9

There does not seem to be reliable data on support to speak, but it seems to be unimplemented.

Independently of the implementation status, speak: none is not equivalent to aria-hidden="true".

According to the CSS Speech Module CR, the speak property “determines whether or not to render text aurally”, i.e. audibly.

According to the ARIA specification, aria-hidden “indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author” (italic in the original).

Thus, aria-hidden="true" does not cause anything; it just declares that the author has hidden the element. And it relates to all kinds of rendering: audible, visible, tactile, or whatever modalities might be invented in the future.

6
  • Thank you for pointing out the difference in meaning between the two methods and for the quote from the ARIA specification. Now I have to wonder wherever aria-hidden="true" is appropriate for text that has been rendered semantically irrelevant through opaqueness, yet is still somewhat visible. Ideally, the text would just be completely hidden, but in this case I don't have control of the design, only the implementation.
    – Mike Godin
    Jan 3, 2015 at 13:52
  • @MikeGodin, if it is semantically irrelevant (i.e. meaningless), I think it should have role=presentation set on it.
    – Jukka K. Korpela
    Jan 3, 2015 at 14:05
  • @JukkaK.Korpela - role=presentation does not mean that the text content is irrelevant/meaningless; it only means that the semantics of the tag itself are to be ignored: so, for example, <button role="presentation">OK</button> would be treated as plain text OK or as <span>OK</span>, and not as a button.
    – BrendanMcK
    Jan 4, 2015 at 19:06
  • 1
    aria-hidden="true" is actually perfect for hiding content outright from screenreaders; though have to be careful to use it appropriately - see caveats in the spec. If, for some other reason, text was made invisible to sighted users by setting opacity to transparent instead of the usual techniques of using display:none/visibility:hidden, then setting aria-hidden="true" would also ensure screenreaders ignored it. aria-hidden is also very useful for hiding the "grayed out" contend behind modal dialogs/lightboxes.
    – BrendanMcK
    Jan 4, 2015 at 19:39
  • 1
    Be aware that aria-hidden="true" doesn't stop keyboards from being able to focus on elements so slapping aria-hidden="true" onto something doesn't automatically get you over the accessibility line when you set a menu or something to opacity: 0. You also need to set all interactive elements inside the hidden element to tabindex="-1".
    – Daniel Tonon
    Jun 15, 2018 at 12:19
2

Use this combination:

  • speak: never;
  • speak-as: spell-out;

Values for speak

  • auto: As long as the element is not display: block and is visibility:visible, text will be read aurally.
  • never: text will not be read aurally
  • always: text will be read aurally, regardless of display value or ancestor values of speak.

Values for speak-as Related to speak as it gets into how the text will be read:

  • normal: Takes the browser’s default speak settings.
  • spell-out: Instructs the browser to spell a properties content instead of speaking out full words.
  • digits: Reads numbers one at a time, like 69 would be read “six nine”. Nice.
  • literal-punctuation: Spells out punctations (like semicolons) rather than treating them like pauses.
  • no-punctuation: Entirely skips punctuation.
-1

To answer the intent of my original question -- I was wondering if I could add a class that sets the opaque style and disables the text from screen readers, rather than add the class and also set the aria-hidden attribute.

What I ended up doing was to set only the aria-hidden attribute, then in my css use [aria-hidden] instead of a class name to set the opaque style.

p[aria-hidden="true"] {
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
  cursor: default;
}
<p aria-hidden="true">Ignore this text!</p>
<p>See this text!</p>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.