Skip to main content

How can we help?

Search

WCAG 2.1 Compliance

Updated: Production Edited:

WCAG 2.1 Compliance

Level 1

Compliant WCAG Level WCAG Criteria WCAG Recommendation
 Yes A 1.1.1 Non-text Content All img tags must have alt attributes.
 Yes A 1.1.1 Non-text Content If short alt text is sufficient to describe an image, provide the short text via the image's alt attribute.
 Yes A 1.1.1 Non-text Content If a short text alternative is not sufficient to describe an image (such as in a chart, graph, or diagram), provide short text via the image's alt attribute, and include a long description in nearby text.
 Yes A 1.1.1 Non-text Content If an image or icon is used as a button or link, the image has a text alternative sufficient to describe the purpose of the button or link.
 Yes A 1.1.1 Non-text Content Images that are decorative, used for formatting, or contain content already conveyed in text have a null alt attribute or are implemented as CSS background images.
 Yes A 1.1.1 Non-text Content Frames and iFrames have descriptive titles.
 Yes A 1.1.1 Non-text Content Minimize the number of adjacent links to the same destination by combining adjacent images and text into a single link, rather than creating a separate link for each element.
 Yes A 1.2.1 Audio-only and Video-only (Prerecorded) For pre-recorded audio (without video), provide a descriptive transcript that includes dialogue and all other meaningful sound.
 Yes A 1.2.1 Audio-only and Video-only (Prerecorded) For pre-recorded video (without audio), provided a text alternative or audio descriptions that provide the same information presented
 Yes A 1.2.2 Captions (Prerecorded) Provide captions for prerecorded audio content in non-live synchronized media.
 Yes A 1.2.3 Audio Description or Media Alternative (Prerecorded) For non-live video, provide a descriptive transcript or an audio description.
 Yes A 1.3.1 Info and Relationships Use semantic markup to designate headings, lists, figures, emphasized text, etc.
 Yes A 1.3.1 Info and Relationships Organize pages using properly nested HTML headings.
 Yes A 1.3.1 Info and Relationships Use ARIA landmarks and labels to identify regions of a page.
 Yes A 1.3.1 Info and Relationships Reserve tables for tabular data, use table headers appropriately, and use table captions.
 Yes A 1.3.1 Info and Relationships When the appearance of text conveys meaning, also use appropriate semantic markup.
 Yes A 1.3.1 Info and Relationships Avoid emulating links and buttons. Use the a and button tags appropriately. Avoid using a tags for buttons. Avoid using div, span, etc. tags for links or buttons.
 Yes A 1.3.1 Info and Relationships Avoid using whitespace characters for layout purposes.
 Yes A 1.3.2 Meaningful Sequence Ensure that the source order presents content meaningfully. When the page is viewed without styles, all content on the page should still appear in a meaningful and logical order.
 Yes A 1.3.3 Sensory Characteristics Do not identify content based on its color, size, shape, position, sound, or other sensory characteristics.
 Yes A 1.3.3 Sensory Characteristics Do not convey information solely through icons or symbols.
 Yes A 1.4.1 Use of Color Links should always be easily identifiable through non-color means, including both default and hover states. The easiest and most conventional way to signify links is underlining.
 Yes A 1.4.1 Use of Color Required fields and fields with errors must include some non-color way to identify them.
 Yes A 1.4.1 Use of Color When the color of words, backgrounds, or other content is used to convey information, also include the information in text.
 N/A A 1.4.2 Audio Control Do not have audio that plays automatically on the page. When providing audio, also provide an easy way to disable the audio and adjust the volume.
 Yes A 2.1.1 Keyboard Avoid implementing access keys. When access keys and other keyboard shortcuts are implemented, they must not interfere with existing browser and screen reader provided shortcuts.
 Yes A 2.1.1 Keyboard All functionality should be available to a keyboard without requiring specific timing of keystrokes, unless the functionality cannot be provided by a keyboard alone.
 Yes A 2.1.1 Keyboard Avoid relying exclusively on pointer-driven events, such as onmouseover, to provide functionality when scripting. Generally, such functionality will also require scripting for keyboard operability.
 Yes A 2.1.1 Keyboard In general, avoid using scripts to remove focus from an element until the user moves focus manually.
 Yes A 2.1.2 No Keyboard Trap Ensure keyboard focus is never trapped on an element without an obvious way to move focus out of the element. Make sure the user can move focus to and from all focusable elements using a keyboard only.
 N/A A 2.1.4 Character Key Shortcuts If a keyboard shortcut uses only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then the user must be able to disable the shortcut, remap the shortcut, or limit the shortcut to only when a particular interactive element has focus.
 Yes A 2.2.1 Timing Adjustable Do not require time limits to complete tasks unless absolutely necessary. If a time limit is necessary, the time limit should be at least 20 hours, or it can be extended, adjusted, or disabled.
 Yes A 2.2.2 Pause, Stop, Hide Items on the page should not automatically move, blink, scroll, or update, including carousels. If content does automatically move, blink, scroll, or update, provide a way to pause, stop, or hide the moving, blinking, scrolling, or updating.
 Yes A 2.3.1 Three Flashes or Below Threshold Do not provide any content that flashes more than three times in any 1-second period.
 Yes A 2.4.2 Page Titled Make sure each web page has a title tag that is descriptive, informative, and unique.
 Yes A 2.4.3 Focus Order Create a logical tab order through links, form controls, and interactive objects.
 Yes A 2.4.3 Focus Order When inserting content into the DOM, insert the content immediately after the triggering element, or use scripting to manage focus in an intuitive way. When triggering dialogs and menus, make sure those elements follow their trigger in the focus order in an intuitive way. When content is dismissed or removed, place focus back on the trigger.
 Yes A 2.4.3 Focus Order Avoid using tab index values greater than 0.
 Yes A 2.4.4 Link Purpose (In Context) The purpose of each link can be determined from the link text alone, or from the link text and the containing paragraph, list item, or table cell, or the link text and the title attribute.
 Yes A 2.4.4 Link Purpose (In Context) If the visible text alone is not sufficient to convey meaning, use advanced techniques to provide additional meaning, such as ARIA attributes, screen reader only text, or the title attribute.
 Yes A 2.5.1 Pointer Gestures Do not require multipoint or path-based gestures (e.g. pinching, swiping, dragging) for functionality unless the gesture is essential to the functionality.
 Yes A 2.5.2 Pointer Cancellation Avoid triggering functionality on down-events, such as onmousedown. Use events such as onclick instead.
 Yes A 2.5.2 Pointer Cancellation If a function is triggered on an up-event (e.g. onmouseup), provide a way to abort or undo the function.
 Yes A 2.5.3 Label in Name The accessible name for a UI element must contain any visual label for the element. Accessible names for UI elements should match visual labels as closely as possible.
 Yes A 2.5.4 Motion Actuation Avoid activating functionality through motion (e.g. shaking a phone). If motion triggers functionality, provide a way to disable the motion trigger, and provide an alternative way to activate the functionality.
