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.
these roles are used to provide a structural description for a section of content.
Document structure roles
the various widget roles are used to define common interactive patterns.
Widget 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">
Landmark roles
live Region roles are used to define elements with content that will be dynamically changed.
Live region roles
define sub-windows to the main document window, within the same window, such as pop-up modal dialogs.
Window roles:
only intended for use by browsers to help organise and streamline a document.
Abstract roles
Is <main> a landmark role or a document structure role?
A. A document structure role.
B. A landmark role.
C. Both.
D. None of those.
B. A landmark role.
Which attributes are redundant in: (check all that apply)
<button type=”button” role=”button” tabindex=”0″>Filter</button>
A. type=”button”
B. role=”button”
C. tabindex=”0”
B. role=”button”
C. tabindex=”0”
Which use of the role attribute is correct? Check all that apply.
A. <button>text</button>
B. <form role="search">
C. <button>
D. <h2 role="tab"></button>
B. <form role="search">
C. <button></button>
Is it a WCAG violation to put page content outside landmarks?
A. Yes.
B. No.
B. No.
What is true about role=”presentation”? Check all that apply.
A. It will hide the content from a screen reader.
B. Its synonym is role=”none”.
C. It removes all semantics from an HTML element.
D. With role=”presentation” we can use tables for layout in new code.
B. Its synonym is role=”none”.
C. It removes all semantics from an HTML element.
What are the different values that aria-current can hold?
The property aria-current can hold different values. The accepted values are: page, step, location, date, time, true, and false.
- https://a11y-collective.github.io/demos/en/aria/aria-current/index.html
- https://www.a11y-collective.com/courses/aria-explained/lessons/properties-states-and-values/topics/aria-current/
HTML5 validation from the browser: (check all that apply)
A. Can be disabled by using the attribute “novalidate” in the form element.
B. Is not accessible enough at the moment.
C. Is better than custom error messages.
A. Can be disabled by using the attribute “novalidate” in the form element.
B. Is not accessible enough at the moment.
Which values can aria-current hold
A. Page, step, location, date, time, true and false.
B. True and false.
C. Active, page, step, location, date, time, true and false.
A. Page, step, location, date, time, true and false.
You can use CSS to style elements with ARIA attributes. How would you style an active element (for example):
A. [aria-current] {font-weight: 700;}
B. [aria-current]:not([aria-current=”false”]) {font-weight: 700;}
C. [aria-current]:not([aria-current=”false”]) {color: #ff0000;}
B. [aria-current]:not([aria-current=”false”]) {font-weight: 700;}
The attribute aria-expanded has to be added to:
A. The element that triggers the open/close action, e.g. a button.
B. The item that opens or closes, like the menu or a dialog.
A. The element that triggers the open/close action, e.g. a button.
What is the difference between aria-label, aria-labellledby, and aria-describedby?
- aria-label gives an element an accessible name
- aria-labelledby gives a connected element an accessible name and is connected to that element with an id
- aria-describedby adds extra information to an element and is connected to that element with an id.
https://www.a11y-collective.com/courses/aria-explained/lessons/accessible-names/
What is the difference between a caption and a summary for a table?
The caption is the name of the table. A summary gives information about the organisation of the data in a table and helps users navigate through it.
What can be improved in the link text of:
<a href=”https://en.wikipedia.org/wiki/Cat”>Read more</a>
A. The text “Read more” must be clearer, something like “If you want to read more, click this link”.
B. The link needs to be more descriptive, so screen reader users know where the link leads to, like: “Read more about cats”.
C. Nothing: It’s ok as it is.
B. The link needs to be more descriptive, so screen reader users know where the link leads to, like: “Read more about cats”.
What is the accessible name of this link:
<a href=”https://wikipedia.org” class=”link-image”><img src=”wikipedia-logo.jpg” alt=”Logo Wikipedia”>Wikipedia</a>
A. wikipedia.org
b. Wikipedia
c. Logo Wikipedia Wikipedia
c. Logo Wikipedia Wikipedia
What is the accessible name of this link:
<a href=”https://wikipedia.org” class=”link-image” aria-label=”Wikipedia”> <img src=”wikipedia-logo.jpg” alt=”Wikipedia logo”>Wikipedia</a>
A. wikipedia.org
B. Wikipedia
C. Logo Wikipedia Wikipedia
B. Wikipedia
What is the accessible name of this link:
<a href=”https://joinmastodon.org/” class=”link-image”>
<svg
aria-hidden=”true”
viewBox=”0 0 24 24″
xmlns=”http://www.w3.org/2000/svg“
>[…]</svg>
Mastodon
</a>
A. joinmastodon.org
B. the link has no accessible name
c. Mastodon
c. Mastodon
Which attribute adds extra text information to an input field in a form?
A. aria-label
B. aria-labelledby
C. aria-describedby
C. aria-describedby
What is true about a table caption and a table summary? (check all that apply)
A. The caption gives the table its accessible name, the summary informs about how the table is structured.
B. A caption is a short summary.
C. The caption can be hidden by display: none;.
D. The caption is usually visible, the summary not.
A. The caption gives the table its accessible name, the summary informs about how the table is structured.
D. The caption is usually visible, the summary not.
What is a good title attribute for a video iframe?
A. Youtube video
B. press play to start the video
C. YouTube short about cooking eggs by The Magic Chef
C. YouTube short about cooking eggs by The Magic Chef
identifies an element (or elements) in order to define a visual, functional, or contextual relationship between a parent and its child elements when the DOM hierarchy cannot be used to represent the relationship.
aria-owns
identifies an element as an input that controls another element, like a listbox or grid, that can dynamically pop up to help the user set the value of that input.
role=”combobox”
the option role is used for selectable items in a listbox.
role=”option”
What is one of the requirements for an accessible form?
A. Only aria-required can be used to indicate a field is required.
B. Error and success messages need to be announced by a screen reader.
C. The password requirements should never be announced.
B. Error and success messages need to be announced by a screen reader.
What is a requirement for an autocomplete in a search form?
A. Screen reader users must be informed about the fact that there are suggestions.
B. The suggestions must be announced.
C. The selected value must be announced.
D. A screen reader (and keyboard) user must be able to reach the suggestions.
E. All of the above.
E. All of the above.
Is an accessible Drag and Drop possible?
A. No, maybe in the future when assistive technology gets smarter.
B. Yes, but it takes careful coding and extended testing.
B. Yes, but it takes careful coding and extended testing.
