Javascript and ARIA

Question 1

What are three ways to notify blind users that content has changed?

Answer 1

1. load a new page (or re-load current page)
2. send the focus to the new content
3. use ARIA live announcements

Question 2

True or False: when loading content via AJAX, you should send focus to the new content immediately.

Answer 2

False

You should add a 1-2 second delay before sending focus to ensure the DOM has finished loading the content.

Question 3

When moving focus to an element that is not focusable, it is important to include which one of the following attributes on the container:

A. tabindex=”-1”
B. tabindex=”0”
C. tabindex=”1”
D. aria-focus=”true”

Answer 3

A. tabindex=”-1”

Question 4

Which of the following is NOT a consideration when moving focus to new content:

A. The container on which focus is set must not be empty.
B. Focus should not move unexpectedly.
C. The element that triggers the focus change must include aria-haspopup=”true”.
D. Sending focus to AJAX content must be the last event.

Answer 4

C. The element that triggers the focus change must include aria-haspopup=”true”.

Question 5

True or False: The ARIA live region must be present on the page and must be empty before inserting the content to be announced.

Answer 5

True

Question 6

If one of your pages employs a time-limit, which of the following are recommended?

A. Ensure the time limit is greater than four hours
B. Provide a warning when the time limit is about to expire
C. Provide an option to extend the session
D. A and B
E. B and C

Answer 6

B and C

B. Provide a warning when the time limit is about to expire
C. Provide an option to extend the session

Question 7

True or false: When a user allows a session to time out, it is not necessary to save data because the user would have extended the session if they intended to continue.

Answer 7

False

You should usually save the data, unless there are privacy or security reasons not to.

Question 8

Accessibility problems associated with automatically refreshing or reloading a page include:

A. Users may not have time to read content before it disappears
B. Users may lose their place on the page
C. Users may have a seizure
D. A and B
E. All of the above

Answer 8

A and B

A. Users may not have time to read content before it disappears
B. Users may lose their place on the page

Question 9

What are the two biggest issues with using AJAX?

Answer 9

1. Knowing when and how to notify screen reader users about the new content
2. Focus management

Question 10

How can you ensure that infinite scrolling doesn’t block access for keyboard users?

Answer 10

• make it the last item in the DOM
• only load new content on user request

Question 11

While portions of a page are still loading (lazy loading):

A. Screen Readers should announce every time new content has loaded.
B. Placeholders for content that is still loading should inform users the content is being loaded.
C. Newly loaded content should receive screen reader focus.
D. None of the above; this technique should be avoided.

Answer 11

B. Placeholders for content that is still loading should inform users the content is being loaded.

Question 12

Regarding single-page applications, which of the following statements is FALSE?

A. Screen reader users must be made aware of new content loaded on the page.
B. Focus management is often an essential part of making a single-page application accessible.
C. The <title> of a single-page application should not be updated when the user has selected a link that causes an AJAX event.
D. A user must be able to use the browser's back and forward functionality as would be expected in a non-single-page application.</title>

Answer 12

C. The <title> of a single-page application should not be updated when the user has selected a link that causes an AJAX event.</title>

Question 13

Why is focus handling particularly difficult in React?

Answer 13

The React philosophy is that components shouldn’t know the implementation of other components, so accessing the DOM directly breaks the abstraction.

You get around this by using useRef, which stores a reference to the actual DOM element.

Question 14

What information does ARIA communicate to screen readers?

Answer 14

1. labels or names for items
2. roles
3. states of dynamic/interactive components
4. relationships between items
5. live announcements in real-time that are passed on to screen readers

Question 15

When should you use aria-labelledby?

Answer 15

to link the element with its label so that screen readers can associate the two programmatically in the way that sighted users associate the two visually

Question 16

What goes in aria-labelledby?

Answer 16

one or more ids of other elements (the ones that act as a label for the current one)

Question 17

What’s the difference between aria-labelledby and aria-describedby?

Answer 17

aria-labelledby should replace the original text of the element

aria-describedby should provide supplemental information

Question 18

When should you use aria-label?

Answer 18

When you need a label that’s only available to screen readers (it’s like alt text).

Beware that it will replace any text the element already has.

Question 19

What does ARIA stand for?

Answer 19

Accessible Rich Internet Applications

Question 20

What is an example of an ARIA property?

A. Role-menuitem
B. Aria-selected
C. Aria-labelledby
D. Aria-checked

Answer 20

C. Aria-labelledby

Question 21

Who are the primary users of ARIA?

Answer 21

screen readers

Question 22

Which ARIA roles automatically trigger application mode?

Answer 22

role=”“dialog””
role=”“alertdialog””
role=”tablist”

Question 23

What does role="presentation" do?

Answer 23

cancels the native role of the element and turns it into the equivalent of a <span> or <div>

Question 24

When should an aria-live region be added to the DOM?

Answer 24

an empty live region container should be added on page load

the accessibility api needs to register the region as existing before you add any content to it

Question 25

Describe the basic ARIA keyboard interaction pattern.

Answer 25

Tab to the widget; use arrow keys within it

Question 26

True or False: Assigning role=”application” to a region disables most screen reader keystrokes within the region to allow developers to create custom keystrokes.

Answer 26

True

Question 27

Which role should be assigned within an application region to give screen readers access to regular text in the region?

A. Presentation role
B. Main role
C. Note role
D. Document role

Answer 27

D. Document role

Question 28

What happens when you assign a custom role to an element that already has semantic meaning?

For example: <li role=”button”>

Answer 28

the custom role completely
overrides the native role

the example will be treated as a button and not a list item

Question 29

Define an ARIA alert role.

Answer 29

A type of live region with important, and usually time-sensitive, information.

• assertive
• should close automatically since they don’t take focus
• use alertdialog if you want element to get focus

Question 30

Define an ARIA combobox role.

Answer 30

An input that controls another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the input.

• the popup element associated with a combobox MUST have a role of listbox, tree, grid, or dialog