WCAG Flashcards

1
Q

1

A

Information and user interface components must be presentable to users in ways they can perceive.

Perceivable

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

1.1

A

Provides text alternatives for any non-text content so it can be changed as the user needs it: large print, braille, speech, symbols, simpler language

Text alternatives

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

CRITICAL

1.1.1

A

A

All non-text content has a text alternative that serves equivalent purpose

Non-text Content

An audio recording of a speech
The link to an audio clip says, “Chairman’s speech to the assembly.” A link to a text transcript is provided immediately after the link to the audio clip.

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

1.2

A

Provides alternatives for time-based media

Time-based media

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

CRITICAL

1.2.1

A

A

For prerecorded audio-only or video-only media an alternative is provided that presents equivalent information

Audio-only and Video-only (Prerecorded)

A video-only file with an audio track
A silent movie includes an audio track which includes a description of the action in the video.

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

CRITICAL

1.2.2

A

A

Captions are provided for all prerecorded media in a synchronised way

Captions (prerecorded)

A video clip shows how to tie a knot. The captions read,

“(music)

Using rope to tie knots was an important skill

for the likes of sailors, soldiers and woodsmen..”

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

1.2.3

A

A

Audio description or an alternative for time-based media of the prerecorded video content is provided

Audio description or media alternative (prerecorded)

A movie with audio description
Describer: A title, “Teaching Evolution Case Studies. Bonnie Chen.” A teacher shows photographs of birds with long, thin beaks.

Bonnie Chen: “These photos were all taken at the Everglades.”

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

1.2.4

AA

A

Captions are provided for all live audio content in syncronised media

Captions (live)

A Web cast
A news organization provides a live, captioned Web cast.

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

1.2.5

AA

A

Audio description is provided for all prerecorded video in synchronised media

Audio description (prerecorded)

A movie with audio description
Describer: A title, “Teaching Evolution Case Studies. Bonnie Chen.” A teacher shows photographs of birds with long, thin beaks.

Bonnie Chen: “These photos were all taken at the Everglades.”

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

1.2.6

AAA

A

Sign language interpretation is used for prerecorded audio content

Sign language (prerecorded)

A corporation is making an important announcement to all of its employees. The announcement will be held in the main headquarters and later streamed to the Web. A sign language interpreter is provided at the announcement location for the employees that are present in the meeting room. For the Web version of the announcement, the sign language interpreter is shown/superimposed in the corner of the display.

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

1.2.7

AAA

A

When pauses in foreground audio are insuficient to insert audio description, extended audio description is provided for all prerecorded video content

Extended audio description (prerecorded)

Video of a lecture. A physics professor is giving a lecture. The professor makes freehand sketches on the whiteboard, speaking rapidly while drawing. As soon as discussion on one problem is finished, the professor erases the drawing and makes another sketch while continuing to speak and gesture. The video is paused between problems, and extended audio description of the professor’s drawings and gestures is provided; the video is then resumed.

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

1.2.8

AAA

A

An alternative is provided for all prerecorded synchronised and video-only media

Media alternative (prerecorded)

Braille or other type of material that can be used by someone who can neither see nor hear properly

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

1.2.9

AAA

A

An alternative for media that presents equivalent information for live audio-only content is provided

Audio-only (live)

A public relations firm uses Web based caption services to cover live events; the output from the service is incorporated in a sub frame of the Web page which includes the streaming audio control.
A transcript is provided when live captions are not an option.

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

1.3

A

Create content that can be presented in different ways (e.g. simpler) without losing information or structure

Adaptable

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

CRITICAL

1.3.1

A

A

Information, structure and relationships conveyed through presentation can be programmatically determined or is available in text

Info and relationships

A form with required fields
A form contains several required fields. The labels for the required fields are displayed in red. In addition, at the end of each label is an asterisk character, *. The instructions for completing the form indicate that “all required fields are displayed in red and marked with an asterisk *”, followed by an example.

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

1.3.2

A

A

When the sequence in which content is presented affects meaning, a correct reading sequence should be programmatically determined

Meaningful sequece

