Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

IAAP WAS Certification + > Custom JavaScript / ARIA Widget > Flashcards

Custom JavaScript / ARIA Widget Flashcards

1
Q

What exactly is ARIA?

A

ARIA (Accessible Rich Internet Application) is the acronym for Accessible Rich Internet Application.

In other words:
ARIA has no procedural logic or interactivity on its own. To create a interactive widget, you need to use JavaScript to give the content functionality, and you use ARIA to label things appropriately with names, roles, states, properties, and relationships.

ARIA is essentially an API for communicating this information to screen readers.

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

What can ARIA do?

A

labels or names for items (e.g. using aria-label or aria-labelledby or similar)

roles, role=”navigation”, role=”main” etc.

states of dynamic/interactive components (e.g. aria-selected=”true”, aria-expanded=”true”, aria-hidden=”true”)

properties of items (e.g. aria-haspopup=”true”)

relationships between items (e.g. aria-owns, aria-controls, both of which describe a kind of parent-child relationship where one item owns or controls another)

live announcements in real-time that are passed on to screen readers

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

True or False
If there is an aria-labelledby attribute, the text it refers to will override all other name and label methods.

A

True

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

In practice, screen reader support for aria-label and aria-labelledby is best on which elements?

A

Focusable elements (<a>, <input></input>, etc.). Support is not as good on non-focusable elements (<p>, <div>, <span>, <h1>, etc.).</span></a>

Elements with semantic meaning, as opposed to the elements that do not have semantic meaning (like <div> and <span>).</span>

Application regions (role=”application”). But be very careful with application regions, because they disable most of the screen reader’s regular keyboard shortcuts.

on elements inside an application region (e.g. <div role="application">)

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

What landmark regions do you know?

What native HTML Landmarks?

A

Available landmark regions include:

application
banner
complementary
contentinfo
form
main
navigation
search

HTML 5 defines landmarks as well, with such tags as:

<header> (equivalent to role="banner")
<nav> (equivalent to role="navigation")
<main> (equivalent to role="main")
<aside> (equivalent to role="complementary")
<footer> (equivalent to role="contentinfo")
</footer></aside></main></nav></header>

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

What are the most important ARIA Roles?

A

alert
alertdialog
application
dialog
group
log
marquee
menu
menubar
menuitem
menuitemcheckbox
menuitemradio
progressbar
separator
slider
spinbutton
status
tab
tablist
tabpanel
timer
toolbar
tooltip
tree
treegrid
treeitem

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

pseudo-HTML roles

A

button
checkbox
columnheader
combobox
contentinfo
form
grid
gridcell
heading
img
link
listbox
listitem
option
radio
radiogroup
row
rowgroup
rowheader
scrollbar
textbox

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
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</label>

A

C. role=”name”

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

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

A

false

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
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

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

True or False: The difference between aria-live=”assertive” and aria-live=”polite” is that aria-live=”assertive” waits for a screen reader to finish its current statement before announcing new content.

A. True
B. False

A

False

18
Q

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

A

False

19
Q

True or False: ARIA was invented to increase screen reader accessibility, especially for interactive scripts.

A

True

20
Q

There are 82 ARIA roles. Each role falls into a category.

Do you know these categories?

A
  1. Abstract (don’t use these)
  2. Widget
  3. Document structure
  4. Landmark
  5. Live region
  6. Window
21
Q

What defines WAI ARIA?

A

It defines attributes that can be added to standard HTML to define the name, role and values (Properties and states) of elements, especially for custom widgets.

22
Q

What are characteristics of aria-label?

A: Invisible
B: Related to the ID of another element
C: Contains a string
D: Does not allow the text to be clicked
E: Defines a new name for the element, which usually comes from its content
F: A,C,D,E

A

F: A,C,D,E

A: Invisible
C: Contains a string
D: Does not allow the text to be clicked
E: Defines a new name for the element, which usually comes from its content

23
Q

What are characteristics of aria-labelledby?

A: Defines a new name for the element, which usually comes from its content
B: Related to the ID of another element
C: Can relate multiple ids from different elements
D: The related texts are normally visible in the page
E: Replace the element name presented to assistive technologies that usually comes from its content
F: B,C,D,E

A

F: B,C,D,E

B: Related to the ID of another element
C: Can relate multiple ids from different elements
D: The related texts are normally visible in the page
E: Replace the element name presented to assistive technologies that usually comes from its content

24
Q

What are characteristics of aria-describedby?

A: Relates the id of another element.
B: Provide additional information to the element
C: Invisible
D: A, B

A

A: Relates the id of another element.
B: Provide additional information to the element

25
Q

True or Fales: A button can get the role “heading” for example:

<button>Für Screenreader ist das jetzt eine Überschrift</button>

im Button Tag steht role=”heading”. Aus irgendwelchen Gründen wird das oben nicht angezeigt

A

false

A button is a component that allows interaction. A heading, on the other hand, is a structuring element that does not allow interaction in the browser. Therefore, a button must not be given the heading role.

26
Q

A button should also be marked as a heading (e.g. in an accordion), which construct is correct?

