WAI-ARIA Flashcards
What are two aria-live values?
aria-live=”polite”, the screen reader will announce the change within the element after the user finishes typing.
aria-live=”assertive”, the screen reader will announce the change immediately, which is good for important error warnings.
<p></p>
After an Ajax form submit:
<p>
You successfully submitted the form.
</p>
Is this a good use of aria - polite?
Yes
<p></p>
After the time limit has passed:
<p>
Your time is up!
</p>
Is this a good use of aria-assertive?
Yes
When do you use aria-atomic?
Sometimes only part of a string changes and then only that part of the string is announced. Maybe that makes no sense at all.
If you add aria-atomic=”true”, the whole content is announced.
Example aria-atomic=”true”:
<p>
Total price: € 0.00
</p>
After the dynamic change of the price:
<p>
Total price: € 5.25
</p>
What is true of elements with the role=”alert”?
Elements with the role=”alert” have an implicit aria-live value of assertive, and an implicit aria-atomic value of true.
For Example:
<div>
You have {number} seconds left!
</div>
is equivalent to
<div>
You have {number} seconds left!
</div>
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
- https://www.w3.org/WAI/ARIA/apg/patterns/alert/examples/alert/
How will this button be announced by a screen reader?
<button aria-expanded=”false”>Menu</button>
That is announced as: Menu collapsed button.
How will this button be announced by a screen reader?
<button aria-expanded=”true”>Menu</button>
That is announced as: Menu expanded button.
Which values can aria-live hold?
A. aria-live=”true” and aria-live=”false”
B. aria-live=”indirect”, aria live=”direct” and aria-live=”off”
C. aria-live=”polite”, aria-live=”assertive” and aria-live=”off”
C. aria-live=”polite”, aria-live=”assertive” and aria-live=”off”
Aria-atomic is used to set whether the screen reader should always announce a live region as a whole, even if only part of the region changes.
A. True
B. False
A. True
The role=”alert” has an implicit value of..?
A. aria-live=”polite”, aria-atomic=”true”
B. aria-live=”assertive”, aria-atomic=”true”
B. aria-live=”assertive”, aria-atomic=”true”
The role=”alert” can be added to every element in the DOM even if that means the role of the element will change.
A. True
B. False
B. False
If the dynamic change contains a lot of information, how should you handle this with aria-live?
A. Read all information that has been changed
B. Announce there has been a change and where the changed information can be found on the page
B. Announce there has been a change and where the changed information can be found on the page
aria-expanded should be placed on:
A. The element that expands, for example the nav of a menu
B. The button that is used to toggle the expansion
B. The button that is used to toggle the expansion
aria-expanded=”false” on a button with the accessible name “Menu” will be announced in VoiceOver as:
A. “Menu collapsed button”
B. “Menu closed button”
A. “Menu collapsed button”
What are the five rules of ARIA:
Rule 1: Don’t Use ARIA!
If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
Rule 2: Do not change native semantics, unless you really have to.
Rule 3: All interactive ARIA controls must be usable with the keyboard.
Rule 4: Do not use role=”presentation” or aria-hidden=”true” on a focusable element. Using either of these on a focusable element will result in some users focusing on ‘nothing’.
Rule 5: All interactive elements must have an accessible name.
An interactive element only has an accessible name when its Accessibility API accessible name (or equivalent) property has a value.
https://www.w3.org/TR/using-aria/
Which ARIA roles have a native HTML5 equivalent? Check all that apply:
A. role=”main”
B. role=”switch”
C. role=”form”
D. role=”tab”
A. role=”main”
C. role=”form”
What is correct code to perform a JavaScript action?
A. <a>Calculate total</a>
B. <a>Calculate total</a>
C. <a>Calculate total</a>
D. <button>Calculate total</button>
D. <button>Calculate total</button>
What is the best aria-label on a button to close a login modal with an X close icon?
A. <button>X</button>
B. <button>X</button>
C. <button>X</button>
D. <button>X</button>
C. <button>X</button>
What is the difference between a property and a state?
A. They are the same.
B. A property has a permanent value, a state can change through user interaction.
C. A property is another word for attribute, a state is the value of the attribute.
B. A property has a permanent value, a state can change through user interaction.
How will a screen reader announce the following code on change of the seconds?
<span aria-live=”assertive” aria-atomic=”true”>You have 20 seconds left to complete this form.</span>
A. Immediately: “You have 20 seconds left to complete this form.”.
B. Immediately: “20”.
C. When the user stops interacting with the browser: “You have 20 seconds left to complete this form.”.
D. When the user stops interacting with the browser: “20”.
A. Immediately: “You have 20 seconds left to complete this form.”.
The support of ARIA depends on:
A. The browser vendor and its version.
B. The assistive technology and its version.
C. The combination of browser vendor version and assistive technology version.
C. The combination of browser vendor version and assistive technology version.
What is the second rule of ARIA?
A. Don’t change native HTML semantics unless you really have to.
B. Only use Comic Sans as the default font for web content.
C. All interactive ARIA controls must be usable with the keyboard.
A. Don’t change native HTML semantics unless you really have to.
How can you view the accessibility tree?
A. You need a special browser add-on to view the accessibility tree.
B. In the browser’s inspector.
C. The accessibility tree is only accessible to assistive technology and can not be viewed by a developer.
B. In the browser’s inspector.
What are the six roles of ARIA?
- Document structure roles: these roles are used to provide a structural description for a section of content.
- Widget roles: the various widget roles are used to define common interactive patterns.
- Landmark roles: landmark roles provide a way to identify the organisation and structure of a web page. Screen reader users can navigate by landmarks. All landmarks are native HTML5, except <form role="search">. We will address that later.
- Live region roles: live Region roles are used to define elements with content that will be dynamically changed.
- Window roles: window roles define sub-windows to the main document window, within the same window, such as pop-up modal dialogs.
6 Abstract roles: abstract roles are only intended for use by browsers to help organise and streamline a document.
Wikipedia
A. wikipedia.org
b. Wikipedia
c. Logo Wikipedia Wikipedia
Wikipedia
A. wikipedia.org
B. Wikipedia
C. Logo Wikipedia Wikipedia