Yes A 3.1.1 Language of Page Provide a lang attribute on the page's html element.
Yes A 3.1.1 Language of Page When a visual label is present for an interactive element (e.g. link or form control), the accessible name of the element should contain the visual label.
Yes A 3.2.1 On Focus When the focus change, the page should not cause a change in page content, spawn a new browser window, submit a form, case further change in focus, or cause any other change that disorients the user.
Yes A 3.2.2 On Input When a user inputs information or interacts with a control, the page should not cause a change in page content, spawn a new browser window, submit a form, case further change in focus, or cause any other change that disorients the user. If an input causes such a change, the user must be informed ahead of time.
Yes A 3.3.1 Error Identification Programmatically indicate required fields using the required or aria-required attributes. Also, visually indicate required fields in the form's instructions or form labels. Do not indicate required fields for CSS alone.
Yes A 3.3.1 Error Identification Make errors easy to discover, identify, and correct.
Yes A 3.3.1 Error Identification Identify errors using aria-invalid.
Yes A 3.3.2 Labels or Instructions Use semantic, descriptive labels for inputs. Visually position labels in a consistent way that makes associating labels with form controls easy. Do not rely on placeholder text in lieu of an HTML label.
Yes A 3.3.2 Labels or Instructions Provide text instructions at the beginning of a form or set of fields that describes the necessary input.
Yes A 3.3.2 Labels or Instructions When providing inline help text, use aria-describedby to associate the help text with the input.
Yes A 4.1.1 Parsing Validate all page HTML, and avoid significant validation / parsing errors.
Yes A 4.1.2 Name, Role, Value Avoid creating custom widgets when HTML elements already exist. For example, use a and button tags appropriately.
Yes A 4.1.2 Name, Role, Value When creating a custom interactive widget, consult the ARIA Authoring Practices Document. Use ARIA labels, descriptions, roles, states, and properties to expose information about the component.
Yes A 4.1.2 Name, Role, Value Use ARIA to enhance accessibility only when HTML is not sufficient. Use caution when providing ARIA roles, states, and properties.

 

