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

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

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

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

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

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

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.

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.

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.

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.

26
Q

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.

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.

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.

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.

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.

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.

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.

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.

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.

35
Q

2

A

User interface components and navigation must be operable.

Operable

36
Q

2.1

A

Make all functionality available from a keyboard

Keyboard accessible

37
Q

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
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.

38
Q

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.

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

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.

41
Q

2.2

A

Provide users enough time to read and use content.

Enough time

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

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

Seizures and physical reactions

49
Q

2.4

A

Navigable

50
Q

2.5

A

Input modalities

51
Q

3.1

A

Readable

52
Q

3.2

A

Predictable

53
Q

3.3

A

Input assistance

54
Q

4.1

A

Compatible