In a multi-column document, the linear presentation of the content flows from the top of a column to the bottom of the column, then to the top of the next column.

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

CRITICAL

1.3.3

A

A

Instructions for understanding and operating content do not rely solely on sensory characteristics such as shape, colour, size, visual location, orientation or sound.

Sensory characteristics

An online multi-page survey uses a link implemented as a green arrow icon placed in the lower right hand corner of the content to move from one survey page to the next. The arrow is clearly labeled with “Next” and the instructions state, “To move to the next section of the survey, select the green arrow icon labeled ‘Next’ in the lower right corner below the last survey question.” The instruction uses positioning and color to help identify the icon; the instruction does not rely on these sensory characteristics since it also refers to the label, so it passes this criterion.

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

1.3.4

AA

A

Content does not restrict its view to a single display orientation (portrait or landscape)

Orientation

A video is shown in either portrait or in landscape based on the user’s chosen orientation.
An example where orientation is essential could be a banking app that requires the device be in landscape mode to easily and accurately capture an image of a check for deposit.

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

1.3.5

AA

A

The purpose of each input field that collects user information can be programmatically determined when the input field serves a purpose previously identified and the content is implemented using technologies which support identifying the expected meaning of the input

Identify input purpose

A browser plugin to add icons inserts icons representing the person’s name, home address, telephone number and email address to identify the input purpose visually.

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

1.3.6

AAA

A

In content implemented using markup languages, the purpose of user interface components, icons, and regions can be programmatically programmed

Indetify purpose

A website uses ARIA landmarks to identify the regions of the page, and users can hide areas that do not have a role of main.
The links in the navigation of a website are marked up so that users can add their own icons.

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

1.4

A

Make it easier for users to see and hear content including separating foreground from background

Distinguishable

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

CRITICAL

1.4.1

A

A

Colour is not used as the only visual means of conveying information

Use of colour

Students view an SVG image of a chemical compound and identify the chemical elements present based both on the colors used, as well as numbers next to each element. A legend shows the color and number for each type of element.

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

1.4.2

A

A

If an audio is autoplayed for more than 3 seconds, there’s a way to pause or stop it, or to control the volume independently to the device

Audio control

An audio file begins playing automatically when a page is opened. However, the audio can be stopped by the user by selecting a “silent” link at the top of the page.

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

1.4.3

AA

A

Text and images of text have a contrast ratio of 4.5:1 except large scale, decoration or logos

Contrast (minimum)

Some people with cognitive disabilities require color combinations or hues that have low contrast, and therefore we allow and encourage authors to provide mechanisms to adjust the foreground and background colors of the content. Some of the combinations that could be chosen may have contrast levels that will be lower than those those specified here. This is not a violation of this Success Criterion, provided there is a mechanism that will return to the required values set out here.

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

1.4.4

AA

A

Except for captions and images, text can be resized without assistive technology up to 200% without loss of content or functionality

Resize text

A user changes the scale of the content with the browser’s full-page zoom function. All the content scales uniformly, and the browser provides scroll bars, if necessary.

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

CRITICAL

1.4.5

AA

A

Text is used instead of images of text except it it’s customisable or essential (logos)

Images of text

Rather than using bitmap images to present headings in a specific font and size, an author uses CSS to achieve the same result.

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

1.4.6

AAA

A

Text and images of text have contrast ratio of at least 7:1, except large text (4.5:1), incidental (inactive component, decoration or not visible), or logos

Contrast (enhanced)

Images of text do not scale as well as text because they tend to pixelate. It is also harder to change foreground and background contrast and color combinations for images of text, which is necessary for some users.

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

1.4.7

AAA

A

For prerecorded audio-only content, there is no background noise, it can be turned off, or it’s 20dB lower than the foreground speech

Low or no background audio

Ensure that any non-speech sounds are low enough that a user who is hard of hearing can separate the speech from background sounds or other noise foreground speech content.

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

1.4.8

AAA

A

Blocks of text can have the foreground and background colours personalised by the user, width is no more than 80 characters, text is not justified left or right, line spacing is at least 1.5, paragraph spacing is 1.5x larger than line spacing, text can be resized without use of assistive technology

