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.

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>
Hello, I'm a <div> inside a <ol>
2. Hello, I'm a <li> inside a <ol>

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

• Hello, I'm a <li> inside a <ul>
Hello, I'm a <div> inside a <ul>
• Hello, I'm a <li> inside a <ul>

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

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

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

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 tabindex of commonly tabbed to elements and show an error if it is -1

Links with an href attribute cannot have a tabindex of -1

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

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

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

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

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

<iframe> elements cannot have a tabindex of -1

HTML elements with editable content cannot have a tabindex 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

Headings: reachable by assistive technologies

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

H1 with aria-hidden="true"

H2 with aria-hidden="true"

H3 with aria-hidden="true"

H4 with aria-hidden="true"

H5 with aria-hidden="true"

H6 with aria-hidden="true"

Headings: do not skip levels

H4 (correct: because no higher level above it, even when it skipped h3)

H1 (error: not in order, should be unique)

H2 (correct)

H3 (error: first h3 after h4)

H6 (correct: because no higher level above it, even when it skipped h5)

H5 (error: not in order)

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

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

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

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

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

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

The title attribute has many accessibility concerns, consider using an alternative method.

I have a title attribute. Hover me.

Elements with aria-hidden should not have focusable descendants.