A list of every Checka11y.css error & warning code with details on what the issue is and how to resolve it.
-
There are invalid HTML elements nested inside of a
<button>
element. It is inaccessible to have any interactive elements nested inside of another interactive element. Ensure you do not have any of the following HTML elements nested inside of the<button>
:<a>
<audio controls>
<button>
<details>
<embed>
<iframe>
<img usemap>
- any input without
type="hidden"
<keygen>
<label>
<menu type="toolbar">
<object usemap>
<select>
<textarea>
<video controls>
-
The
<button>
has been detected to have no meaningful content, either because the button is empty (has no text) or hasn't been labelled correctly. This is inaccessible because users will find it difficult to know the context of what the button does. Either provide the<button>
with some text within it, or applyaria-label
andaria-labelledby
appropriately. -
The highlighted element has an incorrect value for the
dir
attribute. The only valid values fordir
areltr
,rtl
andauto
. Read about this here. -
The highlighted heading appears to have empty content. It is inaccessible for headings to be empty because they are used to help navigate and section the webpage. Ensure the heading has some meaningful content within it.
-
A
aria-hidden
has been detected on a heading. Applyingaria-hidden
on a heading is inaccessible because it makes the heading unreachable by assistive technologies. -
The highlighted heading has been detected to not follow a semantic heading order. Read more about semantic heading order.
-
The
lang
attribute is either not present on the<html>
element or has an empty value. It is inaccessible to not provide a language for a webpage document. Be sure to set thelang
attribute to a valid language subtag as defined here by w3. Read about this here. -
The highlighted
<iframe>
element does not have atitle
attribute. Atitle
attribute is required on an<iframe>
element to describe its content, otherwise it is inaccessible. Read about this here. -
The highlighted image does not have an
alt
attribute. Analt
attribute (alternative text) is required to describe the image. If the image is purely a decorative image and provides no meaningful context, you must still provide analt
attribute, but it can have an empty value. Read about this here. -
There are invalid HTML elements nested inside of an
<a>
element. It is inaccessible to have any interactive elements nested inside of another interactive element. Ensure you do not have any of the following HTML elements nested inside of the<a>
:<a>
<audio controls>
<button>
<details>
<embed>
<iframe>
<img usemap>
- any input without
type="hidden"
<keygen>
<label>
<menu type="toolbar">
<object usemap>
<select>
<textarea>
<video controls>
-
The
<a>
has been detected to have no meaningful content, either because the link is empty (has no text) or hasn't been labelled correctly. This is inaccessible because users will find it difficult to know the context of what the link does. Either provide the<a>
with some text within it, or applyaria-label
andaria-labelledby
appropriately. -
The highlighted element has been detected inside of a
<ul>
or an<ol>
and is in the incorrect place. The only direct children of a<ul>
and an<ol>
can be<li>
,<script>
and<tenplate>
. If the highlighted element should be in a list, then you should wrap it in an<li>
. Read about this here. -
The highlihted element has been detected inside of a
<dl>
and is in the incorrect place. The onl direct children of a<dl>
can be<dt>
and<dd>
. If the highlighted element should be a definition term, wrap it in a<dt>
, or if it should be a definition description, wrap it in a<dd>
. Read about this here. -
More than a single
<nav>
has been detected on the webpage.<nav>
indicates the primary navigation for the page. In cases where multiple primary navigations exist, ensure both navigations are labelled by applyingaria-label
andaria-labelledby
appropriately. Read about this here. -
The highlighted element appears to have
tabindex="-1"
applied to it. Atabindex
of-1
indicates that the element can only be focused programmatically, therefore preventing the user from being able to easily focus on the element (I.e. tabbing to it). Read about this here. The following elements should not havetabindex="-1"
on them:<a href>
<area href>
<input>
that is not disabled<select>
that is not disabled<textarea>
that is not disabled<button>
that is not disabled<iframe>
- Any HTML element with
contentEditable
-
The
longdesc
attribute has been detected in an<img>
and it has an invalid value. Thelongdesc
attribute must be a URL to a web page, but the detectedlongdesc
is a link to an image which is an accessibility problem (because there won't be an image description.) -
The
longdesc
attribute has been detected in an<img>
and it has an invalid value. Thelongdesc
attribute must be a URL to a web page, but the detectedlongdesc
is empty or it contains blank spaces so it's not a valid URL. -
An empty
<title>
element has been found within the page's<head>
. An empty title would be an accessibility issue because it makes it more difficult for some users to orient themselves and navigate through the pages. -
The
<head>
element does not contian a<title>
. An missing title would be an accessibility issue because it makes it more difficult for some users to orient themselves and navigate through the pages.
-
The highlighted element appears to have the
accesskey
attribute applied to it. It is advised to avoidaccesskey
due to poor browser support and can conflict with system and browser keyboard shortcuts. Read about this here. -
The highlighted
<video>
or<audio>
element has been detected to have theautoplay
attribute applied. As well as being incredibly annoying, unexpected video and audio can be distracting and disruptive, especially to certain cognitive disabilities such as ADHD. Some video and animation can also be a trigger for vestibular and seizure disorders. It is acceptable to have video and audio only if the user is expecting it; take YouTube for example, when a user clicks on a link to a new video, they are expecting a video to start playing. Read about this here. -
The highlighted element has been detected to not be a
<button>
or an<a>
and haveonclick
applied to it, but there doesn't seem to be any keyboard event handlers. Ideally, ensure you are using correct semantic HTML by using interactive elements for interactive components, or at the very least, ensure you have keyboard event handlers as well as click event handlers. Read about this here. -
The highlighted image has been detected to contain a possible non-descriptive value for the
alt
attribute. Analt
attribute needs to describe the image. If the image is purely a decorative image and provides no meaningful context, you must still provide analt
attribute, but it can have an empty value. Thealt
attribute should not contain any file extensions, should not be single words such as "image", "picture" or "graphic" and should not use phrases such as "image of" and "logo for". -
The highighted element has been detected to have inline styles that contain
!important
. It is common for end-users to have plugins pr extensions installed on their systems or browsers to improve their experience, often to assist with visibility issues. Having!important
inline styles will override these plugins and extensions, making the webpage inaccessibke to the user's needs. -
Sentences containing
<em>
and<span>
are common, however these elements can often cause a screenreader to break up the spoken text. To ensure this doesn't happen, applyrole="text"
to the parent element. -
The highlighted
<a>
has been detected to containtarget="_blank"
, which means the link will open in a new tab. This can be disorientating to a user, especially those with visual impairments and those with cognitive disabilities. -
The highlighted element is detected to be a
<u>
element. This can commonly be visually confused as a hyperlink. Consider using other elements than<u>
. -
The highlighted element has been detected to contain a
title
attribute. There many accessibility concerns with thetitle
attribute. Consider using an alternative method to using thetitle
attribute. -
The highlighted element is a focusable element that is nested within another element with
aria-hidden="true"
. This means the focusable element is inaccessible to assistive technologies. Either remove thearia-hidden="true"
, or restructure the HTML so that the focusable element is not nested within the element witharia-hidden="true"
. Read more about this here. -
The highlighted element has been detected to have a
role="text"
, however this causes the element to lose its semantic meaning as a heading element and will not be interpreted as a heading by a screenreader. Read more about this and find suggested alternative here. -
The highlighted element
<a>
has been detected to havehref="#"
,role="button"
,href="javascript:doSomething(0)"
. Those anchor elements are often used to trigger a click event on the page. This can be disorientating to a user, especially those with visual impairments and those with cognitive disabilities. Links should redirect to a resource/page. Read more about this here. -
The
<section>
element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. This means<section>
element should be identified, typically by including a heading (<h1>
-<h6>
element) as a child of the<section>
element. Read more about this here -
The highlighted element
<a>
has been detected to havehref=".pdf|.docx|.doc|.xlsx|.xls|.pptx|.pptm|.ppt|.txt"
. Those anchor elements often have accessibility issues and need to be created with accessibility in mind. This can mean sometimes the element will link to non-accessible content since we cannot guarantee the files will be served in an accessible fashion. -
The highlighted element
<a>
has been detected to havehref="https://youtube.com|https://youtu.be|https://spotify.com"
. Those anchor elements often have accessibility issues and need to be created with accessibility in mind. This can mean sometimes the element will link to sites non-accessible content because captioning is often missing or not well generated. -
The
longdesc
attribute has been detected in an<img>
. Thelongdesc
attribute in images is deprecated and should not be used. It is not fully supported by HTML5, browsers, or screen readers. When present, it is commonly misused (it should point to an URL that is not an image). -
The
viewport
meta tag contains a property that disables the zoom and/or the viewport scale. Such a property may prevent users from interacting with the web page, and make it more difficult to view the content.