Errors
[accesskey] is a bad idea
Description
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.
References
- https://github.com/karlgroves/diagnostic.css/blob/39ede15ff46bd59af9f8f30efb04cbb45b6c1ba5/diagnostic.css#L159
- https://www.cs.tut.fi/~jkorpela/forms/accesskey.html
- https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey
- https://w3c.github.io/html/editing.html#element-attrdef-global-accesskey
- https://john.foliot.ca/more-reasons-why-we-dont-use-accesskeys/
- https://www.alsacreations.com/article/lire/568-Accesskey-le-grand-echec-de-l-accessibilite-du-Web.html
Selector
[accesskey]
Test
<a id="key" name="key" accesskey="1">Skip to this link using <kbd>1</kbd></a>
[width] & [height] attributes
Description
[width]
and [height]
are presentation informations.
Therefore it shouldn't be used in markup, except for <img>
. Use CSS instead.
References
- https://references.modernisation.gouv.fr/rgaa/criteres.html#presentation
- https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-10-1-
- https://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic
- https://www.w3.org/TR/WCAG20/#content-structure-separation-sequence
Selector
:not(img):not(object):not(embed):not(svg):not(canvas)[width],
:not(img):not(object):not(embed):not(svg):not(canvas)[height]
Test
Damned! I feel sooo strait :(
<p width="20">Damned! I feel sooo strait :(</p>
Disabled button
Description
A <button>
styled to be disabled should be disabled for real.
Use [disabled]
and [readonly]
.
References
Selector
button[class*="disabled"]:not([disabled]):not([readonly])
Test
<button class="is-disabled" type="button">To be or not to be (disabled)?</button>
Empty button
Description
A <button>
should either have content or an [aria-label]
, [aria-labelledby]
or [title]
. Those attributes, if present, should not be empty.
References
- https://references.modernisation.gouv.fr/rgaa-accessibilite/criteres.html#formulaire
- https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-11-9
- https://www.w3.org/TR/WCAG20/#ensure-compat-rsv
- https://www.w3.org/TR/WCAG-TECHS/H91.html
- https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L193
Selector
button:empty:not([aria-label]):not([aria-labelledby]):not([title])
Test
<button type="button"></button>
Empty button attribute
Description
[aria-label]
, [aria-labelledby]
or [title]
on a <button>
must not be empty.
References
- https://references.modernisation.gouv.fr/rgaa-accessibilite/criteres.html#formulaire
- https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-11-9
- https://www.w3.org/TR/WCAG20/#ensure-compat-rsv
- https://www.w3.org/TR/WCAG-TECHS/H91.html
- https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L193
Selector
button[title=""],
button[aria-label=""],
button[aria-labelledby=""]
Test
<button title="" type="button">Test</button>
A label with an empty [for] attribute
Description
A <label>
with a [for]
attribute should label something with an [id]
attribute, obviously.
References
- https://references.modernisation.gouv.fr/rgaa-accessibilite/criteres.html#test-11-1-2
- https://github.com/DISIC/rgaa_referentiel_en/blob/44e2bee0c710e37ca49901b1e6b8fae9b553fd5d/criteria.html#L3981
- https://www.w3.org/TR/WCAG-TECHS/H44.html
- https://www.w3.org/WAI/tutorials/forms/labels/
- https://make.wordpress.org/accessibility/2017/01/16/testing-form-functionality-with-different-assistive-technology/
- https://www.w3.org/TR/WCAG20/#minimize-error-cues
- https://www.w3.org/TR/WCAG20/#navigation-mechanisms-descriptive
- https://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic
Selector
label[for=""],
label[for=" "]
Test
<label for=" ">Guess what?</label>
Empty [href]
Description
The [href]
attribute, if present, should not be empty. A link to something, right?
References
- https://www.w3.org/TR/html/links.html#links-created-by-a-and-area-elements
- https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L161
- https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165
Selector
a[href=""],
a[href=" "]
Test
<a href=" ">Who am I? Where do I link?</a>
Empty link
Description
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?
References
- https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-6-5
- https://www.w3.org/TR/WCAG20/#text-equiv-all
- https://www.w3.org/TR/WCAG20/#navigation-mechanisms-refs
- https://www.w3.org/TR/WCAG20/#navigation-mechanisms-link
- https://www.w3.org/TR/WCAG-TECHS/H30.html
- https://www.w3.org/TR/WCAG-TECHS/G91.html
- https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L193
Selector
a:empty[title=""],
a:empty[aria-label=""],
a:empty[aria-labelledby=""],
a:empty:not([title]):not([aria-label]):not([aria-labelledby])
Test
Incorrect charset
Description
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…
References
- https://bitsofco.de/linting-html-using-css/#incorrectcharacterset
- https://www.w3.org/TR/html5/document-metadata.html#attr-meta-charset
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
- https://validator.w3.org/docs/help.html#faq-charset
- https://www.w3.org/TR/2008/REC-WCAG20-20081211/#meaning
- https://validator.w3.org/i18n-checker/
- https://www.w3.org/International/tutorials/tutorial-char-enc/
Selector
meta[charset]:not([charset="utf-8"]):not([charset="UTF-8"])
Test
<meta charset="Windows-1252"/><span>†</span>
Grouping inputs
Description
Inputs with a type of radio
or checkbox
are usually grouped. The [name]
attribute is meant to programmatically associate them,
thus is needed.
References
- https://www.w3.org/WAI/tutorials/forms/grouping/
- https://www.w3.org/TR/html/sec-forms.html#checkbox-state-typecheckbox
- https://www.w3.org/TR/html/sec-forms.html#radio-button-state-typeradio
- https://www.w3.org/TR/html/sec-forms.html#element-attrdef-formelements-name
- https://www.w3.org/TR/WCAG-TECHS/H71.html
Selector
[type="radio"]:not([name]),
[type="checkbox"]:not(:only-of-type):not([name])
Test
<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>
Invalid [dir] attribute
Description
The [dir]
attribute — used to specify the element’s text directionality — only accepts three values: rtl
, ltr
and auto
.
References
- https://github.com/karlgroves/diagnostic.css/blob/39ede15ff46bd59af9f8f30efb04cbb45b6c1ba5/diagnostic.css#L113
- https://www.w3.org/International/questions/qa-html-dir
- https://www.w3.org/International/articles/inline-bidi-markup/#dirattribute
- https://w3c.github.io/html/dom.html#the-dir-attribute
Selector
[dir]:not([dir="rtl"]):not([dir="ltr"]):not([dir="auto"])
Test
Well, I'm kinda disoriented…
<p dir="wtf">Well, I'm kinda disoriented…</p>
Javascript events attributes
Description
Javascript event attributes (such as [onmouseover]
) should not be used.
Prefer either CSS pseudo-classes (:hover
, :focus
, :active
, etc.) or JS event listeners.
References
- https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
- https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
Selector
[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]
Test
<span onclick="alert('You clicked!');">Click click click</span>
Charset should come first
Description
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.
References
- https://bitsofco.de/linting-html-using-css/#incorrectcharacterset
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
- https://w3c.github.io/html/document-metadata.html#charset
- https://michaelthelin.se/security/2014/06/08/web-security-cross-site-scripting-attacks-using-utf-7.html
Selector
head :first-child:not([charset])
Test
<iframe src="static/no-charset.html" title="Late charset a11y.css test-case" sandbox="allow-same-origin"></iframe>
Namespaces
Description
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.
References
- https://www.w3.org/TR/2011/REC-css3-selectors-20110929/#w3cselgrammar
- https://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/
- https://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/tests/css3-modsel-175a.html
Selector
[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"]
Test
<div id="2">Hello! My ID is 2.</div>
Nested interactive elements
Description
An interactive element should not be contained in another interactive element (e.g. <a>
in <button>
).
References
- https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-8-2
- https://www.w3.org/TR/WCAG20/#ensure-compat-parses
- https://www.w3.org/TR/WCAG20/#ensure-compat-rsv
- https://www.w3.org/TR/xhtml1/#prohibitions
- https://w3c.github.io/html/dom.html#interactive-content-2
- https://w3c.github.io/html/sec-forms.html#the-form-element
- https://w3c.github.io/html/sec-forms.html#the-progress-element
- https://w3c.github.io/html/sec-forms.html#the-meter-element
- https://w3c.github.io/html/sec-forms.html#the-button-element
- https://w3c.github.io/html/textlevel-semantics.html#the-a-element
- https://w3c.github.io/html/sec-forms.html#the-label-element
Selector
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
Test
form missing an [action]
Description
<form>
should do something, isnt'it? Well, [action]
is meant to define what.
References
Selector
form:not([action]),
form[action=" "],
form[action=""]
Test
<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>
Missing alternative for img
Description
An <img>
must have an [alt]
. Always.
References
- https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-1-1
- https://www.w3.org/WAI/tutorials/images/decision-tree/
- https://www.w3.org/TR/html51/semantics.html#alt
- https://www.w3.org/TR/WCAG20/#text-equiv-all
- https://www.w3.org/TR/WCAG-TECHS/H36.html
- https://www.w3.org/TR/WCAG-TECHS/H37.html
- https://www.w3.org/TR/WCAG-TECHS/H24.html
- https://www.w3.org/TR/WCAG-TECHS/F65.html
Selector
img[alt=" "],
area[alt=" "],
input[type="image"][alt=" "],
img:not([alt]),
area:not([alt]),
input[type="image"]:not([alt])
Test

<img src="static/ffoodd.png" width="144" height="144" /><span>†</span>
Missing label for [role=img]
Description
[role=img]
should either have [aria-label]
or [aria-labelledby]
.
If image is decorative, please use [role=presentation]
instead.
References
- https://www.w3.org/TR/wai-aria/roles#img
- https://www.w3.org/TR/2008/REC-WCAG20-20081211/#text-equiv-all
- https://www.w3.org/WAI/tutorials/images/decision-tree/
- https://www.w3.org/TR/wai-aria/roles#presentation
- https://www.w3.org/TR/wai-aria/roles#textalternativecomputation
Selector
[role="img"]:not([aria-label]):not([aria-labelledby]),
svg[role="img"]:not([aria-label]):not([aria-labelledby])
Test
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="https://www.w3.org/2000/svg" version="1.1" role="img">
<rect x="400" y="100" width="400" height="200"
fill="forestgreen" stroke="darkgreen" stroke-width="10" />
</svg><span>†</span>
Missing some kind of label
Description
How to label a field? You have a few choices: [id]
, [title]
, [aria-label]
and [aria-labelledby]
.
References
- https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-11-1
- https://www.w3.org/TR/WCAG20/#minimize-error-cues
- https://www.w3.org/TR/WCAG20/#navigation-mechanisms-descriptive
- https://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic
- https://www.w3.org/TR/WCAG-TECHS/H44.html
Selector
input:not([type="button"]):not([type="submit"]):not([type="hidden"]):not([type="reset"]):not([type="image"]):not([id]):not([aria-label]):not([title]):not([aria-labelledby]),
textarea:not([id]):not([aria-label]):not([aria-labelledby]),
select:not([id]):not([aria-label]):not([aria-labelledby])
Test
<input type="text" /><span>†</span>
No language defined
Description
<html>
must indicate to User Agents the human language used in the document.
References
- https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-8-3
- https://references.modernisation.gouv.fr/rgaa-accessibilite/glossaire.html#langue-par-dfaut
- https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-8-4
- https://www.w3.org/TR/WCAG20/#meaning-doc-lang-id
- https://www.w3.org/TR/WCAG-TECHS/H57.html
Selector
html:not([lang]),
html[lang=" "],
html[lang=""]
Test
<iframe title="No language defined a11y.css test-case" src="static/no-lang.html" sandbox="allow-same-origin"></iframe>
Empty title tag
Description
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…
References
- https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-8-5
- https://references.modernisation.gouv.fr/rgaa/glossaire.html#titrePage
- https://www.w3.org/TR/html5/document-metadata.html#the-title-element
- https://www.w3.org/TR/WCAG20/#navigation-mechanisms-title
- https://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-title
- https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html
- https://www.w3.org/TR/WCAG-TECHS/G88.html
- https://www.w3.org/TR/WCAG-TECHS/G127.html
- https://www.w3.org/TR/WCAG-TECHS/H25.html
- https://drafts.csswg.org/selectors-4/#the-blank-pseudo
- https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-only-whitespace
- https://css-tricks.com/almanac/selectors/b/blank/
Selector
title:empty
Test
<title></title>
Missing source for img
Description
An <img>
must have an [src]
or an [srcset]
, and it should be a valid one. Obviously.
References
- https://www.w3.org/TR/html5/embedded-content-0.html#attr-img-src
- https://scottjehl.github.io/picturefill/
Selector
img:not([src]):not([srcset]),
img[src=""],
img[src=" "],
img[src="#"],
img[src="/"],
img[srcset=""],
img[srcset=" "],
img[srcset="#"],
img[srcset="/"],
input[type="image"]:not([src]):not([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="/"]
Test
<img alt="Missing src" width="144" height="144"/>
iframe without [title]
Description
<iframe>
needs a [title]
in order to tell the user what to expect inside the iframe.
References
- https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-2-1
- https://www.w3.org/TR/WCAG20/#ensure-compat-rsv
- https://www.w3.org/TR/WCAG-TECHS/H64.html
Selector
iframe:not([title]),
iframe[title=" "],
iframe[title=""]
Test
<iframe src="static/no-title.html" sandbox="allow-same-origin"></iframe><span>†</span>
input without [type]
Description
<input>
needs a [type]
in order to tell the user what kind of data is wanted.
References
- https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-11-11
- https://www.w3.org/TR/WCAG20/#minimize-error-suggestions
Selector
input:not([type]),
input[type=" "],
input[type=""]
Test
<label for="No-type">No type</label>
<input value="Whatever you want" id="No-type"/><span>†</span>
Missing a value
Description
How to label a [reset]
, [submit]
or [button]
type input?
You still have a few choices: [value]
, [title]
, [aria-label]
and [aria-labelledby]
.
References
- https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-11-9
- https://www.w3.org/TR/WCAG20/#ensure-compat-rsv
- https://www.w3.org/TR/WCAG-TECHS/H91.html
Selector
input[type="reset"]:not([value]):not([title]):not([aria-label]):not([aria-labelledby]),
input[type="submit"]:not([value]):not([title]):not([aria-label]):not([aria-labelledby]),
input[type="button"]:not([value]):not([title]):not([aria-label]):not([aria-labelledby])
Test
<input type="submit" /><span>†</span>
Form button
Description
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"]
.
References
- https://www.w3.org/TR/html5/forms.html#the-button-element
- https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L189
Selector
button:not([type]):not([form]):not([formaction]):not([formtarget])
Test
<button>I just don't know what todo with myself</button>
Button not submitting
Description
If a <button>
's[type]
is either "reset"
or "button"
, it should not use the following attributes:
* [formmethod]
;
* [formaction]
;
* [formtarget]
;
* [formenctype]
;
* [formnovalidate]
.
References
Selector
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]
Test
<button type="button" formmethod="GET">I have a method!</button>
optgroup without label
Description
<optgroup>
needs a [label]
to explain what's inside the group.
References
- https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-11-8
- https://www.w3.org/TR/WCAG-TECHS/H85.html
- https://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/H85
Selector
optgroup:not([label])
Test
<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>
[radio] outside a fieldset
Description
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…
References
- https://www.w3.org/WAI/tutorials/forms/grouping/#radio-buttons
- https://www.w3.org/TR/html/sec-forms.html#radio-button-state-typeradio
- https://www.w3.org/TR/html/sec-forms.html#element-attrdef-formelements-name
- https://www.w3.org/TR/WCAG-TECHS/H71.html
- https://www.w3.org/TR/WCAG-TECHS/H44.html
Selector
[type="radio"]
Test
<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=checkbox] missing state
Description
[role="spinbutton"]
requires a few attributes:
[aria-valuemin]
[aria-valuemax]
[aria-valuenow]
References
- https://www.w3.org/TR/wai-aria/roles#checkbox
- https://www.w3.org/TR/wai-aria/states_and_properties#aria-checked
- https://oaa-accessibility.org/examples/role/76/
Selector
[role="checkbox"]:not([aria-checked])
Test

<img src="static/ffoodd.png" alt="Checkbox" role="checkbox" width="36" height="36"/><span>†</span>
[role=combobox] missing [state]
Description
[aria-expanded]
is required on [role="combobox"]
.
References
- https://www.w3.org/TR/wai-aria/roles#combobox
- https://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded
- https://oaa-accessibility.org/examples/role/77/
Selector
[role="combobox"]:not([aria-expanded])
Test
<input type="text" aria-label="Combobox" role="combobox" id="combobox"><span>†</span>
[role=scrollbar] required properties
Description
Some properties are required to comply the [role="scrollbar"]
pattern:
[aria-controls]
[aria-valuemin]
[aria-valuemax]
[aria-valuenow]
[aria-orientation]
References
- https://www.w3.org/TR/wai-aria/roles#scrollbar
- https://www.w3.org/TR/wai-aria/states_and_properties#aria-controls
- https://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemin
- https://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax
- https://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow
- https://www.w3.org/TR/wai-aria/states_and_properties#aria-orientation
Selector
[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])
Test
<div role="scrollbar">↓</div>
[role=slider] missing attributes
Description
[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.
References
- https://github.com/imbrianj/debugCSS/blob/master/debugCSS.css#L378
- https://www.w3.org/TR/wai-aria/roles#slider
- https://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow
- https://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemin
- https://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax
- https://www.oaa-accessibility.org/examplep/slider1/
- https://www.paciellogroup.com/blog/2008/05/aria-slider-part-1/
- https://www.paciellogroup.com/blog/2008/06/aria-slider-part-2/
- https://www.paciellogroup.com/blog/2008/06/aria-slider-part-3/
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role
Selector
[role="slider"]:not([aria-valuemin]),
[role="slider"]:not([aria-valuemax]),
[role="slider"]:not([aria-valuenow])
Test
<label for="slider">Slider</label>
<input id="slider" role="slider" type="range" /><span>†</span>
[role=spinbutton] missing attributes
Description
[role="spinbutton"]
requires a few attributes:
[aria-valuemin]
[aria-valuemax]
[aria-valuenow]
References
- https://www.w3.org/TR/wai-aria/roles#spinbutton
- https://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow
- https://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemin
- https://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax
- https://oaa-accessibility.org/example/33/
Selector
[role="spinbutton"]:not([aria-valuemin]),
[role="spinbutton"]:not([aria-valuemax]),
[role="spinbutton"]:not([aria-valuenow])
Test
<label for="spinbutton">Spinbutton</label>
<input id="spinbutton" role="spinbutton" type="range" /><span>†</span>
[tabindex] > 0
Description
The [tabindex]
attribute should never be greater than 0.
Reference
- https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L337
- https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-12-13
- https://www.w3.org/TR/WCAG-TECHS/F44.html
- https://www.scottohara.me/blog/2019/05/25/tabindex.html
Selector
[tabindex]:not([tabindex="0"]):not([tabindex^="-"])
Test
<button tabindex="1" type="button">Positive tabindex is bad</button>
table used for layout
Description
<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]
.
References
- https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-5-8
- https://www.w3.org/TR/WCAG-TECHS/F46.html
- https://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/F49
- https://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic
Selector
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]
Test
It works |
<table role="presentation">
<caption>I do not mean anything!</caption>
<tbody>
<tr>
<td colspan="2">It works</td>
</tr>
</tbody>
</table>
Unaccessible viewport attribute
Description
User should be able to zoom in or out the page to improve readability and comfort; this is usually allowed by the viewport <meta>
.
References
- https://bitsofco.de/linting-html-using-css/
- https://dequeuniversity.com/rules/axe/2.1/meta-viewport
- https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-scale
- https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html
- https://www.accede-web.com/notices/html-css-javascript/11-zoom-taille-texte/11-3-ne-pas-brider-le-zoom-avec-la-propriete-user-scalable/
- https://adrianroselli.com/2015/10/dont-disable-zoom.html
Selector
meta[name="viewport"][content*="maximum-scale"],
meta[name="viewport"][content*="minimum-scale"],
meta[name="viewport"][content*="user-scalable=no"]
Test
<iframe src="static/viewport.html" sandbox="allow-same-origin" title="Wrong viewport instruction example"></iframe><span>†</span>