aria-hidden="true", hidden and display:none tests

← Index page

These tests are to determine how aria-hidden="true" and hidden attributes, as well as the display: none CSS property are applied visually as well as how they are announced to screen readers.

The aria-hidden="true" attribute

The following information should be visible on screen but not announced to screen readers.

.

Code

<span aria-hidden="true">Green spider</span>

Dummy link after

The hidden attribute

The following information should not be visible on screen and not announced to screen readers.

.

Code

<span hidden>Yellow frog</span>

Dummy link after

The display:none CSS property/value

The following information should not be visible on screen and not announced to screen readers.

Red wolf.

Code

<span style="display: none;">Red wolf</span>

← Index page