Show and hide techniques with HTML and CSS

Question 1

What does the HTML5 attribute hidden do?

Answer 1

The HTML5 attribute hidden removes the content and the content wrapped inside that element completely from sight, from the tab order and from the accessibility tree, as if it doesn’t exist. The content is hidden for all users.

tab order: hidden
screen reader: no announcement.

https://www.a11y-collective.com/courses/accessible-code/lessons/show-and-hide-techniques/topics/hide-content-from-sight/

Question 2

What does the CSS property display: none; do ?

Answer 2

It removes the content and the content wrapped inside that element completely from sight, from the tab order and from the accessibility tree, as if it doesn’t exist. The content is hidden for all users.

tab order: hidden
screen reader: no announcement.

https://www.a11y-collective.com/courses/accessible-code/lessons/show-and-hide-techniques/topics/hide-content-from-sight/

Question 3

What is the difference between HTML5 attribute hidden and CSS property display: none?

Answer 3

The difference between the two is that when a stylesheet is disabled, display: none; doesn’t work anymore, but the hidden attribute does still work.

https://www.a11y-collective.com/courses/accessible-code/lessons/show-and-hide-techniques/topics/hide-content-from-sight/

Question 4

How do you hide content from a screen reader by not from sight?

Answer 4

This can be done using the ARIA attribute
aria-hidden=”true”.

Question 5

Which CSS properties hide an element, and the content inside, from a screen reader? Check all that apply.

A. display: none;
B. visibility: hidden;

C. opacity: 0;

Answer 5

A. display: none;
B. visibility: hidden;


Question 6

Which CSS properties remove an element, and the content inside, from the tab order? Check all that apply.

A. display: none; 

B. visibility: hidden;
C. opacity: 0;

Answer 6

A. display: none; 

B. visibility: hidden;

Question 7

aria-hidden=”true” … Check all that apply:

A. hides an element, and the content inside, from sight
B. hides an element, and the content inside, from a screen reader
C. removes an element, and the content inside, from the tab order

Answer 7

. hides an element, and the content inside, from a screen reader

Question 8

The screen-reader-text class in WordPress (check all that apply):

A. hides an element, and the content inside, from sight

B. hides an element, and the content inside, from a screen reader
C. removes an element, and the content inside, from the tab order

Answer 8

A. hides an element, and the content inside, from sight