WCAG 2.2 - Operable Flashcards

1
Q

What was meant by operable?

A

User interface components navigation must be operable

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

Guideline 2.1

A

Guideline 2.1 Keyboard Accessible: Make all functionality available form a keyboard

SC 2.1.1 Keyboard A
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints.

SC 2.1.2 No Keyboard Trap: A
If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.

SC 2.1.3 Keyboard (No Exception) - Level AAA
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.

SC 2.1.4 Character Key Shortcuts: A
If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:

  • Turn off: A mechanism is available to turn the shortcut off;
  • Remap: A mechanism is available to remap the shortcut to include one or more non-printable keyboard keys (e.g., Ctrl, Alt);
  • Active only on focus: The keyboard shortcut for a user interface component is only active when that component has focus.

https://learning.edx.org/course/course-v1:W3Cx+WAI0.1x+3T2019/block-v1:W3Cx+WAI0.1x+3T2019+type@sequential+block@6e4c1abff9594e6a8f5138b1ade5c4cf/block-v1:W3Cx+WAI0.1x+3T2019+type@vertical+block@b66c948dde3a42bfbf15ca7d553032ee

https://www.w3.org/WAI/fundamentals/accessibility-principles/#keyboard

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

Guideline 2.2

A

Guideline 2.2 Enough Time: Provide users enough time to read and use content

SC 2.2.1 Timing Adjustable A
For each time limit that is set by the content, at least one of the following is true:

Turn off: The user is allowed to turn off the time limit before encountering it; or

Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or

Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, “press the space bar”), and the user is allowed to extend the time limit at least ten times; or

Real-time Exception: The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or

Essential Exception: The time limit is essential and extending it would invalidate the activity; or

20 Hour Exception: The time limit is longer than 20 hours.

SC 2.2.2 Pause, Stop, Hide A
For moving, blinking, scrolling, or auto-updating information, all of the following are true:

Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and

Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.

SC 2.2.3 No Timing - Level AAA
Timing is not an essential part of the event or activity presented by the content, except for non-interactive synchronized media and real-time events.

SC 2.2.4 Interruptions - Level AAA
Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency.

SC 2.2.5 Re-authenticating - Level AAA
When an authenticated session expires, the user can continue the activity without loss of data after re-authenticating.

SC 2.2.6 Timeouts - Level AAA
Users are warned of the duration of any user inactivity that could cause data loss, unless the data is preserved for more than 20 hours when the user does not take any actions.

https://learning.edx.org/course/course-v1:W3Cx+WAI0.1x+3T2019/block-v1:W3Cx+WAI0.1x+3T2019+type@sequential+block@6e4c1abff9594e6a8f5138b1ade5c4cf/block-v1:W3Cx+WAI0.1x+3T2019+type@vertical+block@3b020caf4f38401fbe71f056a6fefc84

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

Guideline 2.3

A

Guideline 2.3 Seizures and Physical Reactions: Do not design content in a way that is know to cause seizures or physical reactions.

SC 2.3.1 Three Flashed or Below Threshold: A
Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.

SC 2.3.2 Three Flashes: Level AAA
Web pages do not contain anything that flashes more than three times in any one second period.

2.3.3 Animation From Interactions: Level AAA
Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.

https://learning.edx.org/course/course-v1:W3Cx+WAI0.1x+3T2019/block-v1:W3Cx+WAI0.1x+3T2019+type@sequential+block@6e4c1abff9594e6a8f5138b1ade5c4cf/block-v1:W3Cx+WAI0.1x+3T2019+type@vertical+block@dbadcb43f04c43749e0729d7393d7db6

https://www.w3.org/WAI/fundamentals/accessibility-principles/#safe
https://trace.umd.edu/peat/

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

Guideline 2.4

A

Guideline 2.4 Navigable: Provide ways to help user navigate, find content, and determine they are

SC 2.4.1 Bypass Blocks- Level A

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. Ex: Skip content link

SC 2.4.2 Page Titled - Level A
Web pages have titles that describe topic or purpose.

SC 2.4.3 Focus Order - Level A
If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

SC 2.4.4. Link Purpose (In Context)- Level A
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.

SC 2.4.5 Multiple Ways -Level AA

More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.

SC 2.4.6 Headings and Labels - Level AA
Headings and labels describe topic or purpose.

SC 2.4.7 Focus Visible- Level AA
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

SC 2.4.8 Location - Level AAA
Information about the user’s location within a set of Web pages is available.

SC Link Purpose (Link Only)- Level AAA
ection headings are used to organize the content.

Note 1: “Heading” is used in its general sense and includes titles and other ways to add a heading to different types of content.