Visual presentation

People with some cognitive disabilities can read text better when they select their own foreground and background color combinations; can track their locations more easily when blocks of text are narrow and when they can configure the amount of space between lines and paragraphs; can read text more easily when the spacing between words is regular.

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

1.4.9

AAA

A

Images of text are only used for decoration or when they are essential (logos)

Images of text (no exception)

A Web page contains a menu of navigation links that have both an icon and text to describe their target. CSS is used to display the text’s font family, size and foreground and background colors; as well as the spacing between the navigation links.

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

1.4.10

AA

A

Content is presented without loss of presentation and functionality, and not needing scrolling with vertical scrolling content at a width of 320 px and horizontal scrolling content at a height of 256 px

Reflow

This Success Criterion helps people with low vision who require text enlargement by enabling them to read the content seamlessly, eliminating the necessity to scroll in multiple directions.

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

1.4.11

AA

A

Visual presentation has a contrast ratio of 3:1 against adjacent colours in user interface components (controls) and graphical objects

Non-text contrast

Status icons on an application’s dashboard (without associated text) have a 3:1 minimum contrast ratio.
A text input has a dark border around the white editable area.
A graph uses a light background and ensures that the colors for each line have a 3:1 contrast ratio against the background.

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

1.4.12

AA

A

No loss of content or functionality if these styles are changed in relation to the font size: line height to 1.5x, spacing following paragraphs to 2x, letter spacing to 0.12x, word spacing to 0.16x

Text spacing

If the markup-based technologies being used are capable of overriding text to the Success Criterion’s metrics, then this SC is applicable.
Text fits within the bounds of its containing box without being cut off.
Text fits within the bounds of its containing box without overlapping other boxes.

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

1.4.13

AA

A

When hovering or focusing triggers content to become visible/hidden, it is possible to dismiss the content without moving the pointer/focus, pointer can be moved on additional content without it disappearing, content remains visible until dismissed or content no longer valid

Content on hover or focus

A button’s tooltip is displayed directly below it on mouse hover which can easily be obscured by a large pointer. The tooltip itself is able to be hovered so the mouse pointer can be moved down to its bottom edge in order to view the tooltip text.

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

2

A

User interface components and navigation must be operable.

Operable

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

2.1

A

Make all functionality available from a keyboard

Keyboard accessible

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

CRITICAL

2.1.1

A

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.

Keyboard

A drawing program allows users to create, size, position and rotate objects from the keyboard.
Exception - Model helicopter flight training simulator
A model helicopter flight training simulator passes as an exception because the nature of the simulator is to teach real-time behavior of a model helicopter.

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

CRITICAL

2.1.2

A

A

If keyboard focus can be moved to a component of the page using just the keyboard, then focus can be moved away from that component using only the kewyboard

No keyboard trap

A Web application brings up a dialog box. At the bottom of the dialog are two buttons, Cancel and OK. When the dialog has been opened, focus is trapped within the dialog; tabbing from the last control in the dialog takes focus to the first control in the dialog. The dialog is dismissed by activating the Cancel button or the OK button.

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

2.1.3

AAA

A

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.

Keyboard (no exceptions)

It means that content that uses path-dependent input cannot conform to this Success Criterion and therefore cannot meet Guideline 2.1 at Level AAA

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

2.1.4

A

A

If a keyboard shortcut is implemented using only a letter, punctuation or number, then there is either a way to turn it off, reconfigure it, or make it only active on focus

Character key shortcut

Keyboard-only users are in a long issues thread. While reading the thread they accidentally hit the S key, which moves focus to the search bar at the top of the document. This causes them to lose their place and train of thought. However, a mechanism is provided to allow users to change character-key shortcuts. They change the shortcut to include another key so they can avoid future interruptions.

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

2.2

A

Provide users enough time to read and use content.

Enough time

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

2.2.1

A

A

When the content has a time limit set, it has the option to be turned off, adjusted, extended and it’s not longer than 20 hours. Exceptions like real-time events or it being essential are accepted.

