Web Content Accessibility Guidelines (WCAG) 2.

1
Quick Reference Guide

Perceivable Link
Content must be available to users via sight, hearing and/or touch

1.1 Text alternatives

Provide text alternatives for any non-text content so that it can be converted into other form people need Link

1.1.1 Non-text content Any content "non-textual" and relevant to understanding the information, must bring an alternative text description [A] 2.0
(visible or not) to identify the content (e.g., including captcha).

1.2 Time-based media

Provide alternatives for video and audio. Closed captions and audio descriptions are required for time-synced video Link

1.2.1 Audio-only and video-only One of the following alternatives must be provided for the content presented: [A] 2.0
(Prerecorded) - Audio only: provide descriptive text transcription
- Video only: provide descriptive text transcription and/or an audio description strip that can be enabled
1.2.2 Captions (Prerecorded) Any pre-recorded content that contains an audio track (either audio or video only) must have a caption. [A] 2.0
1.2.3 Audio Description or Media An audio description or a descriptive text transcript must be provided for all prerecorded video content. Note: if an [A] 2.0
Alternative audio description is provided, criterion 1.2.5 (AA) will be met. If a transcript is provided, criterion 1.2.8 (AAA) will
be met.
1.2.4 Captions (Live) Any live content that contains an audio track (either audio or video only) must have a caption. [AA] 2.0
1.2.5 Audio Description An audio description must be provided for all prerecorded video content. [AA] 2.0
Note: see together with criterion 1.2.7 (AAA).
Info: when meeting this criterion, criterion 1.2.3 (A) will also be met.
1.2.6 Sign Language Any pre-recorded content that contains an audio track (whether audio or video only) must be translated into sign [AAA] 2.0
language (respective from your country of origin).
1.2.7 Audio Description If it is not possible to keep an audio description track together with the original audio of the video (e.g., overlapping [AAA] 2.0
(Extended) lines), an alternative must be provided that allows pausing the video, playing the audio description, and then
resuming the video. Note: see together with criterion 1.2.5 (AA).
1.2.8 Full Text Alternative A descriptive text transcript must be provided for all prerecorded video content. [AAA] 2.0
Info: when meeting this criterion, criterion 1.2.3 (A) will also be met.
1.2.9 Live Audio-only Any audio content that is broadcast live must have a descriptive text transcript. Tip: the transcript, in this case, is [AAA] 2.0
provided by shorthands due to greater assertiveness. Automated services do not meet the criteria satisfactorily.
1.3 Adaptable
Create content that can be presented in different ways without losing information or structure Link

1.3.1 Info and Relationships The structural organization of a screen must be constructed in such a way that its information architecture makes [A] 2.0
sense to both those who see and those who hear the content. Tip: the challenge here is to provide equivalent
experiences related to visual and auditory contexts.
1.3.2 Meaningful Sequence Whatever the method of interaction, the presentation of information on the screen should always have a logical [A] 2.0
sequence. Tip: responsive content should not impact the understanding of the information regardless of the size of
the screen. Note: see together with criteria 2.4.3 (A).
1.3.3 Sensory Characteristics Any type of instruction or direction should not depend on a specific format, spatial location, sound, or any other [A] 2.0
sensory characteristic. e.g., avoid expressions like "click the button below" or "click the green button" "or" "when
you hear a beep, select an option".
1.3.4 Orientation No functionality should depend on specific screen orientation (e.g., turning the phone horizontally) unless the [AA] 2.1
function needs to be performed.
1.3.5 Identify Input Purpose People should be clear about what to fill in form fields. Tip: In a field that asks you to fill in the email, it must be [AA] 2.1
clear which email should be filled in (personal? Commercial? Etc). Note: see together with criterion 2.4.6 (AA) and
3.3.2 (A).
1.3.6 Identify Purpose Using easily identifiable symbols and elements in an interface is a start, but it does not guarantee that everyone will [AAA] 2.1
understand the information. Enabling customizations (e.g., a person closing an ad or reducing the amount of
information on the screen) increases the cognitive ability for some people (see full criteria).
1.3 Distinguishable
Provide adequate colour contrast and reduce visual clutter that affects legibility Link