Note 2: This success criterion covers sections within writing, not user interface components. User Interface components are covered under Success Criterion 4.1.2.

SC 2.4.11 Focus Not Obscured (Minimum) - Level AA(Added in 2.2)

When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.

Note 1: Where content in a configurable interface can be repositioned by the user, then only the initial positions of user-movable content are considered for testing and conformance of this Success Criterion.

Note 2: Content opened by the user may obscure the component receiving focus. If the user can reveal the focused component without advancing the keyboard focus, the component with focus is not considered hidden due to author-created content.

SC 2.4.12 Focus Not Obscured (Enhanced) Level AAA (Added in 2.2)
When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.

SC 2.4.13 Focus Appearance - Level AAA (Added in 2.2)
hen the keyboard focus indicator is visible, an area of the focus indicator meets all the following:

is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and

has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.

Exceptions:

The focus indicator is determined by the user agent and cannot be adjusted by the author, or

The focus indicator and the indicator’s background color are not modified by the author.

Note 1: What is perceived as the user interface component or sub-component (to determine enclosure or size) depends on its visual presentation. The visual presentation includes the component’s visible content, border, and component-specific background. It does not include shadow and glow effects outside the component’s content, background, or border.

Note 2: Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu, or focusable cells in a grid.

Note 3: Contrast calculations can be based on colors defined within the technology (such as HTML, CSS and SVG). Pixels modified by user agent resolution enhancements and anti-aliasing can be ignored.

https://learning.edx.org/course/course-v1:W3Cx+WAI0.1x+3T2019/block-v1:W3Cx+WAI0.1x+3T2019+type@sequential+block@6e4c1abff9594e6a8f5138b1ade5c4cf/block-v1:W3Cx+WAI0.1x+3T2019+type@vertical+block@e90df0b2b0ea41fb9f294faf1a37e1f3

https://www.w3.org/WAI/fundamentals/accessibility-principles/#navigable

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

Guideline 2.5

A

Guideline 2.5 Input Modalities: Make it easier for users to operate functionality through various input beyond keyboard

SC 2.5.1 Pointer Gestures - Level A (Added in 2.1)
All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential.

SC 2.5.2 Pointer Cancellation - Level A (Added in 2.1)
For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

No Down-Event: The down-event of the pointer is not used to execute any part of the function;

Abort or Undo: Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion;

Up Reversal: The up-event reverses any outcome of the preceding down-event;

Essential: Completing the function on the down-event is essential.

SC 2.5.3 Label in Name- Level A(Added in 2.1)

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

2.5.4 Motion Actuation - Level A(Added in 2.1)

Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when:

Supported Interface: The motion is used to operate functionality through an accessibility supported interface;

Essential: The motion is essential for the function and doing so would invalidate the activity.

SC 2.5.5 - Target Size (Enhanced)
Level AAA(Added in 2.1)

The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:

Equivalent: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;

Inline: The target is in a sentence or block of text;

User Agent Control: The size of the target is determined by the user agent and is not modified by the author;

Essential: A particular presentation of the target is essential to the information being conveyed.

SC 2.5.7 Dragging Movements Level AA(Added in 2.2)

All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.

Note: This requirement applies to web content that interprets pointer actions (i.e. this does not apply to actions that are required to operate the user agent or assistive technology).

SC 2.5.8 Target Size (Minimum) - Level AA(Added in 2.2)

The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:

  • Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;
  • Equivalent: The function can be achieved through a different control on the same page that meets this criterion;
  • Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;
  • User agent control: The size of the target is determined by the user agent and is not modified by the author;
  • Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.

Note 1: Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders, color pickers displaying a gradient of colors, or editable areas where you position the cursor.

Note 2: For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed vertically, the line-height would be horizontal.

https://learning.edx.org/course/course-v1:W3Cx+WAI0.1x+3T2019/block-v1:W3Cx+WAI0.1x+3T2019+type@sequential+block@6e4c1abff9594e6a8f5138b1ade5c4cf/block-v1:W3Cx+WAI0.1x+3T2019+type@vertical+block@7149ecf9f5a44045a6798b71e40544d8

https://www.w3.org/WAI/fundamentals/accessibility-principles/#modalities

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

If all functionality of a webpage works using only a keyboard, that means it can also be used with which of the following assistive technology devices? (Check all that apply.)

  • Speech input device
    -On-screen keyboard
  • Screen reader
  • Screen magnifier
A
  • Speech input device
  • On-screen keyboard
  • Screen reader

A screen magnifier makes part of a webpage larger and does not require webpage elements to work with a keyboard.