Timing adjustable

A Web site uses a client side time limit to help protect users who may step away from their computer. After a period of inactivity the Web page asks if the user needs more time. If it doesn’t get a response – it times out.
In an auction, there is a time limit on the amount of time a user has to submit a bid. Since the time limit applies to all users who want to bid on a particular item, it would be unfair to extend the time limit for any one particular user. Therefore, a time limit is required for this type of activity and no extension, adjustment, or deactivation of the time limit is required by this Success Criterion.

43
Q

CRITICAL

2.2.2

A

A

For any moving, blinking, scrolling or auto-updating information that starts automatically, lasts more than five seconds, and 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.

Pause, stop, hide

An animation runs in the upper portion of the page but has a “freeze animation” button near the bottom of the animation.
A site requires that all users view a 15 second advertisement before they can access free content available from their site. Because viewing the advertisement is a requirement for all users and because it is not presented in parallel with other content, no mechanism to pause, stop or hide it needs to be provided.

44
Q

2.2.3

AAA

A

Timing is not an essential part of the event or activity except for non-interactive synchronised media and real-time events.

No timing

Rather than calibrating an on-line test using a time limit, the test is calibrated based on scores when users have no time limits.

45
Q

2.2.4

AAA

A

Interruptions can be postponed or suppressed by the user, except in an emergency

Interruptions

The preferences page of a Web portal includes an option to postpone all updates and alerts until the end of the current session, except for alerts concerning emergencies.

46
Q

2.2.5

AAA

A

When an authenticated session expires, the user can continue the activity without losing progress/data when reauthenticated

Reauthenticating

An email program has an authentication time-out after 30 minutes. The program prompts the user several minutes before the time-out occurs and provides a link to open a new window in order to re-authenticate. The original window with the in-progress email remains intact and, after re-authentication, the user may send that data.

47
Q

2.2.6

AAA

A

Users are warned of the duration of any inactivity that could cause data loss unless it’s preserved for more than 20 hours when the user is inactive

Timeouts

While making a purchase on an e-commerce Web site, the information input by the user is stored for more than 20 hours. This helps ensure that if they need to stop working for a while that they are more likely to be able to continue the purchase when they return.
An online contact form does not implement any type of time out process. Information entered into the contact form can be submitted at any time and would only be lost if the user closes their browser window.

48
Q

2.3

A

Do not design content in a way that is known to cause seizures or physical reactions

Seizures and physical reactions

49
Q

CRITICAL

2.3.1

A

A

Web pages do not contain anything that flashes more than 3x in one second or the flash is below the general flash and red flash thresholds.

Three flashes or below threshold

A Web site has video of muzzle flash of machine gun fire, but limits the size of the flashing image to a small portion of the screen below the flash threshold size.
A movie with a scene involving very bright lightning flashes is edited so that the lightning only flashes three times in any one second period.

50
Q

2.3.2

AAA

A

Web pages do not contain anything that flashes more than 3x in one second

Three flashes

A movie with a scene involving very bright lightning flashes is edited so that the lightning only flashes three times in any one second period.

51
Q

2.3.3

AAA

A

Motion animation triggered by interaction can be disabled, unless it is essential to the functionality or information being conveyed.

Animations from interactions

A site includes extra animations when the user scrolls. Decorative elements move in and out of view horizontally when the essential page content is scrolled vertically. A control at the top of each page allows the user to turn off unnecessary animations. The ability to turn off non-essential animations is a site-wide setting.

52
Q

2.4

A

Provide ways to help users navigate, find content and determine where they are

Navigable

53
Q

2.4.1

A

A

A mechanism is available to bypass blocks of content that are repeated on multiple web pages

Bypass blocks

An e-commerce website includes a long list of filters prior to the search results listing. A link above the list enables users to skip the filters and get to the product results quickly.

54
Q

2.4.2

A

A

Pages have titles that describe topic or purpose

Page titled

The descriptive title of an HTML Web page is marked up with the <title> element so that it will be displayed in the title bar of the user agent.</title>

55
Q

