ARIA

Question 1

What does ARIA stand for?

Answer 1

“Accessible Rich Internet Applications”

Question 2

The first rule of ARIA use?

Answer 2

If you can use a native HTML element or attribute with the semantics and behavior you require already built in, USE THAT instead of re-purposing an element and adding an ARIA role.

Question 3

The second rule of ARIA use?

Answer 3

Do not change native semantics unless you really. have to (ex: do not do h2, do div/h2> to create a heading that is also a tab).

Question 4

The third rule of ARIA use?

Answer 4

All interactive ARIA controls must be usable with the keyboard. (ex: if using role=button the element must be able to receive focus and user must be able to activate the action via keyboard)

Question 5

The fourth rule of ARIA use?

Answer 5

Do not use role=”presentation” or aria-hidden=”true” on a focusable element. It may result in users being able to focus on ‘nothing’.

Question 6

The fifth rule of ARIA use?

Answer 6

All interactive elements must have an accessible name.

Question 7

What does adding a role do to the native semantics?

Answer 7

Adding ARIA roles overrides the native role semantics.

Question 8

What does adding a role NOT do?

Answer 8

Adding an ARIA role will nto make an element look or act differently for people NOT using assistive technology. It will not change the behaviors, states and properties of the host element.

Question 9

What happens when you use role=presentation / role=none

Answer 9

This role removes the semantics from the element that it is on. It becomes a node in the DOM tree with no semantic meaning.

Question 10

What is the behavior of children inside tags that have role set to presentation or none?

Answer 10

Required elements will also have their semantics removed (like tr, td inside a table with role=none).
Non-requirement children nested inside the element keep their semantics.

Question 11

T/F: This is the correct way to implement and label a background image:
<div>
<span class="background-image"> </span>
[all the rest of my content]
</div>

Answer 11

True- do not put a CSS background image inside a div that contains content- better to use an empty span and an aria-label with role=image.

Question 12

T/F: This is the correct way to implement and label a background image:

<div>
[all the rest of my content]
</div>

Answer 12

False- do not put a CSS background image inside a div that contains content- better to use an empty span and an aria-label with role=image.

Question 13

What’s wrong with the following tag?

Press Me

Answer 13

Setting the role is redundant since the element is already a button!