Aria 2 Flashcards
What ARIA role should be used for a button that is not a <button> element?</button>
role=”button” with tabindex=”0” for keyboard support
What ARIA role is used for a collapsible accordion panel?
role=”region” with aria-labelledby to associate the heading
Which ARIA role should be used for a search bar?
role=”search”
Which ARIA role should be used for a modal popup?
role=”dialog” with aria-modal=”true”
What ARIA role is used for an interactive tab button?
role=”tab”
Which ARIA role should be used for a group of related tabs?
role=”tablist”
What ARIA role should be used for a tooltip that provides extra information?
role=”tooltip”
Which ARIA role should be used for a progress indicator?
role=”progressbar”
Which ARIA role should be used for a main navigation menu?
role=”navigation”
Which ARIA role should be used for a list of selectable items?
role=”listbox”
What ARIA role should be used for a notification banner?
role=”alert”
Which ARIA attribute is used to indicate if an element is disabled?
aria-disabled=”true”
What ARIA attribute should be used to show if an element is checked?
aria-checked=”true” or false
Which ARIA attribute is used to indicate whether an element is currently expanded or collapsed?
aria-expanded=”true” or false”
What does aria-hidden=”true” do?
It hides an element from screen readers while keeping it visible on the page
Which ARIA attribute associates an element with a visible label?
aria-labelledby
What does aria-describedby do?
It provides additional information about an element by referencing another element’s ID
Which ARIA attribute should be used for an element that controls another element’s visibility?
aria-controls=”id”
What does aria-selected=”true” indicate?
It marks the currently selected item in a listbox
Which ARIA attribute should be used for a toggle switch to show its on/off state?
aria-pressed=”true” or false”
Which ARIA attribute should be used to indicate a required form field?
aria-required=”true”
What does aria-invalid=”true” do?
It marks a form field as invalid when an error occurs
What is an ARIA live region?
An area of a webpage that dynamically updates and announces changes to screen readers
What does aria-live=”polite” do?
It announces changes only when the user is idle
What does aria-live=”assertive” do?
It announces updates immediately
Which ARIA live region setting should be used for error messages?
aria-live=”assertive” so the message is read immediately
Which ARIA live region setting should be used for chat notifications?
aria-live=”polite” to avoid disrupting the user
What does aria-relevant=”additions” do?
It tells the screen reader to announce new content that is added to the live region
What does aria-relevant=”removals” do?
It announces when content is removed from a live region
What does aria-relevant=”text” do?
It announces changes to text inside the live region
What is the default aria-live value for most elements?
aria-live=”off” meaning no announcements occur
Which ARIA property should be used to identify a dynamic status update?
role=”status” with aria-live=”polite”
How do role=”alert” and aria-live=”assertive” work together?
role=”alert” automatically sets aria-live=”assertive”
How do role=”button” and aria-pressed=”true” work together?
role=”button” makes the element a button
How do role=”checkbox” and aria-checked=”true” work together?
role=”checkbox” defines the element
How do aria-labelledby and aria-describedby work together?
aria-labelledby provides a label for an element
How do aria-live=”polite” and aria-relevant=”additions” work together?
They ensure that only newly added content in the live region is announced when the user is idle
How do aria-expanded and aria-controls work together?
aria-expanded shows whether an element is open
How do role=”progressbar” and aria-valuenow=”50” work together?
role=”progressbar” defines a progress indicator
How do role=”tab” and aria-selected=”true” work together?
role=”tab” defines a tab
How do role=”dialog” and aria-modal=”true” work together?
role=”dialog” identifies a modal