Show answer
Submit

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

A webpage component should not require a computer mouse (True or False)

A

True

There should be multiple input modalities for each element on a webpage - you should not require a user to use only one method.

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

When is a component not keyboard accessible? (Check all that apply.)
- when a user cannot move out of a component
- when a user cannot move into a component
- when a component requires a keyboard

A
  • when a user cannot move out of a component
  • when a user cannot move into a component

When a keyboard user gets stuck or cannot get out of a component, that is considered not keyboard accessible.

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

Which of the following groups of people can benefit from having enough time? (Check all that apply)

  • people with a learning disability
  • people using a switch control
  • people whose native language is different than the language of the page
  • people with attention disorders
A

All of the above
Many people can benefit from having enough time.

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

Providing clear information about time limits - and instructions for extending it - is essential for many people. (True or False)

A

True

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

Content should not flash or blink more than three times per second. (True or False)

A

True

When content flashes or blinks faster than that, there is a risk that you could induce a seizure or make someone ill.

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

Fast moving animations can make people sick or trigger seizures. (True or False)

A

True

Avoid fast moving elements on your website, so you don’t inadvertently make someone ill.

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

Animated media must not auto-play for more than ten seconds. (True or False)

A

False

Animated media must not auto-play for more than five seconds.

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

Which of the two titles below is better?

Acme Web Solutions, Inc. | Contact Us
Contact Us | Acme Web Solutions, Inc.

A

Contact Us | Acme Web Solutions, Inc.

It is important to front-load important information on a page title.

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

Good page titles will help which of the following groups of people? (Check all that apply.)

  • screen reader users to understand what page they are on
  • all users to know what content is in which browser tab, when they have multiple web pages open
  • all users to find the content they need when reviewing search results
A

All of the above

All of us can benefit from good page titles.

17
Q

Which link text should you avoid using?
- here
- click here
- read more
- download

A

All of the above

Unless you add more information programmatically, you should avoid link text that does not give context to where the link is going.

18
Q

Headings with proper mark-up make your content easier to navigate. (True or False)

A

True

Headings give an assistive technology device user more information about the structure of the page and can allow them to navigate to sections of the webpage that they want to know more about.

19
Q

If a focus indicator is not always visible to a keyboard-only user, the webpage will be difficult to use? (True or False)

A

True

It is difficult for a keyboard-only user to know where they are on a page, when there is no indicator about what they are focusing on. This is especially true for interactive and form elements.

20
Q

What are some different input modalities beyond keyboard?

A

Input modalities beyond keyboard, such as touch activation, voice recognition (speech input), and gestures make content easier to use for many people. Yet not everyone can use each of these input modalities, and to the same degree. Particular design considerations maximize the benefit of these input modalities. This includes:

  • Gestures that require dexterity or fine movement have alternatives that do not require high dexterity
  • Components are designed to avoid accidental activation, for example by providing undo functionality
  • Labels presented to users match corresponding object names in the code, to support activation by voice
  • Functionality that is activated by movement can also be activated through user interface components
  • Buttons, links, and other active components are large enough to make them easier to activate by touch

Meeting this requirement makes the content easier to use for many people with a wide range of abilities using a wide range of devices. This includes content used on mobile phones, tablet computers, and self-service terminals such as ticketing machines.

21
Q

What are some examples that can help users easily navigate, find content, and determine where they are?

A

Well organized content helps users to orient themselves and to navigate effectively. Such content includes:

  • Pages have clear titles and are organized using descriptive section headings
  • There is more than one way to find relevant pages within a set of web pages
  • Users are informed about their current location within a set of related pages
  • There are ways to bypass blocks of content that are repeated on multiple pages
  • The keyboard focus is visible, and the focus order follows a meaningful sequence
  • The purpose of a link is evident, ideally even when the link is viewed on its own

https://www.w3.org/WAI/fundamentals/accessibility-principles/#navigable

22
Q

What are examples that make sure users have enough time to read and use the content?

A

Some people need more time than others to read and use the content. For instance, some people require more time to type text, understand instructions, operate controls, or to otherwise complete tasks on a website.

Examples of providing enough time include providing mechanisms to:

  • Stop, extend, or adjust time limits, except where necessary
  • Pause, stop, or hide moving, blinking, or scrolling content
  • Postpone or suppress interruptions, except where necessary
  • Re-authenticate when a session expires without losing data

https://www.w3.org/WAI/fundamentals/accessibility-principles/#time

23
Q

What are some example of making sure functionality is available from a keyboard?

A

Many people do not use the mouse and rely on the keyboard to interact with the Web. This requires keyboard access to all functionality, including form controls, input, and other user interface components.