2.4.3

A

A

Focusable components receive focus in an order that preserves meaning and operability (that makes sense)

Focus order

On a web page that contains a tree of interactive controls, the user can use the up and down arrow keys to move from tree node to tree node. Pressing the right arrow key expands a node, then using the down arrow key moves into the newly expanded nodes.

56
Q

2.4.4

A

A

The purpose of the links can be determined form the text alone or from the text together with its programmatically context

Link purpose (in context)

An icon of a voting machine and the text “Government of Ireland’s Commission of Electronic Voting” are combined to make a single link. The alt text for the icon is null, since the purpose of the link is already described by the text of the link next to the icon.

57
Q

2.4.5

AA

A

More than one way to locate a web page within a set of web pages is available

Multiple ways

A local hair salon has created a Web site to promote its services. The site contains only five Web pages. There are links on each Web page to sequentially move forward or backward through the Web pages. In addition, each Web page contains a list of links to reach each of the other Web pages.

58
Q

2.4.6

AA

A

Headings and labels describe topic or purpose

Headings and labels

The home page of a news site lists the headlines for the top stories of the hour. Under each heading are the first 35 words of the story and a link to the full article. Each headline gives a clear idea of the article’s subject.

59
Q

CRITICAL

2.4.7

AA

A

Any keyboard iperable UI has a visible keyboard focus indicator

Focus visible

When a user interface control receives focus, a visible border is displayed around it so that sighted keyboard users can operate the page.

60
Q

2.4.8

AAA

A

Information on user’s location within a set of pages is available

Location

A portal Web site organizes topics into categories. As the user navigates through categories and subcategories, a breadcrumb trail shows the current location in the hierarchy of categories. Each page also contains a link to the portal home page.

61
Q

2.4.9

AAA

A

The purpose of the links is identified from the link text alone

Link purpose (link only)

An icon of a voting machine and the text “Government of Ireland’s Commission of Electronic Voting” are combined to make a single link.

62
Q

2.4.10

AAA

A

Section headings are used to organise the content

Section headings

A menu contains different sections for different courses. Each section has a heading: Appetizers, Salad, Soup, Entree, Dessert.

63
Q

NEW

2.4.11

AA

A

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

Focus not obscured (minimum)

A user opens a chat interface, which is a popover non-modal dialog. This results in some content of the underlying page being fully obscured. The user navigates away from the chat interface by use of the tab key, focusing onto a link that has been fully obscured by the dialog. The user presses the Escape key to close the chat interface, which un-obscures the link.

64
Q

NEW

2.4.12

AAA

A

When a component receives keyboard focus, no port of it is obscured

Focus not obscured (enhanced)

A page has a large (30% wide) cookie approval dialog. The dialog is modal, preventing access to the other controls in the page until it has been dismissed. Focus is not obscured because the cookie approval dialog (including the focus indicator) remains on screen until selections are made and submitted.

65
Q

NEW

2.4.13

AAA

A

When the focus indicator is visible, it’s 2px thick and has a contrast ratio of at least 3:1

Focus appearance

When links receive focus, an outline is displayed around the link that contrasts with the background adjacent to the link.
When buttons receive focus, an outline is displayed within the button (around the text) that contrasts with the button’s background.
When text fields receive focus, an outline is displayed around the field, indicating that the input has focus.
When radio buttons receive focus, an outline is displayed around the control, indicating that the input has focus.

66
Q

2.5

A

Makes it easier for users to operate functionality using inputs beyond the keyboard

Input modalities

67
Q

2.5.1

A

A

Functionality that uses multipoint or path-based gestures can be operated with a single pointer

Pointer gestures

A web site includes a map view that supports the pinch gesture to zoom into the map content. User interface controls offer the operation using plus and minus buttons to zoom in and out.
A news site has a horizontal content slider with hidden news teasers that can moved into the viewport via a fast horizontal swipe/flicking motion. It also offers forward and backward arrow buttons for single-point activation to navigate to adjacent slider content.

68
Q

2.5.2

A

A