Level 2

Compliant WCAG Level WCAG Criteria WCAG Recommendation
N/A AA 1.2.4 Captions (Live) Provide captions for live audio and video.
N/A AA 1.2.5 Audio Description (Prerecorded) Videos should include "radio style" narration so that content makes sense if someone is consuming just the audio track. Include any text elements in the narration.
Yes AA 1.3.4 Orientation All content and functionality should be available regardless of whether a mobile device is oriented vertically or horizontally, unless the orientation of the device is absolutely essential.
Yes AA 1.3.5 Identify Input Purpose If a form field asks for information about the user and if there is an appropriate HTML autocomplete attribute, include that autocomplete attribute.
Yes AA 1.4.3 Contrast (Minimum) Text (including images of text) have a contrast ratio of at least 4.5:1. For text and images of that is at least 24px and normal weight or 19px and bold, use a contrast ratio that is at least 3:1.
Yes AA 1.4.4 Resize text Ensure that there is no loss of content or functionality when text resizes.
Yes AA 1.4.4 Resize text Define texts and text containers in relative units (percents, ems, rems) rather than in pixels.
Yes AA 1.4.5 Images of Text Avoid images of text, except in cases such as logos.
Yes AA 1.4.10 Reflow Provide responsive stylesheets such that content can be displayed at 320px wide without horizontal scrolling. (Content which must be displayed in two dimensions, such as maps and data tables, may have horizontal scrolling.)
Yes AA 1.4.11 Non-text Contrast Color contrast for graphics and interactive UI components must be at least 3:1 so that different parts can be distinguished.
Yes AA 1.4.11 Non-text Contrast When providing custom states for elements (e.g. hover, active, focus), color contrast for those states should be at least 3:1.
Yes AA 1.4.12 Text Spacing Avoid using pixels for defining the height and spacing (e.g. height, line height, etc) of text boxes.
Yes AA 1.4.13 Content on Hover or Focus For tooltips, follow corresponding ARIA authoring practice.
Yes AA 1.4.13 Content on Hover or Focus For content that appears on hover and focus: the content should be dismissible with the escape key; the content itself can be hovered over; and the content remains available unless it is dismissed, it is no longer relevant, or the user removes hover and focus.
Yes AA 1.4.13 Content on Hover or Focus To the extent possible, content that appears on hover or focus should not obscure other content, unless it presents a form input error. or can be dismissed with the escape key.
Yes AA 2.4.5 Multiple Ways Each website should include at least two of the following: a list of related pages; table of contents; site map; search; or list of all pages.
Yes AA 2.4.6 Headings and Labels Ensure that on each page, headings, landmark labels, and form labels are unique unless the structure provides adequate differentiation between them.
Yes AA 2.4.7 Focus Visible Provide keyboard focus styles that are highly visible, and make sure that a visible element has focus at all times when using a keyboard. Do not rely on browser default focus styles.
Yes AA 3.1.2 Language of Parts If a portion of the page is in a different language, use the lang attribute on that part.
Yes AA 3.2.3 Consistent Navigation When components are repeated across web page, they should appear in the same relative order with regard to other repeated components on each web page where they appear.
Yes AA 3.2.3 Consistent Navigation When a navigation menu is presented on multiple pages, the links should appear in the same order on each page.
Yes AA 3.2.4 Consistent Identification When components have the same functionality across several web pages, the components are labeled consistently on each page.
Yes AA 3.3.3 Error Suggestion If an input error is detected and if suggestions for correction are known, provide suggestions for fixing the submission.
Yes AA 3.3.4 Error Prevention (Legal, Financial, Data) Provide easy ways to confirm, correct, or reverse a user action where a mistake would cause a serious real-world consequence (e.g. submitting financial data, entering into a legal agreement, submitting test data, or making a transaction).
Yes AA 4.1.3 Status Messages When conveying a status message, use ARIA live regions or ARIA alerts to announce the message to screen reader users.

 

