Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is the css setting speak:none now equivalent to aria-hidden="true"?

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).

like image 635
Mike Godin Avatar asked Jan 03 '15 04:01

Mike Godin


People also ask

Can I set aria hidden in CSS?

For this, an accessible hiding CSS class can be used. Finally, you may want to display elements on the screen but make sure they are not vocalized. In this case, you can use an ARIA attribute ( aria-hidden ).

What is aria hidden true CSS?

Adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree. This can improve the experience for assistive technology users by hiding: Purely decorative content, such as icons or images.

Do you need aria hidden with display none?

Hiding content from all users If you want to hide content from all users, use the HTML5 hidden attribute (along with CSS display:none for browsers that do not yet support hidden) There is no need to use aria-hidden.

Is the aria hidden attribute is equivalent to hidden attribute of HTML5?

Difference between HTML hidden and aria-hidden: HTML hidden hides everything from the user. By using HTML hidden, you can remove focusable content from the browser navigation. While using ARIA hidden, we don't remove the content from the browser. You can apply CSS style of display:none in HTML hidden.


2 Answers

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.

like image 185
Jukka K. Korpela Avatar answered Nov 15 '22 21:11

Jukka K. Korpela


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.
like image 40
Yurii P. Avatar answered Nov 15 '22 21:11

Yurii P.