1.4.1 Use of Color Colors should not be used as the only way to convey content or distinguish visual elements. Tip: an error message [A] 2.0
on a form should have an alert icon, a clear message telling you how to correct the error, and also a color
highlighting the information (and not just the color change).
1.4.2 Audio Control A simple way to pause, mute, or adjust the volume for any audio that plays automatically for more than 3 seconds [A] 2.0
on the interface must be provided.
1.4.3 Contrast (Minimum) Texts must have a contrast ratio between foreground and background of at least 4.5:1 (see full criterion). Note: if [AA] 2.0
the text font size is at least "18pt" or "14pt bold", the contrast ratio can be 3:1.
1.4.4 Resize text When zooming up to 200% on the screen, the responsiveness of the texts presented must occur so that their [AA] 2.0
reading and legibility remain adequate without any break in the presentation of the information.
Note: see together with criterion 1.4.10 (AA)
1.4.5 Images of Text Any excerpt on the screen that can be displayed in stylized text format (e.g., a quote from a sentence by a specific [AA] 2.0
author or a session title), should not be presented in image format unless it can be customized by the person.
Note: see together with criterion 1.4.9 (AAA).
1.4.6 Contrast (Enhanced) Texts must have a contrast ratio between foreground and background of at least 7:1 (see full criteria). Note: if the [AAA] 2.0
font size of the text is at least "18pt" or "14pt bold" the contrast ratio can be 4.5:1.
1.4.7 Low or No Background Any type of sound that is not the main voice in an audio or video must be low, non-existent, or have a type of [AAA] 2.0
Audio simple control that allows it to be turned off.

P a g e 1|4
1.4.8 Visual Presentation Provide specific controls to allow control of the presentation of information on screen without compromising its [AAA] 2.0
readability. Tip: It should be possible to adjust colors between the foreground and background, keep the width of
paragraphs up to 80 characters or allow the adjustment of their spacing.
1.4.9 Images of Text (No Text images are allowed only when these images are decorative and not essential for understanding the content. [AAA] 2.0
Exception) Tip: brands and logos are examples of exceptions to the rule. Info: when meeting this criterion, criterion 1.4.5 (AA)
will also be met.
1.4.10 Reflow When zooming up to 400% on the screen, the information presented must be responsive so that the horizontal [AA] 2.1
scroll does not occur. The elements need to adapt to the screen to the point of avoiding vertical and horizontal
scrolling. Note: see together with criterion 1.4.5 (AA).
1.4.11 Non-Text Contrast Interface components (e.g., buttons) and images essential for understanding the content must have a contrast ratio [AA] 2.1
between foreground and background of at least 3:1. Note: see together with criteria 1.4.3 (AA) and 1.4.6 (AAA).
1.4.12 Text Spacing Whenever people make adjustments and resize (on their own) the texts of content to some specific values (see full [AA] 2.1
criteria), there should be no loss of legibility of the information presented. Note: see together with criterion 1.4.8
(AAA).
1.4.13 Content on Hover or Focus Additional content (e.g., tooltip or sub-menu) should not be triggered with focus only by mouse (mouseover) or [AA] 2.1
keyboard. If this occurs, certain conditions must be met (see full criteria).

Understandable Link
Content must be readable & predictable, with clear labels & instructions

3.1 Readable
Readable and understandable both visually and cognitively Link

3.1.1 Language of Page Properly declaring the language of the screen causes screen readers to use a correct intonation to quote content. [A] 2.0
Always declare them. Note: see together with criteria 3.1.2 (AA) and 3.1.6 (AAA).
3.1.2 Language of Parts The language of a particular word or phrase containing a language other than the original on the screen must be [AA] 2.0
defined and correctly identified, so that correct intonation and proper pronunciation via screen readers also occur.
Note: see together with criteria 3.1.1 (A) and 3.1.6 (AAA).

