Re: use of aria-hidden to provide a text description not visible on the page.

On Sep 14, 2010, at 1:40 PM, Sailesh Panchang wrote:

> I have been reading this and thinking why should one use this attribute when CSS properties display:none and other properties to place content offscreen are well supported by browsers and  AT.
> Secondly, hiding and revealing is a presentational function which is best done by CSS. Using an ARIA attribute to do this  in the HTML code is like  using  a font / color attribute in HTML, is it not?

Not at all. All of the ARIA attributes have semantic meanings. Please see the spec for what those meanings are, as well as why one should use them. If, after reading the relevant portion of the spec, it's not clear when or why to use something, please send a comment or clarification request to public-pfwg-comments@w3.org. Relevant portion of the spec follows.

Cheers,
James

http://www.w3.org/WAI/PF/aria/complete#aria-hidden
aria-hidden (state)

Indicates that the element is not visible or perceivable to any user as implemented by the author. Also see aria-disabled.

If an element is only visible after some user action, authors MUST set the aria-hidden attribute to true. When the element is presented, authors MUSTset the aria-hidden attribute to false or remove the attribute, indicating that the element is visible. Some assistive technologies access WAI-ARIAinformation directly through the DOM and not through platform accessibility supported by the browser. Authors MUST set aria-hidden="true" on content that is not displayed, regardless of the mechanism used to hide it. This allows assistive technologies or user agents to properly skip hidden elements in the document.

It is recommended that authors key visibility of elements off this attribute, rather than change visibility and separately have to remember to update thisproperty. CSS 2 provides a way to select on attribute values ([CSS]). The following CSS declaration makes content visible unless the aria-hiddenattribute is true; scripts need only update the value of this attribute to change visibility:

[aria-hidden="true"] { visibility: hidden; }
Note: At the time of this writing, this CSS example, while technically correct, will not redraw styles properly in some browsers if the attribute's value is changed dynamically. It may be necessary to toggle a class name, or otherwise force the browser to redraw the styles properly.

Note: Authors are reminded that visibility:hidden and display:none apply to all CSS media types; therefore, use of either will hide the content from assistive technologies that access the DOM through a rendering engine. However, in order to support assistive technologies that access the DOM directly, or other authoring techniques to visibly hide content (for example, opacity or off-screen positioning), authors need to ensure the aria-hidden attribute is always updated accordingly when an element is shown or hidden.

Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by reducing redundancy. Authors using aria-hidden to hide visible content from screen readers MUST ensure that identical or equivalent meaning and functionality is exposed to assistive technologies.

Note: Authors are advised to use extreme caution and consider a wide range of disabilities when hiding visibly rendered content from assistive technologies. For example, a sighted, dexterity-impaired individual may use voice-controlled assistive technologies to access a visual interface. If an author hides visible link text "Go to checkout" and exposes similar, yet non-identical link text "Check out now" to the accessibility API, the user may be unable to access the interface they perceive using voice control. Similar problems may also arise for screen reader users. For example, a sighted telephone support technician may attempt to have the blind screen reader user click the "Go to checkout" link, which they may be unable to find using a type-ahead item search ("Go to…").

Characteristics of aria-hidden
Characteristic	Value
Used in Roles:	All elements of the base markup
Value:	true/false
Values of aria-hidden
Value	Description
true:	Indicates that this section of the document and its children are hidden from the rendered view.
false (default):	Indicates that this section of the document is rendered.