Custom JavaScript/ARIA Widgets Flashcards

1
Q

True or false: ARIA is useful only to assistive technologies.

A

True

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

True or false: You can refer to multiple IDs with aria-labelledby, allowing you to refer to multiple selections of text and apply them all together to label an element

A

True

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Must (not), Should (not), May (not)

The application role _____ be used anywhere where screen reader users need to use page navigation features

A

Must not

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Must (not), Should (not), May (not)

Meaningful non-focusable content in an application region _____ be programmatically associated with focusable elements, or _____ be made accessible to screen readers in some other way.

A

Must, Must

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Must (not), Should (not), May (not)

Non-focusable items _____ be made focusable just for the sake of making them readable to screen readers.

A

Should not

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

True or false: A screen reader would read the following < h1 > as “Heading level 1: Heading Text”.

< h1 role=”presentation” >Heading Text< /h1 >

A

False. role=”presentation” cancels out the semantic label, so it would just read ‘Heading Text’.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is the document ARIA role?

A

When in a document region, screen readers allow users to use keyboard shortcuts to navigate by elements (headings, landmarks, tables, lists, etc.), and allow users to access all aspects of the text, including the spelling of words. The only reason to actually write role=”document” is to create a document region inside some other type of region, such as within an application region.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the application ARIA role?

A

Application mode exists to allow developers complete freedom over programming the behaviors of a widget, including keyboard event handlers. Not recommended because it can go wrong easily.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is the presentation ARIA role?

A

Marking a section as role=”presentation” essentially cancels the native role of the element and turns it into the equivalent of a < span > or < div >, which are neutral, un-semantic tags that convey no role.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is the definition ARIA role?

A

It can mark a section of text as a definition. Not recommended: use < dl >structure instead.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is the note ARIA role?

A

The note role is generally meant to be read in the context of the rest of the content around it.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is the directory ARIA role?

A

The directory role is for designating a table of contents or other similar directory structure.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Must (not), Should (not), May (not)

If the aria-describedby text is critical, it _____ be available to sighted users, and _____ be available in the document context (not just when the focus is on the element with the aria-describedby attribute) as text readable by screen readers.

A

Must, Must

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is the aria-live attribute?

A

Allows you to make announcements to screen reader users, independent of what the user does.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

True or false: it’s okay to turn off the visual focus indicator.

A

FALSE, unless you provide a suitable alternative

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

True or false: ARIA is a programming language that communicates information like names, roles, and values to screen readers.

A

False

17
Q

All of the following are ways to communicate the names of elements, EXCEPT:

A. aria-labelledby
B. < label >
C. role=”name”
D. aria-label

A

C. role=”name”

18
Q

True or False: aria-label and aria-labelledby consistently work for labelling non-semantic elements such as < div > and < span >.

A

False

19
Q

The purpose of ARIA roles is to:

A. Provide the name of the element.
B. Define what the element is.
C. Identify the state of the element.
D. None of the above.

A

B. Define what the element is.

20
Q

Which type of ARIA roles are used to convey the layout of a web page?

A. Landmark roles
B. Abstract roles
C. Pseudo HTML roles.
D. Widget roles

A

A. Landmark roles

21
Q

True or False: It is best to use actual HTML elements instead of pseudo HTML roles so developers don’t always have to create functionality for elements by using JavaScript.

A

True

22
Q

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

A

True

23
Q

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

A

D. Document role

24
Q

ARIA attributes like aria-expanded, aria-checked, and aria-busy convey what information to screen reader users?

A. The names of elements.
B. The states of elements.
C. The roles of elements.
D. None of the above.

A

B. The states of elements.

25
Q

Which ARIA attribute is used to provide additional information about an element?

A. aria-labelledby
B. aria-describedby
C. role=”description”
D. aria-label

A

B. aria-describedby