3.1.3 Unusual Words The use of slang, jargon, metaphors, and figures of speech can be an obstacle to understanding information. In this [AAA] 2.0
sense, a form of translation or explanation of the information must be provided (e.g., link to access a glossary).
3.1.4 Abbreviations An abbreviation or acronym is not always understandable by all people. In this sense, a way of identifying its real [AAA] 2.0
meaning must be provided (e.g., link to access a "from-to" table).
3.1.5 Reading Level If a given content is so complex that a person with complete elementary education* is not able to understand it, it [AAA] 2.0
will be necessary to review it or use complementary content that facilitates its understanding. Note: *based on
international levels (UNESCO)
3.1.6 Pronunciation Specific regional words and proper names often have specific pronunciation. A way must be provided to enable the [AAA] 2.0
correct understanding of the pronunciation in some cases. Note: see together with criteria 3.1.1 (A) and 3.1.2 (AA).
3.2 Predictable
Make pages appear and operate in predictable ways Link

3.2.1 On Focus No contextual changes that can disorient anyone should occur from focusing on any element in the interface (e.g., [A] 2.0
opening a modal window) without direct confirmation (e.g., a confirmation button). Note: see together with criteria
3.2.2 (A) and 3.2.5 (AAA).
3.2.2 On Input No contextual changes that can disorient anyone should occur when there is an interaction in a data entry field (e.g., [A] 2.0
form elements) without direct confirmation (e.g., a confirmation button). Note: see together with criteria 3.2.1 (A)
and 3.2.5 (AAA).
3.2.3 Consistent Navigation Consistency about the format of presentation, interaction, and location on the screen must be maintained whenever [AA] 2.0
the same elements (e.g., a search field) are displayed on different screens that are part of the same application
(website or app). Note: see together with criterion 3.2.4 (AA).
3.2.4 Consistent Identification Consistency must be maintained concerning different element formats, but which have the same functionality (e.g., [AA] 2.0
an icon and a button to download something), increasing the cognitive ability for some people. Note: see together
with criterion 3.2.3 (AA).
3.2.5 Change on Request Any change of context that may disorient people should only occur when requested by the person using it (e.g., a [AAA] 2.0
button to confirm an action). Info: when meeting this criterion, criteria 3.2.1 and 3.2.2 will also be met.

3.3 Input Assistance

Help users avoid making mistakes; make corrections easy Link

3.3.1 Error Identification Whenever an error message is displayed, it must identify which element generated the error visually and audibly [A] 2.0
(e.g., color change in the element + an alert icon + a text message). Note: see together with criterion 3.3.3 (AA).
3.3.2 Labels or Instructions All labels must clearly and unambiguously describe the purpose of the form fields. Tip: include instructions and tips [A] 2.0
for filling in the fields whenever possible. Note: see together with criteria 1.3.1 (A), 1.3.5 (AA), 2.4.6 (A), 2.5.3 (A).
3.3.5 (AAA) and 4.1.2 (A).
3.3.3 Error Suggestion Whenever an error message is displayed, it should also give tips on how to resolve the error (it is not enough to [AA] 2.0
indicate that an error has occurred). Note: see together with criterion 3.3.1 (A)
3.3.4 Error Prevention (Legal, A form of data confirmation or the possibility of canceling the submission must be provided whenever fields of [AA] 2.0
Financial, Data) forms require the filling of data that involve legal, financial responsibility, or contain sensitive data. Note: see
together with criterion 3.3.6 (AAA).
3.3.5 Help A simple way of obtaining "contextualized" help with the information displayed on the screen should be provided. [AAA] 2.0
e.g., an informational tooltip or a table with additional information. Note: see together with criteria 3.2.6 (A) and
3.3.2 (A).
3.3.6 Error Prevention (All) A form of data confirmation or the possibility of canceling the submission must be provided whenever form fields [AAA] 2.0
require data filling (any type of data). Note: see together with criterion 3.3.4 (AA).

P a g e 2|4
Operable Link
Product must be keyboard accessible, navigable & compatible with different input methods

2.1 Keyboard accessible

Make all functionality available from a keyboard Link

2.1.1 Keyboard All functionality must be activated via the keyboard unless the functionality does not allow keyboard-only control. [A] 2.0
Tip: the criterion also meets Bluetooth keyboards configured on mobile devices (see criterion 2.5.6). Note: see
together with criteria 2.1.2 (A) and 2.1.3 (AAA).
2.1.2 No Keyboard Trap When interacting via the keyboard, navigation through all "clickable" elements must occur without any blocking or [A] 2.0
interruption. Tip: "non-clickable" elements are triggered by specific keyboard shortcuts when the screen reader is
enabled.
2.1.3 Keyboard (No Exception) All functionality must be activated via the keyboard, without exception. Note: when meeting this criterion, criterion [AAA] 2.0
2.1.1 (A) will also be met.
2.1.4 Character Key Shortcuts The creation of keyboard shortcuts should be avoided using only simple characters (e.g., letters or numbers) that [A] 2.1
may conflict with existing shortcuts in the system. If this occurs, certain conditions must be met (see full criteria).

2.2 Enough time

Provide user enough time to read & use content Link

2.2.1 Timing Adjustable If a feature is defined that requires time to run and it is not essential (mandatory from a legal point of view), an [A] 2.0
option to turn it off or an option to expand it must also be included. Note: see together with criteria 2.2.6 (AAA) and
3.2.1 (A).
2.2.2 Pause, Stop, Hide Any element on the screen that has automatic movement or blink and that lasts more than 5 seconds, must have a [A] 2.0
type of control where the person using it can pause, stop or hide (see full criteria). Note: see together with
criterion 2.3.3 (AAA), which refers exclusively to the triggering caused by people.
2.2.3 No Timing No on-screen functionality should have any kind of execution upon fulfillment in a certain time. Tip: Real-time [AAA] 2.0
events are exceptions.
2.2.4 Interruptions Any type of interruption (e.g., message alerts in a chat) that can confuse someone must have an option that allows [AAA] 2.0
their disconnection or postponement unless it involves an emergency that preserves the person's health, safety, or
property.
2.2.5 Re-authenticating When an authenticated session expires, anyone logged in must be able to continue their activity without any loss of [AAA] 2.0
data when performing a new authentication in the environment.
2.2.6 Timeouts If there is inactivity (less than 20 hours) and this results in the loss of previously filled data, a message should be [AAA] 2.1
sent on the screen informing the person that this data will be lost. Note: see together with criterion 2.2.1 (A).
2.3 Seizures
Do not design content that might trigger a seizure for people with photosensitive epilepsy Link

2.3.1 Three Flashes or Below No page content should flash more than 3 times per second unless the flashes are in low contrast or have little red [A] 2.0
Threshold (see full criteria). Note: see together with criterion 2.3.2 (AAA).
2.3.2 Three Flashes No page content should flash more than 3 times per second, without exception (see full criteria). Info: when [AAA] 2.0
meeting this criterion, criterion 2.3.1 (A) will also be met.
2.3.3 Animations from Any type of interactive animation (not essential) and triggered by the person (e.g., scrolling with parallax effect) [AAA] 2.1
Interactions must have a simple way to be deactivated. Note: see together with criterion 2.2.2 (A), which refers exclusively to
automatic activation.
2.4 Navigable
Provide multiple, intuitive ways for users to navigate content Link