If using a single pointer, the down event is not used to execute the function, the up event completes the function and user can abort the down event before completion, up event reverses the preceding down event action. This is to make it easier for anyone to recover from something they didn’t mean to do.

Pointer cancellation

For interface elements that have a single tap or long press as input, the corresponding event is triggered when the finger is lifted inside that element.
A drag-and-drop interface allows users to sort vertically stacked cards by picking up one card with the pointer (down-event), move it to a new position, and insert it at the new location when the pointer is released (up-event). Releasing the pointer outside the drop target area reverts the action, i.e., it moves the card back to the old position before the interaction started.

69
Q

2.5.3

A

A

For components with labels that include text or image of text, the name contains the text that is shown visually. A best practice is to have the text of the label at the start of the name.

Label in name

Accessible name matches visible label: The accessible name and visible label of a control match.
Accessible name starts with visible label: The accessible name “Search for a value” begins with the text of the visible label, “Search”.

70
Q

2.5.4

A

A

Funcitonality that can be operated by motion or action can also be operated using other means and the motion can be disabled to prevent accidental actuation.

Motion actuation

A user can tilt a device to advance to the next or a previous page. Buttons are also provided to perform the same function.

71
Q

2.5.5

AAA

A

The target for pointer inputs is 44x44 px, except if the target is available through a link or control, it is in a sentence or block of text, the author cannot modify the target or a smaller size is essential.

Target size (enhanced)

Multiple targets are provided on the page that perform the same function. One of the targets is 44 by 44 CSS pixels. The other targets do not have a minimum touch target of 44 by 44 CSS pixels.
The target is an in-page link and the target is less than 44 by 44 CSS pixels.

72
Q

2.5.6

AAA

A

Web content does not restrict use of input modalities available unless it is essential (user can use more than one method to access pages)

Concurrent input mechanisms

A user with mobility impairment pairs a mouse and keyboard to a mobile phone with a touchscreen. The phone can thereafter be operated by those input devices and the content does not accept the touchscreen as the only input mechanism.

73
Q

NEW

2.5.7

AA

A

Funcitonality that is uses dragging movements can be perfomred with single pointer unless essential or not modified by the author

Dragging movements

A map allows users to drag the view of the map around, and the map has up/down/left/right buttons to move the view as well.
A sortable list of elements may, after tapping or clicking on a list element, provide adjacent controls for moving the element up or down in the list by simply tapping or clicking on those controls.

74
Q

NEW

2.5.8

AA

A

The size of the target for pointer inputs is 24x24 px except if the function can be executed using a different control, it’s in a sentence, not modified by the author or is essential.

Target size (minimum)

A row of buttons, each of which has a horizontal width of more than 24 CSS pixels, a height of only 20 CSS pixels, and vertical margin of 4 CSS pixels above and below the row of buttons. Since there is sufficient spacing both above and below the row of buttons, the Success Criterion passes.
Links within a paragraph of text have varying target dimensions. Links within paragraphs of text do not need to meet the 24 by 24 CSS pixels requirements, so the Success Criterion passes.

75
Q

3

A

Information and the operation of the UI must be understandable

Understandable

76
Q

3.1

A

Make the content readable and understandable

Readable

77
Q

3.1.1

A

A

The default language of the page can be programmatically determined

Language of page

A Web page produced in Germany and written in HTML includes content in both German and English, but most of the content is in German. The default human language is identified as German (de) by the lang attribute on the html element.

78
Q

3.1.2

AA

A

The language of each passage or phrase can be programmatically determined except for proper names, technical terms, indeterminate language or terms that are now part of the vernacular of the main passage language.

Language of parts

In the sentence, “He maintained that the DDR (German Democratic Republic) was just a ‘Treppenwitz der Weltgeschichte’,” the German phrase ‘Treppenwitz der Weltgeschichte’ is marked as German. Depending on the markup language, English may either be marked as the language for the entire document except where specified, or marked at the paragraph level. When a screen reader encounters the German phrase, it changes pronunciation rules from English to German to pronounce the word correctly.
Because “podcast” is part of the vernacular of the immediately surrounding text in the following excerpt, “À l’occasion de l’exposition “Energie éternelle. 1500 ans d’art indien”, le Palais des Beaux-Arts de Bruxelles a lancé son premier podcast. Vous pouvez télécharger ce podcast au format M4A et MP3”, no indication of language change is required.