Keyboard accessibility includes:

  • All functionality that is available by mouse is also available by keyboard
  • Keyboard focus does not get trapped in any part of the content
  • Web browsers, authoring tools, and other tools provide keyboard support

Meeting this requirement helps keyboard users, including people using alternative keyboards such as keyboards with ergonomic layouts, on-screen keyboards, or switch devices. It also helps people using voice recognition (speech input) to operate websites and to dictate text through the keyboard interface.

https://www.w3.org/WAI/fundamentals/accessibility-principles/#keyboard

24
Q

Which of the following are types of input modalities?
- a keyboard
- a computer mouse
- touch screens
- voice commands

A

All of these options are all considered methods of digital communication.

25
Q

Design functionality means the website or app accepts input from a variety of different input modalities. (True or False)

A

True

It is important to not restrict your users in what methods they use to communicate.

26
Q

Providing larger clickable and touchable areas around buttons, links, and other controls helps which of the following groups of people?

  • Users who are blind
  • User with low hand dexterity
  • users who are hard of hearing
A
  • User with low hand dexterity

People who have motor issues are the target audience for increasing the touchable areas on functional elements.

27
Q

If the functionality is operable by keyboard, it is usable by: (Check all that apply.)

  • keyboards with ergonomic layouts
  • on-screen keyboards
  • switch devices
A

All of these assistive technology devices benefit from keyboard accessibility.

28
Q

When you set the time limit for web content, you need to provide mechanisms to: (Check all that apply.)

  • stop it
  • allow users to extend it
  • send an email
  • make a phone call
A

You must allow a user to stop or extend time limits if you want your website to be accessible.

29
Q

For people using voice input, an alternative text for a link image or a button image should be the same as the visible text on the image. (True or False)

A

True

The visual text is important, because that is the command that will be spoken by a user using voice input. If the image visually had the words “go” but programmatically it said “checkout” the voice command could fail.

30
Q

Which of the following aspects primarily help people navigate web pages using screen readers? (Check all that apply.)

  • web pages have clear titles
  • web pages are operable by mouse
  • keyboard focus is always visible
  • web pages are organized using descriptive section headings
A
  • web pages have clear titles
  • web pages are organized using descriptive section headings

People using screen readers benefit from clear titles and descriptive section headings. While the other aspects are also important to help navigation, they do not necessarily relate to the use of screen readers.

31
Q

Web content must be easier to use for many people with a wider range of abilities. Users are using different devices including: (Check all that apply.)

  • Mobile phones
  • Tablet computers
  • Self-service terminals
  • Video game console
A

All of these assistive technology devices can be used to interact with your website or app, so they need to be considered when considering accessibility.

32
Q

How can you make it possible for people using screen readers/Braille displays and people using only the keyboard to move to main content on a web page? (Check all that apply.)

  • provide a heading marked up with h1 at the beginning of the main content
  • indicate where main content starts by using HTML’s main element
  • provide hidden text only for screen users, to indicate where the main content starts
A
  • provide a heading marked up with h1 at the beginning of the main content
  • indicate where main content starts by using HTML’s main element

Hidden text could help screen reader/Braille users, but it would not benefit keyboard-only users.

33
Q

What is a best practice for good page titles?

  • front-load (put the important and unique information first)
  • back-load (put the important and unique information last)
A

Front-loaded page titles are critical to people using assistive technology devices such as screen readers, because they are always the first page element announced.

34
Q

Best practices for modal dialog/pop-up window in terms of keyboard only users. (Check all that apply.)

  • move keyboard focus into the window or dialog when it opens
  • move keyboard focus to the content behind the modal dialog/pop-up
  • move keyboard focus back to the button which triggered the window or dialog after it closed
A
  • move keyboard focus into the window or dialog when it opens
  • move keyboard focus back to the button which triggered the window or dialog after it closed
35
Q

How can you help people find information faster on your website? (Check all that apply.)

  • provide links to navigate to related webpages
  • provide a site map
  • provide a search function
  • present a phone number
  • present a fax number
  • present a email address
A

provide links to navigate to related webpages
- provide a site map
- provide a search function

While contact information is certainly important for your users, links, site maps, and a search feature are critical to finding information on a website.

36
Q

If the functionality of a webpage works using a keyboard, it means it is also easier to use with which of the following assistive technology devices? (Check all that apply.)

  • speech input device
  • onscreen keyboard
  • screen reader
A
  • speech input device
  • onscreen keyboard
  • screen reader

A speech input device, onscreen keyboard, and screen reader benefit from keyboard accessibility.

37
Q
A