Checka11y.css demo

WARNING: This page is not considered to be accessible and purposely has minimal styling.

To get the most out of this page, please inspect the elements to see what's going on.

Please reference the a11y feature references for further explanations.


HTML: html tag should have a lang attribute

See top of page.

Images: All images require an alt attribute, whether it has a value or is null

Images: All images should have a meaningful and descriptive alt attribute.

 * iMaGe graphic photo photograph drawing painting artwork logo bullet button arrow more spacer blank chart table diagram graph myfile.png myfile.jpg myfile.gif myfile.svg myfile.bmp image image image graphic graphic of a graphic image of an image bullet 1

iframe: iframe has title attribute

Lists: All children of <ol> must only be <li>, <template> or <script>

  1. Hello, I'm a <li> inside a <ol>
  2. Hello, I'm a <div> inside a <ol>
  3. Hello, I'm a <li> inside a <ol>

Lists: All children of <ul> must only be <li>, <template> or <script>

Navigation: If more than one navigation exists, each navigation should be labelled.

This is separating content

Description list: Direct children of a <dl> can only be <dt> and <dd>

Hello, I'm <dt> element inside <dl> element
Hello, I'm <dd> element inside <dl> element

Hello, I'm <p> element inside <dl> element.

External Links: Provide advanced warning to a user when a link opens in a new window or tab

Checka11y Repo

Checks for invalid HTML elements nested inside an <a>

Links: <audio> with controls attribute can not be a child of <a> as it is an invalid HTML

Links: <button> can not be a child of <a> as it is an invalid HTML

Links: <details> can not be a child of <a> as it is an invalid HTML

Hello, I am a details inside an anchor tag

Links: <embed> can not be a child of <a> as it is an invalid HTML

Links: <iframe> can not be a child of <a> as it is an invalid HTML

Links: <img> with usemap attribute can not be a child of <a> as it is an invalid HTML

Test for anchor tag with usemap attribute

Links: <input> without type hidden attribute can not be a child of <a> as it is an invalid HTML

Links: <label> can not be a child of <a> as it is an invalid HTML

Links: <object> with usemap attribute can not be a child of <a> as it is an invalid HTML

Links: <select> can not be a child of <a> as it is an invalid HTML

Links: <textarea> can not be a child of <a> as it is an invalid HTML

Links: <video> with controls attribute can not be a child of <a> as it is an invalid HTML

Checks for invalid HTML elements nested inside an <button>

Buttons: <a> with href attribute can not be a child of <button> as it is an invalid HTML

Buttons: <audio> with controls attribute can not be a child of <button> as it is an invalid HTML

Buttons: <button> can not be a child of <button> as it is an invalid HTML

Buttons: <details> can not be a child of <button> as it is an invalid HTML

Buttons: <embed> can not be a child of <button> as it is an invalid HTML

Buttons: <iframe> can not be a child of <button> as it is an invalid HTML

Buttons: <img> with usemap attribute can not be a child of <button> as it is an invalid HTML

Buttons: <input> without type hidden attribute can not be a child of <button> as it is an invalid HTML

Buttons: <label> can not be a child of <button> as it is an invalid HTML

Buttons: <object> with usemap attribute can not be a child of <button> as it is an invalid HTML

Buttons: <select> can not be a child of <button> as it is an invalid HTML

Buttons: <textarea> can not be a child of <button> as it is an invalid HTML

Buttons: <video> with controls attribute can not be a child of <button> as it is an invalid HTML

Dir attribute: The dir attribute can only have the values, ltr, rtl and auto.

This is an <p> with dir attribute set to lr

Check the tab index of commonly tabbed to elements and show an error if it is -1

Links with an href attribute cannot have a tab index of -1

I am an anchor tag ( with an href attribute ) having a tab index of-1

<area> elements with an href attribute cannot have a tab index of -1

Test for area elements with an href attribute Clickable area

<input> elements that are not disabled cannot have a tab index of-1

<select> elements that are not disabled cannot have a tab index of-1

<textarea> elements that are not disabled cannot have a tab index of -1

<button> elements that are not disabled cannot have a tab index of-1

<iframe> elements cannot have a tab index of -1

HTML elements with editable content cannot have a tab index of -1

I am a paragraph tag with editable content

Autoplay enabled: Do not set video/audio on the page to autoplay

Headings: all headings should have (meaningful) content

An empty heading does not make sense from a semantic point of view and is a sign of an underlying problem

Headings should be reachable by assistive technologies (do not use aria-hidden or similars on a heading).

H1 with aria-hidden="true"

Inline style: !important should be avoided so end-users can override the default styles

This paragraph has inline style without !important (OK).

This paragraph has inline style with !important (Error).

Accesskey attribute: avoid using attribute accesskey

Accesskey attribute could interfere and conflict with screen readers and assistive technologies that use shortcuts or keyboard combinations to facilitate the users

Press S to save the changes

Links should have meaningful content or be labelled appropriately for assistive technologies

Hello, I am an anchor

Buttons should have meaningful content or be labelled appropriately for assistive technologies

Avoid using <u> element as it could look like a link

Hello, I am not a link, I am just underlined text I am a bold <em> element to denote stress emphasis

Avoide using mouse event handlers without the appropriate keyboard alternative on HTML Elements

A div with onclick
A div with onclick and onkeydown
A div with with onclick, onkeydown and role=button
A div with onclick, onkeydown, role=button and tabindex=-1