Brainscape's Knowledge GenomeTM

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


See full index

accessibility > 4. ARIA > Flashcards

4. ARIA Flashcards

1
Q

¿What does accessibility of web content requires?

A

Semantic information about user input widgets, structures, and behavior, to allow specific technologies to convey appropriate information to people with disabilities.

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

¿What does native elements do for us?

A

Using native elements for optimal keyboard usability also gives us the built-in semantics used by assistive technology to present a customized interface.

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

¿What do we need to think about in accessibility?

A

We need to think about labeling controls, images and being sure to add page structure using headings and other semantic HTML elements to provide landmark information for assistive technology, plus the importance of links in creating a rich interactive experience in a complex site.

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

¿What is ARIA?

A

Is a way where we can express semantics, which HTML can’t express on its own.

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

¿Why should we use native elements?

A

Because they give you focus, keyboard support, and built in semantics essentially for free.

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

¿What is WAI-ARIA good for?

A

The Web Accessibility Initiatives Accessible Rich Internet Applications spec is good for bridging areas where there are accessibility issues that can’t be managed with native HTML.

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

¿How dos ARIA works?

A

Aria works by allowing us to specify attributes on elements which modify the way that element is translated into the accessibility tree.

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

Note about ARIA attributes

A

ARIA attributes always need to have explicit values.

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

¿What does ARIA Role and ARIA-check attributes do to the accessibility tree?

A

Adding that role attribute and that aria-checked attribute causes the node in the accessibility tree to have the desired role and state, without changing anything else about that node’s appearance or behavior.

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

¿What does ARIA do in terms of accessibility tree?

A

In terms of the accessibility tree, what ARIA does is allow you to essentially do some tree surgery. We take the accessibility tree as generated from the plain HTML tree, add ARIA and get a different accessibility tree.

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

¿What can ARIA do?

A
  • ARIA attributes can be used in a number of ways to augment the existing ways we can express semantics in HTML.
  • ARIA can add semantics to an element where no native semantics exist.
  • ARIA can also modify existing elements semantics within certain bounds.
  • In many cases, ARIA allows us to create accessible widgets which would not be possible using plain HTML.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

¿What is ARIA Role?

A

One of the core aspects of the ARIA system. It is an accessibility term, amounts to a shorthand for a particular UI pattern.

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

¿What does ARIA provides for the role attribute?

A

ARIA provides a vocabulary of patterns we can use via the role attribute on any HTML element.

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

¿What happens when i assign the role=checkbox?

A

We are telling assistive technology that the element should follow the checkbox pattern and We’re promising that it will have a checked state, either checked or not checked, and that the state may be toggled using the mouse or via the space bar.

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

¿Where is the role attribute applied and why?

A

The role attribute is always applied in the same place as the tabindex attribute so that keyboard events will go to the right place and so that when page focus lands on an element, its role is conveyed accurately.

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

¿What is ARIA the only way for?

A

Aria is the only way to add accessible help or description text.

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

¿What does Aria-label do?

A

Aria-label allows us to specify a string directly to be used as the accessible label.

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

¿What can i use aria-label attribute for?

A

One situation in which i can use an aria-label attribute is where i have some kind of visual indication as to the purpose of an element. But still need to clarify that for anyone who might not be able to access that visual indication, such as a button which uses a graphic to indicate its purpose.

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

¿What does aria-label overrides?

A

It overrides any other native labeling mechanism such as a label element. For example, if a button has both text content and an aria-label, only the aria-label value will be used.

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

¿What does Aria-labelledby do?

A

Aria-labelledby allows us to specify an element ID to refer to another element in the dumb as this element’s label.

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

¿Where can Aria-labelledby be used?

A

Aria-labelledby may be used on any element.

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

¿What are the differences between an Aria-labelledby and a label?

A
  1. Aria-labelledby may be used on any element, not just labellable elements.
  2. While a label element refers to the thing it labels, the relationship is reversed in the case of aria-laelledby. The thing which is labeled refers to the thing which labels it.
  3. Since aria only affects the accessibility tree, aria-laelledby by does not give you the nice label clicking behavior you get from the label element.
  4. Aria-labelledby can take a list of ID refs to compose a label out of multiple elements. The label will be concatenated in the order the ID refs are given.
  5. Aria-labelledby can refer to elements which are otherwise hidden from assistive technology.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

¿What does Aria-labelledby overrides?

A

Aria-labelledby overrides all other name sources for an element. So for example, if something has both
an aria-labelledby and an aria label. Or an aria-labelledby and a native HTML label, the aria-labelledby label will always take precedence.

24
Q

¿What does Aria do?

A

ARIA allows us to add extra semantics into our HTML via attributes. Essentially, it allows us to modify the accessibility tree without changing anything else about the page presentation or behavior. The only thing it changes is how the page appears to assistive technology users.

25
Q

¿What will Aria affect?

A

By default, it won’t affect styling nor will it affect interactive behavior.

26
Q

Two things about Aria roles

A
  1. Firstly, there is usually no need to redefine default semantics and input type equals checkbox does not need an extra role equals checkbox.
  2. Secondly, sudden HTML elements have restrictions on what ARIA role and attribute values may be used effectively on them.
27
Q

¿What may HTML landmark elements be used for?

A

HTML landmark elements may be used to help assistive technology users to find their way around the page.

28
Q

¿What are Aria landmarks redundant with?

A

They are redundant with HTML5 semantic elements.

29
Q

