Change Proposal

Summary

Disallow ARIA references to hidden elements, while making them continue to work for users as best we can. Markup that creates references to hidden elements for ARIA processing tends to create usability problems for users and maintainability problems for authors.

Rationale

Describe the reason for the change. What problems does the proposal address, and how does the proposal makes things better?

Details

Replace:

All <a href=#html-elements>HTML elements</a> may have the <a href=#the-hidden-attribute>hidden</a> content attribute set. The <a href=#the-hidden-attribute>hidden</a> attribute is a <a href=#boolean-attribute>boolean attribute</a>. When specified on an element, it indicates that the element is not yet, or is no longer, directly relevant to the page's current state, or that it is being used to declare content to be reused by other parts of the page as opposed to being directly accessed by the user. User agents should not render elements that have the <a href=#the-hidden-attribute>hidden</a> attribute specified.

In the following skeletal example, the attribute is used to hide the Web game's main screen until the user logs in:

  <h1>The Example Game</h1>
  <section id="login">
   <h2>Login</h2>
   <form>
    ...
    <!-- calls login() once the user's credentials have been checked -->
   </form>
   <script>
    function login() {
      // switch screens
      document.getElementById('login').hidden = true;
      document.getElementById('game').hidden = false;
    }
   </script>
  </section>
  <section id="game" hidden>
   ...
  </section>

The <a href=#the-hidden-attribute>hidden</a> attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use <a href=#the-hidden-attribute>hidden</a> to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked <a href=#the-hidden-attribute>hidden</a>, it is hidden from all presentations, including, for instance, screen readers.

Elements that are not themselves <a href=#the-hidden-attribute>hidden</a> must not <a href=#hyperlink>hyperlink</a> to elements that are <a href=#the-hidden-attribute>hidden</a>. The for attributes of <a href=#the-label-element>label</a> and <a href=#the-output-element>output</a> elements that are not themselves <a href=#the-hidden-attribute>hidden</a> must similarly not refer to elements that are <a href=#the-hidden-attribute>hidden</a>. In both cases, such references would cause user confusion.

Elements and scripts may, however, refer to elements that are <a href=#the-hidden-attribute>hidden</a> in other contexts.

For example, it would be incorrect to use the <a href=#attr-hyperlink-href>href</a> attribute to link to a section marked with the <a href=#the-hidden-attribute>hidden</a> attribute. If the content is not applicable or relevant, then there is no reason to link to it.

It would be fine, however, to use the ARIA aria-describedby attribute to refer to descriptions that are themselves <a href=#the-hidden-attribute>hidden</a>. While hiding the descriptions implies that they are not useful alone, they could be written in such a way that they are useful in the specific context of being referenced from the images that they describe.

Similarly, a <a href=#the-canvas-element>canvas</a> element with the <a href=#the-hidden-attribute>hidden</a> attribute could be used by a scripted graphics engine as an off-screen buffer, and a form control could refer to a hidden <a href=#the-form-element>form</a> element using its <a href=#attr-fae-form>form</a> attribute.

Elements in a section hidden by the <a href=#the-hidden-attribute>hidden</a> attribute are still active, e.g. scripts and form controls in such sections still execute and submit respectively. Only their presentation to the user changes.

The hidden IDL attribute must <a href=#reflect>reflect</a> the content attribute of the same name.

with:

All <a href=#html-elements>HTML elements</a> may have the <a href=#the-hidden-attribute>hidden</a> content attribute set. The <a href=#the-hidden-attribute>hidden</a> attribute is a <a href=#boolean-attribute>boolean attribute</a>.

User agents must not render hidden elements except as required by ARIA processing, for example when calculating accessible names and descriptions for other elements. When the hidden attribute is specified on an element, user agents must ignore any aria-hidden property set false on the same element for the purposes of ARIA processing as they are in direct semantic conflict.

Authors must not create ARIA references between non-hidden elements and elements or descendants of elements with the hidden attribute specified

For example, it would be incorrect to use the hidden attribute to hide:

• elements that are the destination of hyperlinks that are not hidden
• label elements with the for attribute pointing to an element that is not hidden
• legend elements for a fieldset that is not hidden
• label elements with the for attribute pointing to an element that is not hidden
• elements referenced by aria-labelledby, aria-describedby, or aria-flowsto attributes on elements that are not hidden

Authors who wish to provide a hidden accessible name for an element may use other techniques.

When sighted users might find it useful to see accessible names when author CSS is not applied, elements providing accessible names may be hidden with CSS:

<label style="display:none" for=st>Search terms:</label><input type=search id=st name=st>

If authors wish to hide accessible names even in this scenario, they may use aria-label:

<input type=search id=st name=st placeholder="Search terms" aria-label="Search terms"><button>Search</button>

Note that older user agents and assistive technologies may not expose text hidden with these techniques as accessible names. For widest backwards compatibility, authors may use CSS to absolutely position text off-screen left or right:

<label style="position: absolute; left: -9999999px" for=st>Search terms:</label><input type=search id=st name=st>

Impact

Positive Effects

• List advantages

Negative Effects

• List disadvantages

Conformance Classes Changes

Describe what conformance classes will have to change.

Risks

Describe any risks.

References

• List references