A: <button role=”heading”.>Für Screenreader ist das jetzt eine Überschrift</button>

B: <h2><button> Für Screenreader ist das eine Schaltfläche in einer Überschrift</button></h2>

A

B: <h2><button> Für Screenreader ist das eine Schaltfläche in einer Überschrift</button></h2>

27
Q

Are A and B an allowable nesting (Verschachtelung) of roles?

A: a link in a button:
<button><span role = link Wie soll das semantisch übersetzt werden?</span></button>

B: a button in a button element:

<div role=”button”<button>Wie soll das semantisch übersetzt werden?</button></div>

Hinweis: Endtag von div und span wurden weggelassen, da sonst nicht sichtbar

A

No, A and B are not allowed.

28
Q

Look at the example. Is the button enabled for screenreaders? Yes or no?

<button disabled aria-disabled=”false”.>Ist das im Screenreader deaktiviert oder nicht?</button>

A

No the button is disabled for screenreader

The HTML attribute “disabled” has priority over the ARIA attribute “disabled=”false”

29
Q

True or false: If an HTML attribute and an ARIA attribute have the same semantics, then the HTML attribute takes precedence (Vorrang) over the ARIA attribute.

A

True

30
Q

What takes precedence when assigning a role with the role attribute? The implicit, native value (HTML standard) or the ARIA role?

A: the ARIA Role
B: the implicit value

A

A: the ARIA Role

Adding an ARIA role overrides the native role semantics in the accessibility tree

for example

<h1>text< /h1>

h1 will no longer appear in the list of headings for screen readers
</h1>

31
Q

What takes precedence when an HTML attribute and an ARIA attribute have the same semantics?

A: the ARIA Attribut
B: the HTML Attribut

A

B: the HTML Attribut overrides the ARIA attribut

Example: <button disabled aria-disabled=”false”.>Ist das im Screenreader deaktiviert oder nicht?</button>

For Screenreader the button would be disabled.

Wenn ein HTML- und ein ARIA-Attribut die gleiche Semantik haben, dann hat das HTML-Attribut Vorrang vor dem ARIA-Attribut. Das disabled-Attribut ist entscheidend. Der Button wird eingegraut und ist weder per Maus noch per Tastatur aktivierbar. Für Screenreader ist das Element deaktiviert. Das ARIA-Attribut sagt aber das Gegenteil, nämlich dass das Element nicht deaktiviert ist. In solchen Fällen ist auf das ARIA-Attribut zu verzichten.

32
Q

What is ARIA not?

A

ARIA does not provide functionality, but enriches elements with information. If a component on a web page has been semantically enriched with ARIA, then it must be made usable with JavaScript and styled with CSS

33
Q

One ARIA Rules say: Do not change native semantics, unless you really have to.

What is the correct code if the developer wants to build a heading that’s a tab.

A: <h2 role=tab>heading tab</h2>

B: <div role=tab><h2>heading tab</h2></div>

A

B: <div role=tab><h2>heading tab</h2></div>

34
Q

One Aria rule say that all interactive elements must have an accessible name. Which code is wrong (should be 2)?

A: <label>user name</label> <input type=”text”.>

B: <label>user name <input type=”text”.></label>

C: <label for=”uname”.>user name</label> <input type=”text” id=”uname”.>

D: <label>user name <input type=”text” role=”combobox”.>
</label>

E: <label>
user name <div role=”combobox”.></div>
</label>

Hinweis: Es wurden Punkte gesetzt vor dem Endtag damit es sichtbar ist

A

A and E

A: <label>user name</label> <input type=”text”.>

A is wrong because the input type=text has a visible label ‘user name’ , but no accessible name

E: is wrong because a div element regardless of what role is assigned is not a HTML labelable element.

<label>user name <div role=”combobox”.></div</label>

35
Q

Why does the Web Accessibility Initiative (WAI) of the W3C created WAI-ARIA?

A

They created WAI-ARIA to increase the
accessibility of content – dynamic content in particular – for assistive technology
users, such as screen reader users.

36
Q

Name one goal of WAI-ARIA

A

One of the goals of WAI-ARIA is to make web
applications behave more like software components

37
Q

What SHOULD be used if the label text is visible on screen?

A

If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label.

Note: You type the id of another element with aria-labelledby. You don’t type the label text itself.

38
Q

For which elements is aria-label support the best?

A

on focusable elements (<a>, <input></input>, etc.),</a>

on elements inside an application region (e.g. <div role="application">)

39
Q

Normally you would use HTML <h1>-<h6> for heading

How can you ensure accessible for visual heading in a <div>, <span>, <p> that cant be turned into an html heading?</span>

A

Use the aria-level attribute:

<span role=”heading” aria-level=”2”>

This is a heading 2, change the number to correct heading level.

40
Q

For Forms:

How can you associate error messages with their corresponding input?

A

Use aria-describedby to associate error messages with their corresponding inputs. It is presented to the screen reader separately from the accessible name (label) and doesn’t override it like the aria-label or aria-labelledby.

IAAP WAS Certification + (21 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions