CSS HTML Validator helps organizations comply (but does not and cannot guarantee full compliance) with the W3C's Web Content Accessibility Guidelines 2.0/2.1/2.2 (WCAG 2.0, WCAG 2.1, and WCAG 2.2). These are guidelines for web developers and developers of authoring tools to help make them more accessible to people with disabilities.

WCAG 2.0 became a W3C Recommendation in December 2008 and builds on and succeeds WCAG 1.0. WCAG 2.1 became a W3C Recommendation in June 2018 and builds on and extends WCAG 2.0 with 17 new success criteria. WCAG 2.2 is expected to be completed and released in the 2nd half of 2023.

The W3C now recommends that new and updated content use WCAG 2.1.

There are 9 new success criteria in WCAG 2.2: 2.4.11, 2.4.12, 2.4.13, 2.5.7, 2.5.8, 3.2.6, 3.3.7, 3.3.8, and 3.3.9. 4.1.1 (Parsing) is now considered obsolete and has been removed due to today's technology. Visit What's New in WCAG 2.2 for more information.

There are 17 new success criteria in WCAG 2.1: 1.3.4, 1.3.5, 1.3.6, 1.4.10, 1.4.11, 1.4.12, 1.4.13, 2.1.4, 2.2.6, 2.3.3, 2.5.1, 2.5.2, 2.5.3, 2.5.4, 2.5.5, 2.5.6, and 4.1.3. Visit What's New in WCAG 2.1 for more information.

If you want to check against WCAG 2.2 (recommended and enabled by default) then ensure that the option to Include WCAG 2.1 checks and messages is enabled in the WCAG Options Page.

Developers must satisfy the minimum level of conformance (Level A) to conform with WCAG 2.0/2.1/2.2. See the conformance section of WCAG 2.2 for more information.

Did you know? Compliance with WCAG 2.0/2.1 (at Level AA) has become the de facto baseline for government regulators, courts, advocacy groups, and private plaintiffs for determining whether a website is accessible.

NOTE: Please remember that automated tools like this one, although very useful, can only check certain guidelines and cannot guarantee conformance at any level. Other checking methods are required.

Bracket Info Sections

