Permutations of @aria-hidden, visibility:hidden, display:none, @hidden

The ARIA 1.0 CR testable statements table requires to:

"Test permutations of aria-hidden, display:none, visibility:hidden, and html @hidden to see what UAs are doing"

This document provides markup for these permutations. In each case, both a container and non-container element are provided with the various permuations. The rationale behind using a container is to test the 'hidden' state of the container's children when the container is 'hidden'.

No @aria-hidden, visibility:hidden, display:none, nor @hidden

This is the base line case where none of the ways of hiding an element are used.

Vanilla button element within a blue box:

Vanilla toolbar within a blue box:

aria-hidden='true'

button-aria-hidden-true:

toolbar-aria-hidden-true:

visibility:hidden

button-visibility:hidden:

toolbar-visibility:hidden:

display:none

button-display:none:

toolbar-display:none:

@hidden

button-hidden:

toolbar-hidden:

aria-hidden=true/false and visibility:hidden

button-aria-hidden-true-visibility:hidden:

button-aria-hidden-false-visibility:hidden:

toolbar-aria-hidden-true-visibility:hidden:

toolbar-aria-hidden-false-visibility:hidden:

aria-hidden=true/false and display:none

button-aria-hidden-true-display:none:

button-aria-hidden-false-display:none:

toolbar-aria-hidden-true-display:none:

toolbar-aria-hidden-false-display:none:

aria-hidden=true/false and @hidden

button-aria-hidden-true-hidden:

button-aria-hidden-false-hidden:

toolbar-aria-hidden-true-hidden:

toolbar-aria-hidden-false-hidden:

Joseph Scheuhammer, 16-Sep-2011 (clown@alum.mit.edu).