79
Q

3.1.3

AAA

A

There’s a mechanism available for identifying unusual or restricted words, including idioms and jargon.

Unusual words

The specific definition of a word is provided at the bottom of the page
The internal link from the word to the corresponding definition is also provided within the page.

80
Q

3.1.4

AAA

A

A mechanism is available to expand the meaning of abbreviations

Abbreviations

The name, “World Wide Web Consortium,” appears as the first heading on the organization’s home page. The abbreviation, “W3C,” is enclosed in parentheses in the same heading.

81
Q

3.1.5

AAA

A

When text requires higher educational level for understanding, a lower level of the same text is available

Reading level

A scientific journal includes articles written in highly technical language aimed at specialists in the field. The journal’s Table of Contents page includes a plain-language summary of each article. The summaries are intended for a general audience with eight years of school.

82
Q

3.1.6

AAA

A

A mechanism is available to identify pronunciation of words that have ambiguous meaning

Pronunciation

Web content in Japanese provides kana (Japanese phonetic syllabary characters) written next to Han characters (Kanji) show the pronunciation of a person’s name. The kana is provided to users in parentheses right after the word. Giving the reading of the words written in Han characters (Kanji) allows both sighted users and screen readers to read/pronounce the words correctly. Note that screen readers will speak the word twice: the Han characters (Kanji) that can be pronounced in a wrong way are read first and then kana is spoken in order to provide the correct reading.

83
Q

3.2

A

Make web pages appear and opperate in predictable ways

Predictable

84
Q

CRITICAL

3.2.1

A

A

When an UI component receives focus, it doesn’t initiate a change of context (doesn’t open or close anything just with the focus)

On focus

A dropdown menu on a page allows users to choose between jump destinations. If the person uses the keyboard to move down to a choice and activates it (with a spacebar or enter key) it will jump to a new page. However, if the person moves down to a choice and either hits the escape or the tab key to move out of the pulldown menu – it does not jump to a new screen as the focus shifts out of the dropdown menu.

85
Q

3.2.2

A

A

Changing the setting of an UI componenet doesn’t automatically change the context, unless the behaviour has been announced.

On input

A form contains fields representing US phone numbers. All of the numbers have a three digit area code followed by a three digit prefix and finally a four digit number, and each part of the phone number is entered into a separate field. When the user completes the entry of one field the focus automatically moves to the next field of the phone number. This behavior of phone fields is described for the user at the beginning of the form.

86
Q

3.2.3

AA

A

Navigational mechanisms that are repeated in multiple pages occur in the same relative order unless the user changes it

Consistent navigation

Navigational content is consistently located at the end of each page in a set of Web pages. A “skip to navigation” link is consistently located at the beginning of each page so that keyboard users can easily locate it when needed.

87
Q

3.2.4

AA

A

Components that have the same functionality are identified consistently

Consistent identification

A document icon is used to indicate document download throughout a site. The text alternative for the icon always begins with the word “Download,” followed by a shortened form of the document title. Using different text alternatives to identify document names for different documents is a consistent use of text alternatives.

88
Q

3.2.5

AAA

A

Changes of context only occur if initiated by the user, or can be stopped by the user.

Change on request

Instead of automatically updating the content, the author provides an “Update now” button that requests a refresh of the content.

89
Q

NEW

3.2.6

A

A

If a help button is avaiable (human contact details or mechanism, self-help or fully automated) and is repeated in multiple pages, it occurs in the same order in all pages, unless the user changes something

Consistent help

Medical appointment scheduling form: When the service a patient is trying to book is not easily findable within the interface, they may need human help. A consistently located messaging option (chat client) enables them to quickly interact with a staff person that can help, without requiring them to manage a second interface.

90
Q

3.3

A

Helps users avoid and correct mistakes

Input assistance

91
Q

CRITICAL