¿When will Aria and HTML landmarks need to be used at the same time?

A

depending on what browser versions you need to support, it may be necessary in some cases to use both an HTML5 semantic element and a redundant ARIA role.

30
Q

¿What does a relationship attribute does?

A

A relationship attribute creates some kind of semantic relationship between elements on the page. In the case of aria-labelledby, that relationship is this element is labeled by that element, or as the case may be, this element is labeled by those elements.

31
Q

¿What does Aria relationship attributes take reference to?

A

To one or more elements to create a new link between elements on the page. What differs in each case is what that link means and how it is presented to users.

32
Q

¿Whice is one of the most widely used Aria relationships?

A

One of the most widely used Aria relationships is aria-owns.

33
Q

¿What does aria-owns do?

A

Aria-owns allows us to tell assistive technology that an element, which is separate in the DOM, should be treated as a child of the current element, or to rearrange existing child elements into a different order.

34
Q

Aria-owns example:

A

For example, if a pop-up submenu is visually positioned near its parent menu, but cannot be a DOM child of it because that would affect the visual presentation, or because the element is used in several different contexts, we can use aria-owns to present the submenu as a child of the parent menu.

35
Q

¿What can aria-own do?

A

Aria-owns can take a list of ID references, so it can also be used to explicitly specify the order of children. For example, to rearrange children, or into live native and non-native children.

36
Q

¿When will aria-owned children come?

A

By default, aria-owned children will come after natively-owned children.

37
Q

¿What does aria-activedescendant do?

A

Just as the active element of a page is the one which has focus, setting the active descendant of an element allows us to tell assistive technology that when its parent has page focus, it should be presented to the user as the actual focused element.

38
Q

Aria-activedescendant example

A

For example, if we have a list box widget, we may wish to keep focus on the list box container, so that it can receive keyboard events and keep its aria-activedescendant attribute updated to the currently selected list item.

This makes the currently selected item appear to assistive technology as if it is the focused item.

39
Q

¿What does aria-describedby do?

A

Aria-describedby allows you to provide an accessible description, in the exact same way that aria-labelledby allows you to provide a label.

40
Q

¿When is aria-describedby useful?

A

This is a useful technique whenever there is some extra explanatory text that a user might need, whether that applies to only users of assistive technology or all users.

41
Q

Aria-describedby, example:

A

One common example is a password input field, which is accompanied by some descriptive text explaining
the requirements for a valid password.

Like aria-labelledby, aria-describedby may reference elements which are otherwise not visible, whether they’re hidden from the DOM or hidden from assistive technology users.

42
Q

¿What are aria-poinset and aria-setsize about?

A

Aria-posinset, short for position inset, and aria-setsize are about defining a relationship between sibling elements in a set, such as a list.

43
Q

¿What can aria-setsize and aria-poinset be used for?

A

aria-setsize can be used to specify the actual size of the set. And aria-posinset can be used to specify
the position of the element in the set.

44
Q

Note about aria-setsize

A

Aria-setsize is set on the items in the set and not on the set container.

45
Q

¿Which parts of the page should be exposed to assistive technology?

A

Only the relevant parts of the page.

46
Q

¿What happen with hidden elements and the accessibility tree?

A

Anything which is explicitly hidden will not be included in the accessibility tree.

47
Q

¿Which elements will be hidden from the accessibility tree?

A

Anything which has a visibility hidden, or display none CSS style or uses the HTML5 hidden attribute, will also be hidden from assistive technology users.

48
Q

¿What happens with not explicitly hidden elements?

A

However, an element which is not visually rendered, but not explicitly hidden, is still included in the accessibility tree.

49
Q

¿What does aria-live does?

A

aria-live allows developers to mock a part of the page as live, in the sense that updates should be communicated to users in a timely manner rather than if and when they happen to explore that part of the page.
Example: if a message is important enough to grab aside a user’s attention, we can direct and assist a technology user’s attention to it by setting an aria-live attribute on it.

50
Q

¿What happens when an element has an aria-live attribute?

A

When an element has an aria-live attribute we refer to the part of the page containing it and its descendants, as a live region.

51
Q

¿Which are the three aria-live allowable values?

A

Off, polite and assertive
• Off: is the default value is the default value. It can be specified explicitly if need be, but not setting it aria-live attribute at all will have the same effect., polite, and assertive

  • Aria-live = “polite”: it tells to the assistive technology to alert the user to this change when you finished whatever you were doing.
  • Aria-live = “assertive”: tells the assistive technology to interrupt what ever it’s doing and alert the use to this change immediately.

Ej: This is only for important and urgent updates, such as a status message like, there has been a server error and your changes are not being saved, please refresh the page.

52
Q

TIPS FOR WORKING WITH ARIA-LIVE REGIONS

A
  1. Firstly, your aria-live region should probably be in the initial page load:
    This is not a hard and fast rule, but if you’re having difficulty with an aria-live region, this could be one of the issues.
  2. Secondly, different screen readers and assistive technologies react differently to different types of changes.
  3. Third, if you’re having issues with getting an aria-live region to speak, experiment with some different types of content changes to see what works on the platforms you’re targeting.
53
Q

WHAT’S ARIA-LABEL FOR:

A

To provide a screen reader only label string.

54
Q

WHAT’S ARIA-LABELEDBY FOR:

A

To refer to some visible element as a label.

55
Q

WHAT’S ARIA-DESCRIBEDBY FOR:

A

To provide some extra information alongside the label.

accessibility (6 decks)

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