Level 3

Compliant WCAG Level WCAG Criteria WCAG Recommendation
Yes AAA 1.2.6 Sign Language (Prerecorded) Sign language interpretation is provided for all prerecorded audio content in synchronized media.
Yes AAA 1.2.7 Extended Audio Description (Prerecorded) Where pauses in foreground audio are insufficient to allow audio descriptions to convey the sense of the video, extended audio description is provided for all prerecorded video content in synchronized media.
N/A AAA 1.2.8 Media Alternative (Prerecorded) An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media.
N/A AAA 1.2.9 Audio-only (Live) An alternative for time-based media that presents equivalent information for live audio-only content is provided.
Yes AAA 1.3.6 Identify Purpose In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.
Yes AAA 1.4.6 Contrast (Enhanced) The visual presentation of text and images of text has a contrast ratio of at least 7:1.
N/A AAA 1.4.7 Low or No Background Audio For prerecorded audio-only content that (1) contains primarily speech in the foreground, (2) is not an audio CAPTCHA or audio logo, and (3) is not vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true:
Yes AAA 1.4.8 Visual Presentation For the visual presentation of blocks of text, a mechanism is available to achieve the following:
Yes AAA 1.4.9 Images of Text (No Exception) Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed.
Yes AAA 2.1.3 Keyboard (No Exception) All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.
Yes AAA 2.2.3 No Timing 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.
Yes AAA 2.2.4 Interruptions Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency.
Yes AAA 2.2.5 Re-authenticating When an authenticated session expires, the user can continue the activity without loss of data after re-authenticating.
N/A AAA 2.2.6 Timeouts 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.
Yes AAA 2.3.2 Three Flashes Web pages do not contain anything that flashes more than three times in any one second period.
Does not support AAA 2.3.3 Animation from Interactions Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.
Yes AAA 2.4.8 Location Information about the user's location within a set of Web pages is available.
Yes AAA 2.4.9 Link Purpose (Link Only) A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general.
Supports with exceptions AAA 2.4.10 Section Headings Section headings are used to organize the content.
Yes AAA 2.5.5 Target Size The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:
Yes AAA 2.5.6 Concurrent Input Mechanisms Web content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings.
Yes AAA 3.1.3 Unusual Words A mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way, including idioms and jargon.
Yes AAA 3.1.4 Abbreviations A mechanism for identifying the expanded form or meaning of abbreviations is available.
Yes AAA 3.1.5 Reading Level When text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, supplemental content, or a version that does not require reading ability more advanced than the lower secondary education level, is available.
Yes AAA 3.1.6 Pronunciation A mechanism is available for identifying specific pronunciation of words where meaning of the words, in context, is ambiguous without knowing the pronunciation.
Yes AAA 3.2.5 Change on Request Changes of context are initiated only by user request or a mechanism is available to turn off such changes.
Yes AAA 3.3.5 Help Context-sensitive help is available.
Yes AAA 3.3.6 Error Prevention (All) For Web pages that require the user to submit information, at least one of the following is true:

Related articles