Most WCAG 2.0/2.1/2.2 messages will include conformance information in square brackets (we'll call them "bracket info sections"). Below is more information:

•There may be one or more of these bracket info sections per WCAG 2.0/2.1/2.2 message, one for each guideline.

•A bracket info section starts with a left square bracket ('['), then the conformance level will be listed first (A, AA, or AAA), then a comma, then a single guideline, then optionally followed by a semicolon and then a comma-separated list of techniques relevant to the guideline, then ends with the right square bracket (']').

•When there are multiple bracket info sections for one message, the sections for the lower level of conformance (like "A") will appear before the sections for the higher level of conformance (like "AAA").

•Some examples: [AA, 1.4.4; C12, C13, C14] [AAA, 1.4.8; C12, C13, C14] [A, 1.3.2; C27] [A, 2.4.3; C27].

WCAG 2.0/2.1/2.2 Items Checked (may not be a complete list)

•Displays an error message for missing alt text ("alt" attribute) for the "applet", "area", "img", and "input" (when type="image") elements. [A, 1.1.1]

•Displays a warning message for a missing "twitter:image:alt" meta tag when a "twitter:image" meta tag is used. [A, 1.1.1]

•Displays a warning message for alt text that is considered to be too long and not succinct (consider using the WAI-ARIA "aria-describedby" or "aria-details" attribute). [A, 1.1.1]

•Displays a warning message if the alt text contains only whitespace. [A, 1.1.1]

•Displays a warning message if the alt text is empty but the title text is not. [A, 1.1.1]

•Displays a warning message for a missing text alternative (in the body) for "applet" elements. [A, 1.1.1]

•Displays an error message for missing alternative representation for "object" elements. [A, 1.1.1]

•Displays an error message for "input" (of certain types), "select", and "textarea" control elements if they do not have explicitly associated labels and do not have "title" attributes. [A, 1.1.1]

•Displays a warning message for empty alternative text (alt="") for the "area" element. [A, 1.1.1]

•Displays a warning message for missing title text ("title" attribute) for the "area" element. [A, 1.1.1]

•[Legacy in v21] Displays a message for a missing "longdesc" attribute (to specify a text alternative of the frame) in "frame" and "iframe" start tags. [A, 1.1.1]

•[Legacy in v21] Displays a message for a missing "longdesc" attribute (to specify a text alternative of the image) in "img" start tags. [A, 1.1.1]

•Displays a message about providing a text alternative when the "script" element is used. [A, 1.1.1]

•Displays an error message for "a" elements with no link text if "a" doesn't contain any images with alt text [A, 1.1.1]

•Displays an accessibility message for image maps. [A, 1.1.1] [2.4.4] [2.4.9]

•Displays a warning message if an image appears to be a spacer image and recommends CSS instead. [A, 1.1.1]

•Displays a message for form controls that use a "title" attribute (use "title" only when a label cannot be accommodated) [A, 1.1.1] [1.3.1] [3.3.2] [4.1.2]

•Displays a message if the alt text is empty or null and there is no title attribute (ensure that such images are decorative or should otherwise be ignored by assistive technology). [A, 1.1.1] [1.2.1]

•Displays a message if a background image is used in CSS (to semantically provide any critical information that's in the background image) [A, 1.1.1] (New v19.00)

•Displays a message about CSS generated content not being included in the DOM the first time the "content" CSS property is used. [A, 1.3.1] (New v21.00)

•Displays a message about not using "pre" to markup tabular data the first time a "pre" element is used. [A, 1.3.1; F48] (New v21.00)

•Displays a message about layout tables and the "summary" attribute the first time a "table" element is used. [A, 1.3.1]

•Displays a warning message about using header cells if "th" elements are not used in tables. [A, 1.3.1]

•Displays a message if the "caption" element is not used in tables. [A, 1.3.1]

•Displays a message if the "summary" attribute in "table" tags and generates a message if not found. [A, 1.3.1]

•Displays a warning message if the "summary" attribute in "table" tags appears to be too terse (it should be descriptive) [A, 1.3.1]

•Displays a warning message if heading elements appear out of order. [A, 1.3.1]

•Displays an error message for heading elements containing no text. [A, 1.3.1]

•Displays a warning message if a table's caption is the same as the table's summary text. [A, 1.3.1]

•Displays a warning message if a layout table is detected and it contains "th" elements, a "caption" element, or a non-empty "summary" element [A, 1.3.1]

•Displays a message if a data table is detected with no "summary" or "title" attribute and no caption (ensure the table is properly described) [A, 1.3.1]

•Displays a warning message if a "th" element is used without a "scope" or "id" attribute in a data table (clarify the scope of the header cell) [A, 1.3.1]

•Displays a message (up to 3 times) if a "th" element is used without a "scope" attribute (but with an "id" attribute) in a data table (clarify the scope of the header cell) [A, 1.3.1]

•Displays a message if more than one "option" element is used but no "optgroup" elements are used. [A, 1.3.1]

•Displays a warning message if a presentational attribute is used (like "align"). [A, 1.3.1]

•Displays a warning message if more than one label is assigned to the same control. [A, 1.3.1]

•Displays an error message if the "legend" element is not used in a "fieldset" element. [A, 1.3.1] [3.3.2]

•Displays an error message if groups of radio or checkbox input elements have the same name value but are not in a "fieldset" element. [A, 1.3.1] [3.3.2]

•Displays a message if there are 2 or more form controls in a form that are not in a "fieldset" element (group related form controls with "fieldset") [A, 1.3.1] [3.3.2]

•Displays an error messages for duplication of unique values (like duplicate "id" values). [A, 1.3.1] [4.1.1]

•Displays an error messages for "label" references (using the "for" attribute) to nonexistent IDs or to non-labelable elements. [A, 1.3.1] [4.1.1]

•Displays a warning message if a main landmark is not detected (no "main" element and no aria-role="main" detected). [A, 1.3.1; ARIA11] [A, 2.4.1; ARIA11] [AAA, 1.3.6; ARIA11] (New v19.01)

•Displays a message if the "float" CSS property is used (ensure that the visual order matches the source code order). [A, 1.3.2] [2.4.3]

•Displays a message if absolute positioning (CSS) is used (ensure that the visual order matches the source code order). [A, 1.3.2]

•Displays a warning message if the "flex-direction" CSS property is used with the "row-reverse" or "column-reverse" value (ensure that the visual order matches the source code order). [A, 1.3.2] [2.4.3] (New v24.02)

•[WCAG 2.1] Displays a warning message if the "orientation" media feature is used (avoid locking the orientation and ensure content is operable in either orientation). [A, 1.3.4] (New v19.01)

•[WCAG 2.1] Displays a warning message if an input field is missing an "autocomplete" attribute. [AA, 1.3.5; H98] (New v19.01)

•Displays a warning message if CSS is used to remove the underline from "a" element link text. [A, 1.4.1]

•Displays a message about not using color alone to indicate state if the ":invalid" or ":valid" CSS pseudo-class is used. [A, 1.4.1] (New v21.00)

•Displays an error message if a color attribute (like "bgcolor", "link", "text", etc.) is used in the "body" tag but not all the color attributes are used [AA, 1.4.3]

•Displays a warning message if a foreground color is specified without a background color or vice versa in a CSS style rule [AA, 1.4.3]

•Displays a warning message if a specified foreground and background color is specified in a CSS declaration and the colors do not meet the minimum contrast ratios [AA, 1.4.3] [AAA, 1.4.6]

•Displays a warning message when the "bgcolor" attribute is used with "text", "link", and/or the "vlink" attribute in the "body" tag and the colors do not meet the minimum contrast ratios [AA, 1.4.3] [AAA, 1.4.6]

•Displays an error if a font size is specified using an absolute unit (instead of a relative unit like "em" or a percentage) (https://www.w3.org/TR/WCAG20-TECHS/C12, https://www.w3.org/TR/WCAG20-TECHS/C13, or https://www.w3.org/TR/WCAG20-TECHS/C14) [AA, 1.4.4] [1.4.8]

•Displays a warning if calc() is used for a font size and it does not appear to contain a relative length unit for one of the values [AA, 1.4.4] (New v21.00)

•Displays a warning if a font size is specified using an absolute unit and it appears to be for a form control (instead of a relative unit like "em" or a percentage) (https://www.w3.org/TR/WCAG20-TECHS/F80) [AA, 1.4.4]

•Displays a message if the "height" or "width" CSS property is used with an absolute length for elements that might contain text (like elements other than "img") [AA, 1.4.4]

•Displays a message if absolute or fixed positioning (CSS) is used (ensure that other content is not obscured when the page is zoomed). [AAA, 1.4.8]

•Displays a warning message if the "font-weight" CSS property is set to "100" or "200" (can make text harder to read). [AAA, 1.4.8] (New v19.01)

•Displays a warning message if the "text-align" CSS property is set to "justify" or "justify-all" (can make text harder to read). [AAA, 1.4.8]

•Displays a message if the "letter-spacing" CSS property is set to a length (to avoid too much or too little space between letters that can make text too difficult to read). [AAA, 1.4.8]

•Displays a warning message if the "line-height" CSS property is set to 1.5 or less (can make text harder to read). [AAA, 1.4.8] (New v19.01)

•[WCAG 2.1] Displays a warning message if the "font-variant-caps" CSS property is set to "all-small-caps" or "all-petite-caps" (can make text harder to read). [AAA, 1.4.8] (New v21.00)

•Displays a warning if the ":focus" pseudo-class is used in a selector to remove an element's outline, potentially making the default focus indicator invisible. [AA, 1.4.11] [AA, 2.4.7] (New v19.01)

•[WCAG 2.1] Displays a message if the ":focus" or ":focus-visible" pseudo-class is used (about ensuring sufficient focus indicator contrast) [AA, 1.4.11] (New v20.00)

•Displays a warning message if the device-dependent "onmouseout" or "onmouseover" event handler attribute is used without a corresponding "onblur" or "onfocus" event handler [A, 2.1.1]

•Displays a warning message if the device-independent "onblur" or "onfocus" event handler attribute is used without a redundant "onmouseout" or "onmouseover" event handler [SCR2]

•Displays a warning message if the "onfocus" event attribute is "blur()" [A, 2.1.1] [3.2.1] [AA, 2.4.7] [AAA, 2.1.3]

•Displays a message about pausing and blinking if it appears that an APNG animated image is specified in the "src" attribute of elements like "img" and "input". [A, 2.2.2] (New v21.00)

•Displays a message about pausing and blinking if it appears that a GIF image or animation is specified in the "src" attribute of elements like "img" and "input". [A, 2.2.2]

•Displays a message for CSS animations and transitions to make sure they don't result in content that may cause seizures in some users. [A, 2.3]

•[WCAG 2.1] Displays a message about scaling/zooming animations triggering headaches if a scaling function is used with the "transform" CSS property. [AAA, 2.3.3] (New v21.00)

•Displays a warning message if no "skip to" links are detected and recommends adding them if it will improve accessibility. [A, 2.4.1] (New v19.00)

•Displays an error message for a missing "title" attribute in a "frame" or "iframe" element (requires flag 70 to be enabled). [A, 2.4.1] [4.1.2]

•Displays an error message if a page has a missing or empty title (checks the "title" tag, not the "title" attribute). [A, 2.4.2]

•Displays a message for "title" elements (ensure that the title is descriptive). [A, 2.4.2]

•Displays a warning message if the tabindex sequence does not agree with the content sequence. [A, 2.4.3]

•Displays a warning message when an "a" element containing an "img" element preceeds another "a" element with the same "href" value and where the image alt text is the same as the link text for the adjacent "a" element. [A, 2.4.4]

•Displays an error message when the same link text (when "title" attributes are missing, empty, or not unique) links to two or more different resources. [A, 2.4.4]

•Displays an error message when an "a" element's "title" text appears to be a URL. [A, 2.4.4]

•Displays a message if any headings are used (ensure that they are descriptive). [AA, 2.4.6]

•Displays a message if any labels are used (ensure that they are descriptive). [AA, 2.4.6] [A, 3.3.2]

•Displays a message if the ":focus" or ":focus-visible" CSS pseudo-class is used (ensure that the focus indicator is visible). [AA, 2.4.7]

•Displays a warning message when the the outline is removed from "a" (ensure that the focus indicator is visible). [AA, 2.4.7]

•[WCAG 2.1] Displays an error message if the "aria-label" value of a "button" element does not match the button text. [A, 2.5.3] (New v19.01)

•Displays an error message if the "lang" and "xml:lang" attributes are not used in the "html" tag. [A, 3.1.1]

•Displays a message if the "lang" and/or "xml:lang" attribute is used in the "html" tag (ensure that the specified primary language matches the primary content language). [A, 3.1.1]

•Displays a warning message if a "dl" element is used without the "title" attribute. [AAA, 3.1.3]

•Displays an error message if an "abbr" element is missing a "title" attribute or if the "title" text is empty. [AAA, 3.1.4]

•Displays a warning message if a form does not appear to contain a submit control. [A, 3.2.2]

•Displays an error message when there is an inconsistency with "abbr" elements (like different "title" text for the same abbreviation or different abbreviations for the same "title" text). [AA, 3.2.4]

•Displays a message about changes of context if a "meta" refresh tag is found (if AAA conformance checking is enabled) [AAA, 3.2.5; H76]

•Displays a warning message if a "meta" non-zero second refresh tag is found (if AAA conformance checking is enabled) [AAA, 3.2.5; H76]

•Displays a warning message if the text "new window" is not found in the link text or in the "title" value of a link with the "target" attribute [AAA, 3.2.5]

•Displays a message when the first "form" element is used (ensure that appropriate text messages are used for form errors) [A, 3.3.1] [3.3.2] [3.3.3]

•Displays a message when the first "form" element is used (ensure that appropriate text messages are used for user input that is not in the list of allowed values or that falls outside the required format or values) [A, 3.3.1] [3.3.3]

•Displays a message when the first "form" element is used (provide suggestions for correct text/input for user input that is not accepted (when reasonable and possible)) [AA, 3.3.3]

•Displays a message when the first "form" element is used (provide a way to review/correct data before submission, provide a 'review' checkbox, provide a way to cancel or recover from errors after submission) [AA, 3.3.4]

•Displays a message when the first "form" element is used (provide a way for the user to recover information that was deleted in error, seek confirmation from the user that the selected action is the intended action, consider providing a 'review' checkbox) [AA, 3.3.4]

•Displays a warning message for "input" (of certain types), "select", and "textarea" control elements if they have explicitly associated labels but no "title" attribute for context-sensitive help and level AAA checking is enabled. [AAA, 3.3.5]

•[NOT if WCAG 2.2 ENABLED] Displays an error messages for various parsing problems, like problems with start and end tags, HTML comment format, and attribute parsing. [A, 4.1.1]

•[NOT if WCAG 2.2 ENABLED] Displays an error message if any CSS errors are found. [A, 4.1.1]

•Displays a message for HTML5 documents or warning message for HTML 5.1+ documents about using only the well-supported elements and parts of HTML5/HTML 5.1 or using the latest mature version of HTML. [A, 4.1.1, 4.1.2]

•Displays an error messages for blank (empty) label text. [A, 4.1.2]