Custom JavaScript/ARIA Widgets Flashcards
ARIA is a programming language that communicates information like names, roles, and values to screen readers.
A. True
B. False
B. False
ARIA is NOT a programming language. They are attributes applied to HTML tags.
Which of the following ARIA attributes can be used to communicate the names of elements? (Select all that apply)
A. aria-labelledby
B. aria-describedby
C. role=”name”
D. aria-label
E. alt
A. aria-labelledby
D. aria-label
The accessible name of an element is calculated using a rather complicated algorithm. A simplified version of this algorithm is shown below:
- aria-labelledby - If there is an aria-labelledby attribute, the text it refers to will override all other name and label methods.
- aria-label - If there is no aria-labelledby, the aria-label text string will override everything else. Note that the aria-label text is invisible, and only available to assistive technology users.
- The native HTML text of the element - If there is no aria-labelledby or aria-label, the native text of an element will be used (e.g. the text between the opening and closing <button> elements, the <label> text on a form field, the alt text of an image, etc.
- title - If no other naming methods are available, the title will count as the label. Note that the title is best considered as extra, non-essential information, because the title is not visible at all times and some users cannot access it at all, for example in browsers that show the title text only on mouse hover.
aria-label and aria-labelledby will work best on which kinds of elements listed below? (Select all that apply)
A. Paragraphs (<p>)
B. Links (<a>)
C. Text Inputs (<input type=”text”>)
D. Containers (<div>)
B. Links (<a>)
C. Text Inputs (<input type=”text”>)
The aria-label and aria-labelledby attributes allow you to assign a name or label to almost any HTML element: links, form fields, paragraphs, etc., though screen reader support is best on focusable elements, or on elements in application regions. In practice, screen reader support for aria-label and aria-labelledby is best on focusable elements such as <a>, <input>
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.
B. Define what the element is.
Every HTML element has a role, meaning a set of features, properties, and methods of conveying information to and/or from the user. Essentially the role defines what the element is. Screen readers and other assistive technologies need to know the role of each element on the web page to be able to interact with it intelligently, and they need to be able to communicate the role to the user.
When a screen reader comes to an element, for example, the screen reader knows it is an image — that the role is defined as “image” — so the screen reader will tell the user that it is an image (most screen readers say “graphic”) and then it will read the alt text for the image, or perhaps read the file name or link destination if the image is missing alt text. A screen reader will behave quite differently when it encounters a
element (where the role is defined as “paragraph”).
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. Landmark roles
Screen reader users can’t discern the visual design of a page, so they need a non-visual way to be able to tell the navigation from the main content or the footer or other regions. ARIA landmark roles provide a way to do this. When you define landmark regions, screen reader users can list all regions to understand how the page is organized, then they can navigate directly to the region they’re interested in.
It is best to use actual HTML elements instead Pseudo HTML roles so developers don’t always have to create functionality for elements by using JavaScript.
A. True
B. False
A. True
Another thing that ARIA allows web developers to do is to change the role of an element completely. For example, the <p> element is normally interpreted as a paragraph by browsers and assistive technologies. If you change it to <p role=”heading” aria-level=”1”> the paragraph will now be interpreted as an <h1> element. Screen readers will say “heading level 1” before reading the content with the element, and for all intents and purposes, the element is no longer a paragraph at all, at least to screen reader users. It is an <h1>. Similarly, you could use <span role=”checkbox”> to create a custom checkbox or <span role=”link”> to create a custom link.
Assigning role=”application” to a region disables most screen reader keystrokes within the region to allow developers to create custom keystrokes.
A. True
B. False
A. True
Application mode exists to allow developers complete freedom over programming the behaviors of a widget, including keyboard event handlers. With great power comes great responsibility though. Invoking role=”application” requires thoughtful planning of every aspect of interaction. There are so many ways to do this wrong that most of the time it’s best to avoid application regions altogether. Even so, there are some legitimate use cases.
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
D. Document role
The default role for a web page is the document role, so you don’t need to do anything to a standard web page to give it that role. The web page is already the equivalent of role=”document”.
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.
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.
B. The states of elements.
Which ARIA attribute is used to provide additional information about an element?
A. aria-labelledby
B. aria-describedby
C. role=”description”
D. aria-label
B. aria-describedby
The aria-describedby attribute is meant to be used to add extra, supplemental information about an element. Unlike aria-labelledby and aria-label, the aria-describedby attribute is not part of the accessible name computation . Instead it is part of the accessible description computation. In other words, don’t use aria-describedby to give the element a name, label, or title. Instead, use it to describe or give supplemental information about the element.
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
B. False
An assertive announcement will interrupt a screen reader if it is in the middle of reading text, and read the aria-live announcement. Whatever the screen reader had been reading will be truncated and will not automatically continue after the aria-live announcement.
A polite announcement will put the announcement in a queue, and then read the announcement after the screen reader is done reading the text currently in the queue.
When an element with the role=”alert” is triggered, a screen reader will add the alert to the queue and announce the alert when it has completed speaking.
A. True
B. False
B. False
An alert is a special kind of assertive ARIA live region, so screen readers should immediately interrupt anything they were previously saying and instead read the announcement. Most screen readers say “Alert,” before reading the text inside the alert.
Because alert’s are assertive (cause a screen reader to announce them imediatly) they can appear anywhere on the page?
A. True
B. False
B. False
All users can benefit from alert messages that is close to the source of the error.
A text message displays on the screen, within the user’s current viewport and near the current keyboard focus and/or mouse cursor, so that it is visible immediately, even for screen magnifier users, who can see only a small portion of the screen at a time.
Using an alert (role=”alert”) will hault the screen reader until the alert is cleared.
A. True
B. False
B. False
An alert (role=”alert”) does not require a user action. It does not move the keyboard focus. No part of the page is hidden or obscured or made unavailable at any time.