3.3.1

A

A

If an input error is detected, the error is identified and described in text

Error identification

The user fails to fill in two fields on the form. In addition to describing the error and providing a unique character to make it easy to search for the fields, the fields are highlighted in yellow to make it easier to visually search for them as well.

92
Q

CRITICAL

3.3.2

A

A

Labels or instructions are provided when the content requires user input

Label or instructions

A field which requires the user to enter the two character abbreviation for a US state has a link next to it which will popup an alphabetized list of state names and the correct abbreviation.
A field for entering a date has text instructions to indicate the correct format for the date.

93
Q

3.3.3

AA

A

If an input error is detected and the correction is know, the correction is suggested unless it could interefere with security or the purpose of the input

Error suggestion

An input field requires that a month name be entered. If the user enters “12,” suggestions for correction may include:
A list of the acceptable values, e.g., “Choose one of: January, February, March, April, May, June, July, August, September, October, November, December.”
The conversion of the input data interpreted as a different month format, e.g., “Do you mean ‘December’?”

94
Q

CRITICAL

3.3.4

AA

A

For pages that use legal or financial transactions, the data submitted can be reversed, checked and able to modify, or confirmed before submission

Error prevention (legal, financial, data)

A Web retailer offers on-line shopping for customers. When an order is submitted, the order information—including items ordered, quantity of each ordered item, shipping address, and payment method—are displayed so that the user can inspect the order for correctness. The user can either confirm the order or make changes.

95
Q

3.3.5

AAA

A

Context-sensitive help is available

Help

Some of the questions may be hard for new job seekers to understand. A help link next to each question provides instructions and explanations for each question.

96
Q

3.3.6

AAA

A

For pages that require users to submit information, the data can be either reversed, checked and modified, and confirmed before submission. (see 3.3.4)

Error prevention (all)

People with reading disabilities may transpose numbers and letters, and those with motor disabilities may hit keys by mistake. Providing safeguards to avoid consequences resulting from mistakes helps users with all disabilities who may be more likely to make mistakes.

97
Q

NEW

3.3.7

A

A

Information that has already been provided by the user and is required again is either auto-populated or accessible for selection, unless for security or intentional purposes.

Redundant entry

A form on an e-commerce website allows the user to confirm that the billing address and delivery address are the same address.

98
Q

NEW

3.3.8

AA

A

A cognitive function test (password or puzzle) is not required in an authentication process unless it also provides an alternative method, a mechanism to assist the user, a test to recognise objects or something the user provided to the site

Accessible authentication (minimum)

A web site does not block paste functionality. The user is able to use a third-party password manager to store credentials, copy them, and paste them directly into a login form.

99
Q

NEW

3.3.9

AAA

A

A cognitive function test (password or puzzle) is not required in an authentication process unless it also provides an alternative method or a mechanism to assist the user

Accessible authentication (enhanced)

A web site offers the ability to login with a third-party provider using the OAuth method.
A web site that requires two-factor authentication displays a QR code which can be scanned by an app on a user’s device to confirm identity.

100
Q

4

A

The content must be robust enough to be interpreted by many user agents, including assistive technology

Robust

101
Q

4.1

A

Maximise compatibility with current and future assistive technologies

Compatible

102
Q

4.1.1

A

OBSOLETE AND REMOVED

Parsing

103
Q

CRITICAL

4.1.2

A

A

For all UI components, the name and role can be programatically determined; states, properties and values can be set my the user; notification of changes is available to user agents and assistive technologies

Name, role, value

Providing role, state, and value information on all user interface components enables compatibility with assistive technology, such as screen readers, screen magnifiers, and speech recognition software, used by people with disabilities.

104
Q

4.1.3

AA

A

In content using markup langauge, satus messages can be programmatically determined thorugh role or properties so that assistive technologies can pick them up without focus

Status messages

After a user presses a Search button, the page content is updated to include the results of the search, which are displayed in a section below the Search button. The change to content also includes the message “5 results returned” near the top of this new content. This text is given an appropriate role for a status message. A screen reader announces, “Five results returned”.