Some HTML attributes should not contain any whitespace —namely [id], [lang] and map[name].
[id*=" "],
[lang*=" "],
map[name*=" "]
This is my beautiful element with an ID
<p id="my id">This is my beautiful element with an ID</p>
The [tabindex] attribute should never be greater than 0.
[tabindex]:not([tabindex="0"], [tabindex^="-"])
<button tabindex="1" type="button">Positive tabindex is bad</button>
The [href] attribute, if present, should not be empty. A link to something, right?
a[href=""],
a[href=" "]
<a href=" ">Who am I? Where do I link?</a>
An empty link should have a label, within [title], [aria-label] or targeted by [aria-labelledby].
By the way, why would you use an empty link?
a:empty[title=""],
a:empty[aria-label=""],
a:empty[aria-labelledby=""],
a:empty:not([title], [aria-label], [aria-labelledby])
An <img> must have an [alt]. Always.
img[alt=" "],
area[alt=" "],
input[type="image"][alt=" "],
img:not([alt]),
area:not([alt]),
input[type="image"]:not([alt])
†
<img src="/static/ffoodd.png" width="144" height="144" /><span>†</span>
[role=img] should either have [aria-label] or [aria-labelledby].
If image is decorative, please use [role=presentation] instead.
[role="img"]:not([aria-label], [aria-labelledby]),
svg[role="img"]:not([aria-label], [aria-labelledby])
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" role="img">
<rect x="400" y="100" width="400" height="200"
fill="forestgreen" stroke="darkgreen" stroke-width="10" />
</svg><span>†</span>
An <img> must have an [src] or an [srcset], and it should be a valid one. Obviously.
img:not([src], [srcset]),
img[src=""],
img[src=" "],
img[src="#"],
img[src="/"],
img[srcset=""],
img[srcset=" "],
img[srcset="#"],
img[srcset="/"],
input[type="image"]:not([src], [srcset]),
input[type="image"][src=""],
input[type="image"][src=" "],
input[type="image"][src="#"],
input[type="image"][src="/"],
input[type="image"][srcset=""],
input[type="image"][srcset=" "],
input[type="image"][srcset="#"]
input[type="image"][srcset="/"]
<img alt="Missing src" width="144" height="144"/>
A <label> with a [for] attribute should label something with an [id] attribute, obviously.
label[for=""],
label[for=" "]
<label for=" ">Guess what?</label>
How to label a field? You have a few choices: [id], [title], [aria-label] and [aria-labelledby].
input:not([type="button"], [type="submit"], [type="hidden"], [type="reset"], [type="image"], [id], [aria-label], [title], [aria-labelledby]),
textarea:not([id], [aria-label], [aria-labelledby]),
select:not([id], [aria-label], [aria-labelledby])
<input type="text" /><span>†</span>
How to label a [reset], [submit] or [button] type input?
You still have a few choices: [value], [title], [aria-label] and [aria-labelledby].
input[type="reset"]:not([value], [title], [aria-label], [aria-labelledby]),
input[type="submit"]:not([value], [title], [aria-label], [aria-labelledby]),
input[type="button"]:not([value], [title], [aria-label], [aria-labelledby])
<input type="submit" /><span>†</span>
A <button> should either have content or an [aria-label], [aria-labelledby] or [title]. Those attributes, if present, should not be empty.
button:empty:not([aria-label], [aria-labelledby], [title])
<button type="button"></button>
[aria-label], [aria-labelledby] or [title] on a <button> must not be empty.
button[title=""],
button[aria-label=""],
button[aria-labelledby=""]
<button title="" type="button">Test</button>
A <button> has a defaut [type] value of "submit", in order to send a <form>.
However outside a form, if it's intended to send a form it should mention it with one of those attributes: [form], [formaction], [formtarget].
If it doesn't submit anything, it should have the [type="button"].
button:not([type], [form], [formaction], [formtarget])
<button>I just don't know what todo with myself</button>
If a <button>'s[type] is either "reset" or "button", it should not use the following attributes:
[formmethod];[formaction];[formtarget];[formenctype];[formnovalidate].button[type="reset"][formmethod],
button[type="reset"][formaction],
button[type="reset"][formtarget],
button[type="reset"][formenctype],
button[type="reset"][formnovalidate],
button[type="button"][formmethod],
button[type="button"][formaction],
button[type="button"][formtarget],
button[type="button"][formenctype],
button[type="button"][formnovalidate]
<button type="button" formmethod="GET">I have a method!</button>
A <button> styled to be disabled should be disabled for real.
Use [disabled] and [readonly].
button[class*="disabled"]:not([disabled], [readonly])
<button class="is-disabled" type="button">To be or not to be (disabled)?</button>
<input> needs a [type] in order to tell the user what kind of data is wanted.
input:not([type]),
input[type=" "],
input[type=""]
<label for="No-type">No type</label>
<input value="Whatever you want" id="No-type"/><span>†</span>
<optgroup> needs a [label] to explain what's inside the group.
optgroup:not([label])
<form action="/">
<label for="optgroup-test">Oh, hey</label>
<select id="optgroup-test">
<optgroup label="I'm a group">
<option value="1">I'm an option</option>
<option value="2">I'm another option</option>
</optgroup>
<optgroup>
<option value="3">I'm an option, but from another group</option>
<option value="4">I'm another option, still from another group</option>
</optgroup>
</select>
</form>
<iframe> needs a [title] in order to tell the user what to expect inside the iframe.
iframe:not([title]),
iframe[title=" "],
iframe[title=""]
<iframe srcdoc="<!DOCTYPE html><title>Missing [title]</title>"></iframe><span>†</span>
<form> should do something, isnt'it? Well, [action] is meant to define what.
form:not([action]),
form[action=" "],
form[action=""]
<form>
<label for="input">Guess what do we do with your datas?</label>
<input id="input" type="text" />
<input type="submit" value="No idea, huh?"/>
</form>
<html> must indicate to User Agents the human language used in the document.
html:not([lang]),
html[lang*=" "],
html[lang=""]
<iframe title="No language defined example" srcdoc="<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Je ne parle pas Français</title>
<style>html{font:.75rem sans-serif}</style>
<link rel='stylesheet' type='text/css' href='https://ffoodd.github.io/a11y.css/css/a11y-en_errors-only.css'>
</head>
<body>
<ul>
<li>Speak French?</li>
<li>Habla usted francés?</li>
<li>Sprechen Sie Französisch?</li>
</ul>">
</iframe>
<table> may be used for layout if a [role="presentation"] is added.
However, semantics tags and attributes aiming to organize datas mustn't be used. Here's a list:
<th>;<thead>;<tfoot>;<caption>;[axis];[scope];[headers];[colgroup].table[role="presentation"] th,
table[role="presentation"] thead,
table[role="presentation"] tfoot,
table[role="presentation"] caption,
table[role="presentation"] colgroup,
table[role="presentation"] [axis],
table[role="presentation"] [scope],
table[role="presentation"] [headers]
| It works |
<table role="presentation">
<caption>I do not mean anything!</caption>
<tbody>
<tr>
<td colspan="2">It works</td>
</tr>
</tbody>
</table>
[width] and [height] are presentation informations.
Therefore it shouldn't be used in markup, except for <img>. Use CSS instead.
:not(img, object, embed, svg, canvas)[width],
:not(img, object, embed, svg, canvas)[height]
Damned! I feel sooo strait :(
<p width="20">Damned! I feel sooo strait :(</p>
Javascript event attributes (such as [onmouseover]) should not be used.
Prefer either CSS pseudo-classes (:hover, :focus, :active, etc.) or JS event listeners.
[onafterprint], [onbeforeprint], [onbeforeunload],
[onerror], [onhaschange], [onload], [onmessage],
[onoffline], [ononline], [onpagehide], [onpageshow],
[onpopstate], [onredo], [onresize], [onstorage],
[onundo], [onunload],
[onblur], [onchage], [oncontextmenu], [onfocus],
[onformchange], [onforminput], [oninput], [oninvalid],
[onreset], [onselect], [onsubmit],
[onkeydown], [onkeypress], [onkeyup],
[onclick], [ondblclick], [ondrag], [ondragend],
[ondragenter], [ondragleave], [ondragover],
[ondragstart], [ondrop], [onmousedown], [onmousemove],
[onmouseout], [onmouseover], [onmouseup], [onmousewheel],
[onscroll],
[onabort], [oncanplay], [oncanplaythrough],
[ondurationchange], [onemptied], [onended], [onerror],
[onloadeddata], [onloadedmetadata], [onloadstart],
[onpause], [onplay], [onplaying], [onprogress],
[onratechange], [onreadystatechange], [onseeked],
[onseeking], [onstalled], [onsuspend], [ontimeupdate],
[onvolumechange], [onwaiting]
<span onclick="alert('You clicked!');">Click click click</span>
Did you know that some characters should be avoided as first characters in class names and identifiers? Yep. Digits, two hyphens, or hyphen followed by a digit.
[id^="1"],
[id^="2"],
[id^="3"],
[id^="4"],
[id^="5"],
[id^="6"],
[id^="7"],
[id^="8"],
[id^="9"],
[id^="0"],
[id^="--"],
[id^="-1"],
[id^="-2"],
[id^="-3"],
[id^="-4"],
[id^="-5"],
[id^="-6"],
[id^="-7"],
[id^="-8"],
[id^="-9"],
[id^="-0"],
[class^="1"],
[class^="2"],
[class^="3"],
[class^="4"],
[class^="5"],
[class^="6"],
[class^="7"],
[class^="8"],
[class^="9"],
[class^="0"],
[class^="--"],
[class^="-1"],
[class^="-2"],
[class^="-3"],
[class^="-4"],
[class^="-5"],
[class^="-6"],
[class^="-7"],
[class^="-8"],
[class^="-9"],
[class^="-0"]
<div id="2">Hello! My ID is 2.</div>
The <title> tag is the first thing read aloud by screen readers — to announce the page… title — and also the first thing displayed on search engines' results pages.
We could use the :blank pseudo-class, but at this time its support is very poor. We could also use the :-moz-only-whitespace pseudo-class, but support is limited to Firefox and thus could invalidate our selectors stack…
title:empty
<title></title>
User should be able to zoom in or out the page to improve readability and comfort; this is usually allowed by the viewport <meta>.
meta[name="viewport"][content*="maximum-scale"],
meta[name="viewport"][content*="minimum-scale"],
meta[name="viewport"][content*="user-scalable=no"]
<iframe title="Wrong viewport instruction example" srcdoc="<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<title>Wrong viewport instruction</title>
<meta name='viewport' content='user-scalable=no'/>
<style>html{font:.75rem sans-serif}</style>
<link rel='stylesheet' type='text/css' href='https://ffoodd.github.io/a11y.css/css/a11y-en_errors-only.css'>
</head>
<body>
<h1>Wrong <code>viewport</code> instruction</h1>">
</iframe>
Using utf-8 character encoding is recommended by the W3C itself:
supports many languages and can accommodate pages and forms in any mixture of those languages.
Moreover it avoids some security issues exploiting some other charsets…
meta[charset]:not([charset="utf-8"], [charset="UTF-8"])
<meta charset="Windows-1252"/><link>†</link>
As explained on the Mozilla Developer Network:
The
<meta>element declaring the encoding must be inside the<head>element and within the first 1024 bytes of the HTML, as some browsers only look at those bytes before choosing an encoding.
It's also meant to prevent an old security exploit using UTF-7. Declaring the charset
before the <title> tag is the simplest way to cover it.
head :first-child:not([charset])
<iframe title="Late charset example" srcdoc="<!DOCTYPE html>
<html lang=en>
<head>
<title>Oups !</title>
<style>html{font:.75rem sans-serif}</style>
<link rel=stylesheet type=text/css href=https://ffoodd.github.io/a11y.css/css/a11y-en_errors-only.css>
</head>
<body>
<h1>How am I encoded, buddy?</h1>">
</iframe>
The [dir] attribute — used to specify the element’s text directionality — only accepts three values: rtl, ltr and auto.
[dir]:not([dir="rtl"], [dir="ltr"], [dir="auto"])
Well, I'm kinda disoriented…
<p dir="wtf">Well, I'm kinda disoriented…</p>
The [accesskey] attribute is meant to implement site specific keyboard shortcuts.
This is usually a bad idea since keys might be already used by either the operating system,
the browser, browser extension and even user's settings…
This is opinionated: in a perfect world, [accesskey] could be used wisely. Yup. Could be.
[accesskey]
<a id="key" name="key" accesskey="1">Skip to this link using <kbd>1</kbd></a>
Inputs with a type of radio or checkbox are usually grouped. The [name] attribute is meant to programmatically associate them,
thus is needed.
[type="radio"]:not([name]),
[type="checkbox"]:not(:only-of-type, [name])
<form action="/">
<fieldset>
<legend>Options</legend>
<p>
<label for="option-1">Option N<sup>o</sup>1</label>
<input type="radio" id="option-1"><span>†</span>
</p>
<p>
<label for="option-2">Option N<sup>o</sup>2</label>
<input type="radio" id="option-2" name="options">
</p>
</fieldset>
</form>
Inputs with a type of radio should be grouped by a parent <fieldset>, described by its <legend>.
Please note that WCAG doesn't actually require this but strongly recommends it: "where the individual label associated with each particular control provides a sufficient description, the use of the fieldset and legend elements is not required."
This test could be a warning…
[type="radio"]
<form action="/">
<p>
<label for="option-1">Option N<sup>o</sup>1</label>
<input type="radio" id="option-1" name="options"><span>†</span>
</p>
<br>
<fieldset>
<legend>Trying within a fieldset, shouldn't match</legend>
<p>
<label for="option-2">Option N<sup>o</sup>2</label>
<input type="radio" id="option-2" name="options"><span>†</span>
</p>
</fieldset>
</form>
[role="slider"] requires a few attributes:
[aria-valuemin][aria-valuemax][aria-valuenow]Also [aria-valuetext] is welcome, even though it's not required by ARIA specification.
[role="slider"]:not([aria-valuemin]),
[role="slider"]:not([aria-valuemax]),
[role="slider"]:not([aria-valuenow])
<label for="slider">Slider</label>
<input id="slider" role="slider" type="range" /><span>†</span>
[role="spinbutton"] requires a few attributes:
[aria-valuemin][aria-valuemax][aria-valuenow][role="spinbutton"]:not([aria-valuemin]),
[role="spinbutton"]:not([aria-valuemax]),
[role="spinbutton"]:not([aria-valuenow])
<label for="spinbutton">Spinbutton</label>
<input id="spinbutton" role="spinbutton" type="range" /><span>†</span>
[role="spinbutton"] requires a few attributes:
[aria-valuemin][aria-valuemax][aria-valuenow][role="checkbox"]:not([aria-checked])
<img src="/static/ffoodd.png" alt="Checkbox" role="checkbox" width="36" height="36"/><span>†</span>
[aria-expanded] is required on [role="combobox"].
[role="combobox"]:not([aria-expanded])
<input type="text" aria-label="Combobox" role="combobox" id="combobox"><span>†</span>
Some properties are required to comply the [role="scrollbar"] pattern:
[aria-controls][aria-valuemin][aria-valuemax][aria-valuenow][aria-orientation][role="scrollbar"]:not([aria-controls]),
[role="scrollbar"]:not([aria-valuemin]),
[role="scrollbar"]:not([aria-valuemax]),
[role="scrollbar"]:not([aria-valuenow]),
[role="scrollbar"]:not([aria-orientation])
<div role="scrollbar">↓</div>
An interactive element should not be contained in another interactive element (e.g. <a> in <button>).
a a[href],
button a[href],
a audio[controls],
button audio[controls],
a video[controls],
button video[controls],
a button,
button button,
a details,
button details,
a embed,
button embed,
a iframe,
button iframe,
a img[usemap],
button img[usemap],
a label,
button label,
a select,
button select,
a textarea,
button textarea,
a input[type]:not([hidden]),
button input[type]:not([hidden]),
form form,
label label,
meter meter,
progress progress