Warning:
This wiki has been archived and is now read-only.
ChangeProposals/DisallowARIAReferencesToHiddenElements
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.
Contents
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>
. Thefor
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 thefor
attribute pointing to an element that is not hiddenlegend
elements for a fieldset that is not hiddenlabel
elements with thefor
attribute pointing to an element that is not hidden- elements referenced by
aria-labelledby
,aria-describedby
, oraria-flowsto
attributes on elements that are not hiddenAuthors 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