2.4.1 Bypass Blocks A type of control must be provided so that people can ignore certain repetitive content (e.g., a navigation menu). [A] 2.0
Tip: this is an exclusive criterion for people who use the keyboard. Note: see together with criteria 1.3.1 (A), 2.4.2
(A) and 2.4.10 (AAA).
2.4.2 Page Titled All screens must have the main title and clearly describe their purpose. [A] 2.0
2.4.3 Focus Order The interaction by focusable elements on the screen should always be sequential and logical according to the [A] 2.0
content presented. Note: see together with criterion 1.3.2 (A).
2.4.4 Link Purpose (In Context) The purpose of a link must be determined from the text of the link itself or the context surrounding this link. Tip: [A] 2.0
the criterion is also applicable to clickable buttons or icons. Note: see together with criterion 2.4.9 (AAA).
2.4.5 Multiple Ways People should always have more than one option to find a particular piece of content. e.g., the same content can [AA] 2.0
be accessed through a navigation menu or also through a search field.
2.4.6 Headings and Labels All titles (different levels) and labels (fields of forms) must clearly describe the purpose of the contents or [AA] 2.0
groupings on the screen elements without any ambiguity in their understanding. Note: see together with criteria
1.3.1 (A), 1.3.5 (AA), 2.4.2 (A), 2.5.3 (A), 3.3.2 (A) and 4.1.2 (A).
2.4.7 Focus Visible When interacting by keyboard, anyone should be able to identify their spatial location on the screen through a [A] 2.0
(visible) focus identifying their location. Note: This criterion was promoted to level (A). Use in conjunction with
criteria 2.4.11 (AA) and 2.4.12 (AAA).
2.4.8 Location Anyone should be able to locate or orient themselves easily on any part of the screen or a set of screens. e.g., the [AAA] 2.0
application of a "breadcrumb" meets this criterion.
2.4.9 Link Purpose The purpose of a link must be determined from the text of the link itself. Tip: the criterion is also applicable to [AAA] 2.0
(Link Only) clickable buttons or icons. Note: see together with criterion 2.4.4 (A).
2.4.10 Section Headings Whenever the content of the screen is divided into sessions, all of them must have clear titles, with well-defined [AAA] 2.0
hierarchy levels, facilitating the identification of areas. Note: see together with criterion 4.1.2 (A), which refers
exclusively to the semantics of the code.

2.5 Input Modalities

Make it easier for users to operate functionality through various inputs beyond the keyboard e.g., mouse pointer, touch screen,
electronic pencil or stylus
Link

2.5.1 Pointer Gestures Any functionality that requires a tactile path to be triggered (e.g., dragging with your finger on a touch screen) also [A] 2.1
needs an alternative method that facilitates interaction by those unable to perform the gesture (see full criteria).
P a g e 3|4
2.5.2 Pointer Cancellation It is possible that there is an accidental click or touches on a certain component and if the person notices this [A] 2.1
(before releasing the clicked or touched button), they must have a way to cancel the accidental activation. Note: a
complete reading of the criterion is highly recommended.
2.5.3 Label in Name Labels on buttons, actionable icons, or any interactive control, must have a meaningful description for both those [A] 2.1
who see and those who just hear the information. e.g., on a button, whose visible label is "buy now", its audible
form may be similar to "buy now the product X".
2.5.4 Motion Actuation If there is a feature that requires the device to be moved (e.g., “shake to undo”), a way must be offered to enable it [A] 2.1
to be switched off to avoid accidental activation. If this function is essential, an alternative activation must be
offered.
2.5.5 Target Size The size of the areas that can be clicked or tapped must be at least 44x44 pixels apart unless this area is in a [AAA] 2.1
sentence located in a block of text. Note: see together with criterion 2.5.8 (AA).
2.5.6 Concurrent Input Native functionality on a mobile device and a touch interface should not be compromised when the person engages [AAA] 2.1
Mechanisms a non-native peripheral (e.g., a Bluetooth keyboard or mouse). The functionalities must be able to be used even in
this scenario.

Robust Link
Product must work with a variety of assistive technologies, browsers, & devices

4.1 Compatible
Maximize compatibility across devices and make sure content is compatible with assistive technologies Link

4.1.1 Parsing Semantically correct code must be provided and without significant errors. Note for DEV: this criterion refers [A] 2.0
exclusively to the quality of the code for markup languages. However, it is possible to make a direct analogy with
programming languages.
4.1.2 Name, Role, Value All assistive technology makes use of the name, function, and value properties to properly identify the standardized [A] 2.0
elements of HTML. Any customized component must also bring these markings appropriately. Note for DEV: WAI-
ARIA techniques are well used in this criterion.
4.1.3 Status Messages Any type of message that is the result of an action or that informs the progress of a process and that is relevant to [AA] 2.1
the person, must be transmitted without a change of context (focus) on the screen. Note: a full reading of the criteria
is highly recommended to identify examples and use cases.

P a g e 4|4