### Selector
-```css_example
+``` css
:not(img):not(object):not(embed):not(svg):not(canvas)[width],
:not(img):not(object):not(embed):not(svg):not(canvas)[height]
```
### Test
-```html_example
+``` html
Damned! I feel sooo strait :(
```
*/
@@ -904,7 +904,7 @@ Prefer either CSS pseudo-classes (`:hover`, `:focus`, `:active`, etc.) or JS eve
*
### Selector
-```css_example
+``` css
[onafterprint], [onbeforeprint], [onbeforeunload],
[onerror], [onhaschange], [onload], [onmessage],
[onoffline], [ononline], [onpagehide], [onpageshow],
@@ -929,7 +929,7 @@ Prefer either CSS pseudo-classes (`:hover`, `:focus`, `:active`, etc.) or JS eve
```
### Test
-```html_example
+``` html
Click click click
```
*/
@@ -975,7 +975,7 @@ Yep. Digits, two hyphens, or hyphen followed by a digit.
*
### Selector
-```css_example
+``` css
[id^="1"],
[id^="2"],
[id^="3"],
@@ -1021,7 +1021,7 @@ Yep. Digits, two hyphens, or hyphen followed by a digit.
```
### Test
-```html_example
+``` html
Hello! My ID is 2.
```
*/
@@ -1101,12 +1101,12 @@ We could use the `:blank` pseudo-class, but at this time its support is very poo
*
### Selector
-```css_example
+``` css
title:empty
```
### Test
-```html_example
+``` html
```
*/
@@ -1135,14 +1135,14 @@ User should be able to zoom in or out the page to improve readability and comfor
*
### Selector
-```css_example
+``` css
meta[name="viewport"][content*="maximum-scale"],
meta[name="viewport"][content*="minimum-scale"],
meta[name="viewport"][content*="user-scalable=no"]
```
### Test
-```html_example
+``` html
†
```
*/
@@ -1177,12 +1177,12 @@ Moreover it avoids some security issues exploiting some other charsets…
*
### Selector
-```css_example
+``` css
meta[charset]:not([charset="utf-8"]):not([charset="UTF-8"])
```
### Test
-```html_example
+``` html
†
```
*/
@@ -1216,12 +1216,12 @@ before the `` tag is the simplest way to cover it.
* <https://michaelthelin.se/security/2014/06/08/web-security-cross-site-scripting-attacks-using-utf-7.html>
### Selector
-```css_example
+``` css
head :first-child:not([charset])
```
### Test
-```html_example
+``` html
<iframe src="static/no-charset.html" title="Late charset a11y.css test-case" sandbox="allow-same-origin"></iframe>
```
*/
@@ -1248,12 +1248,12 @@ The `[dir]` attribute — used to specify the element’s text directionality
* <https://w3c.github.io/html/dom.html#the-dir-attribute>
### Selector
-```css_example
+``` css
[dir]:not([dir="rtl"]):not([dir="ltr"]):not([dir="auto"])
```
### Test
-```html_example
+``` html
<p dir="wtf">Well, I'm kinda disoriented…</p>
```
*/
@@ -1285,12 +1285,12 @@ This is opinionated: in a perfect world, `[accesskey]` could be used wisely. Yup
* <https://www.alsacreations.com/article/lire/568-Accesskey-le-grand-echec-de-l-accessibilite-du-Web.html>
### Selector
-```css_example
+``` css
[accesskey]
```
### Test
-```html_example
+``` html
<a id="key" name="key" accesskey="1">Skip to this link using <kbd>1</kbd></a>
```
*/
@@ -1318,13 +1318,13 @@ thus is needed.
* <https://www.w3.org/TR/WCAG-TECHS/H71.html>
### Selector
-```css_example
+``` css
[type="radio"]:not([name]),
[type="checkbox"]:not(:only-of-type):not([name])
```
### Test
-```html_example
+``` html
<form action="/">
<fieldset>
<legend>Options</legend>
@@ -1370,12 +1370,12 @@ This test could be a warning…
* <https://www.w3.org/TR/WCAG-TECHS/H44.html>
### Selector
-```css_example
+``` css
[type="radio"]
```
### Test
-```html_example
+``` html
<form action="/">
<p>
<label for="option-1">Option N<sup>o</sup>1</label>
@@ -1432,14 +1432,14 @@ Also `[aria-valuetext]` is welcome, even though it's not required by ARIA specif
* <https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role>
### Selector
-```css_example
+``` css
[role="slider"]:not([aria-valuemin]),
[role="slider"]:not([aria-valuemax]),
[role="slider"]:not([aria-valuenow])
```
### Test
-```html_example
+``` html
<label for="slider">Slider</label>
<input id="slider" role="slider" type="range" /><span>†</span>
```
@@ -1477,14 +1477,14 @@ category: Errors
* <https://oaa-accessibility.org/example/33/>
### Selector
-```css_example
+``` css
[role="spinbutton"]:not([aria-valuemin]),
[role="spinbutton"]:not([aria-valuemax]),
[role="spinbutton"]:not([aria-valuenow])
```
### Test
-```html_example
+``` html
<label for="spinbutton">Spinbutton</label>
<input id="spinbutton" role="spinbutton" type="range" /><span>†</span>
```
@@ -1520,12 +1520,12 @@ category: Errors
* <https://oaa-accessibility.org/examples/role/76/>
### Selector
-```css_example
+``` css
[role="checkbox"]:not([aria-checked])
```
### Test
-```html_example
+``` html
<img src="static/ffoodd.png" alt="Checkbox" role="checkbox" width="36" height="36"/><span>†</span>
```
*/
@@ -1554,12 +1554,12 @@ category: Errors
* <https://oaa-accessibility.org/examples/role/77/>
### Selector
-```css_example
+``` css
[role="combobox"]:not([aria-expanded])
```
### Test
-```html_example
+``` html
<input type="text" aria-label="Combobox" role="combobox" id="combobox"><span>†</span>
```
*/
@@ -1597,7 +1597,7 @@ Some properties are required to comply the `[role="scrollbar"]` pattern:
* <https://www.w3.org/TR/wai-aria/states_and_properties#aria-orientation>
### Selector
-```css_example
+``` css
[role="scrollbar"]:not([aria-controls]),
[role="scrollbar"]:not([aria-valuemin]),
[role="scrollbar"]:not([aria-valuemax]),
@@ -1606,7 +1606,7 @@ Some properties are required to comply the `[role="scrollbar"]` pattern:
```
### Test
-```html_example
+``` html
<div role="scrollbar">↓</div>
```
*/
@@ -1644,7 +1644,7 @@ An interactive element should not be contained in another interactive element (e
* <https://w3c.github.io/html/sec-forms.html#the-label-element>
### Selector
-```css_example
+``` css
a a[href],
button a[href],
a audio[controls],
@@ -1676,7 +1676,7 @@ progress progress
```
### Test
-```html_example
+``` html
<a href="https://www.ffoodd.fr">
<button type=button">Oh wait, what should I trigger?</button>
</a>
diff --git a/sass/themes/_obsolete.scss b/sass/themes/_obsolete.scss
index b2f83fdf..7d1e6b5a 100644
--- a/sass/themes/_obsolete.scss
+++ b/sass/themes/_obsolete.scss
@@ -16,7 +16,7 @@ Many, many tags are obsolete in HTML5. You should care!
* <https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-8-2>
### Selector
-```css_example
+``` css
applet,
acronym,
bgsound,
@@ -50,7 +50,7 @@ menuitem
```
### Test
-```html_example
+``` html
<acronym title="World Wide Web Consortium">W3C</acronym>
```
*/
@@ -106,7 +106,7 @@ Many, many attributes are obsolete in HTML5. You should care!
* <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta>
### Selector
-```css_example
+``` css
[dropzone],
a[charset], link[charset],
a[coords],
@@ -190,7 +190,7 @@ body[background], table[background], thead[background], tbody[background], tfoot
```
### Test
-```html_example
+``` html
<h3 align="right">I'm using [align]!</h3>
```
*/
diff --git a/sass/themes/_warning.scss b/sass/themes/_warning.scss
index f9a8eec7..08009d02 100644
--- a/sass/themes/_warning.scss
+++ b/sass/themes/_warning.scss
@@ -19,14 +19,14 @@ The only child allowed in `<ul>` and `<ol>` is `<li>` - and the converse is also
* <https://www.w3.org/TR/html5/grouping-content.html#the-li-element>
### Selector
-```css_example
+``` css
ul > :not(li),
ol > :not(li),
:not(ul):not(ol) > li
```
### Test
-```html_example
+``` html
<ul>
<p>I feel like I'm lost.</p>
</ul>
@@ -57,13 +57,13 @@ category: Warnings
* <https://www.w3.org/TR/html5/grouping-content.html#the-dl-element>
### Selector
-```css_example
+``` css
dt + :not(dd),
:not(dt):not(dd) + dd
```
### Test
-```html_example
+``` html
<dl>
<dt>I need a definition, don't you think?</dt>
<li>I'm a list item.</li>
@@ -96,14 +96,14 @@ Any other imbrication may be a crime somewhere.
* <https://www.w3.org/TR/html52/grouping-content.html#elementdef-dl>
### Selector
-```css_example
+``` css
:not(dl) > dt,
:not(dl) > dd,
dl > :not(dt):not(dd):not(div)
```
### Test
-```html_example
+``` html
<dl>
<li>I'm a list item.</li>
</dl>
@@ -133,12 +133,12 @@ category: Warnings
* <https://www.w3.org/TR/html52/grouping-content.html#the-figcaption-element>
### Selector
-```css_example
+``` css
:not(figure) > figcaption
```
### Test
-```html_example
+``` html
<figcaption>I'm captionning something, isn't it?</figcaption>
```
*/
@@ -163,12 +163,12 @@ category: Warnings
* <https://www.w3.org/TR/html52/grouping-content.html#the-figure-element>
### Selector
-```css_example
+``` css
figure:not([role="group"])
```
### Test
-```html_example
+``` html
<figure>
<img src="static/ffoodd.png" width="144" height="144" alt="Figcaption test"/>
<figcaption>I'm a figcaption</figcaption>
@@ -208,7 +208,7 @@ Maybe other invalid nestings to test. Stay tuned.
* <https://www.w3.org/TR/WCAG20/#ensure-compat-rsv>
### Selector
-```css_example
+``` css
nav main,
aside main,
footer main,
@@ -241,7 +241,7 @@ address section
```
### Test
-```html_example
+``` html
<legend>I'm an legend. Am I?</legend>
```
*/
@@ -293,7 +293,7 @@ You could use a `<span>` instead.
* <https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L326>
### Selector
-```css_example
+``` css
b div,
i div,
q div,
@@ -308,7 +308,7 @@ strong div
```
### Test
-```html_example
+``` html
<b><div>Hey ya!</div></b>
```
*/
@@ -343,7 +343,7 @@ They must not be used as wrappers!
* <https://www.w3.org/TR/html5/dom.html#sectioning-content>
### Selector
-```css_example
+``` css
aside > aside:first-child,
article > aside:first-child,
aside > article:first-child,
@@ -354,7 +354,7 @@ article > article:first-child
```
### Test
-```html_example
+``` html
<aside>
<section>I'm wrapping, you know.</section>
</aside>
@@ -389,13 +389,13 @@ Always.
* <https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L218>
### Selector
-```css_example
+``` css
fieldset > *:not(legend):first-child,
fieldset > legend:not(:first-child)
```
### Test
-```html_example
+``` html
<fieldset>
<label>I'm not a legend.</label>
</fieldset>
@@ -426,13 +426,13 @@ Always.
* <https://www.w3.org/TR/html52/interactive-elements.html#elementdef-details>
### Selector
-```css_example
+``` css
details > *:not(summary):first-child,
details > summary:not(:first-child)
```
### Test
-```html_example
+``` html
<details>
<legend>I'm not a summary.</legend>
</details>
@@ -464,14 +464,14 @@ Any abbreviation should give an explanation about its meaning, at least on its f
* <https://www.w3.org/TR/WCAG-TECHS/H28.html>
### Selector
-```css_example
+``` css
abbr:not([title]),
abbr[title=" "],
abbr[title=""]
```
### Test
-```html_example
+``` html
<p>Do you know about <abbr>W3C</abbr>?</p>
```
*/
@@ -505,7 +505,7 @@ That should be double-checked.
* <https://www.w3.org/TR/WCAG-TECHS/F38.html>
### Selector
-```css_example
+``` css
img[alt=""],
area[alt=""],
input[type="image"][alt=""],
@@ -514,7 +514,7 @@ object[type="image"][alt=""]
```
### Test
-```html_example
+``` html
<img alt="" src="static/ffoodd.png" width="144" height="144" /><span>†</span>
```
*/
@@ -551,7 +551,7 @@ A file name in `[alt]` is probably wrongly automated… and would never ever hel
* <https://www.w3.org/TR/WCAG-TECHS/F38.html>
### Selector
-```css_example
+``` css
img[alt$=".pdf"],
area[alt$=".pdf"],
input[type="image"][alt$=".pdf"],
@@ -645,7 +645,7 @@ object[type="image"][alt$=".svgz"]
```
### Test
-```html_example
+``` html
<img alt="static/ffoodd.png" src="static/ffoodd.png" width="144" height="144" /><span>†</span>
```
*/
@@ -700,7 +700,7 @@ See [Edge cases and known issues](https://github.com/ffoodd/a11y.css/wiki/Edge-c
* <https://www.w3.org/TR/WCAG-TECHS/F65.html>
### Selector
-```css_example
+``` css
img[alt=""][title],
img[alt=""][aria-label],
img[alt=""][aria-labelledby],
@@ -729,7 +729,7 @@ object[type="image"][aria-hidden="true"][aria-describedby],
```
### Test
-```html_example
+``` html
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="https://www.w3.org/2000/svg" version="1.1"
aria-hidden="true" title="Decorative SVG, you punk!">
@@ -788,7 +788,7 @@ to empty `[alt]` or `[aria-hidden=true]`.
### Selector
-```css_example
+``` css
img[role="presentation"],
svg[role="presentation"],
area[role="presentation"],
@@ -798,7 +798,7 @@ object[role="presentation"]
```
### Test
-```html_example
+``` html
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="https://www.w3.org/2000/svg" version="1.1"
role="presentation">
@@ -836,12 +836,12 @@ Any `<svg>` should either have `[aria-hidden="true"]` if decorative, or a `[role
* <https://www.w3.org/TR/WCAG-TECHS/F65.html>
### Selector
-```css_example
+``` css
svg:not([aria-hidden="true"]):not([role="img"])
```
### Test
-```html_example
+``` html
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="https://www.w3.org/2000/svg" version="1.1"
aria-label="Decorative SVG, you punk!">
@@ -872,13 +872,13 @@ A time-based media like `<audio>` or `<video>` should not `[autoplay]`, because
* <https://www.punkchip.com/autoplay-is-bad-for-all-users/>
### Selector
-```css_example
+``` css
video[autoplay],
audio[autoplay]
```
### Test
-```html_example
+``` html
<video autoplay controls src=""></video><span>†</span>
```
*/
@@ -906,13 +906,13 @@ A time-based media like `<audio>` or `<video>` would be easier to use if `[contr
* <https://www.w3.org/TR/WCAG-TECHS/G4.html>
### Selector
-```css_example
+``` css
video:not([controls]),
audio:not([controls])
```
### Test
-```html_example
+``` html
<video src=""></video><span>†</span>
```
*/
@@ -952,12 +952,12 @@ We could use the `:blank` pseudo-class, but at this time its support is very poo
* <https://css-tricks.com/almanac/selectors/b/blank/>
### Selector
-```css_example
+``` css
body *:empty:not([hidden]):not([aria-hidden]):not([src]):not(button):not(a):not(iframe):not(textarea):not(area):not(base):not(br):not(col):not(command):not(embed):not(hr):not(img):not(input):not(keygen):not(link):not(meta):not(param):not(source):not(track):not(wbr):not(title)
```
### Test
-```html_example
+``` html
<p id="empty-node_code"></p>
```
*/
@@ -993,13 +993,13 @@ Should be double checked!
* <https://www.w3.org/TR/WCAG20/#content-structure-separation-sequence>
### Selector
-```css_example
+``` css
table:not([role="presentation"]) > tr:only-child,
table:not([role="presentation"]) > tbody > tr:only-child
```
### Test
-```html_example
+``` html
<table>
<caption>I'm a caption :3</caption>
<thead>
@@ -1038,12 +1038,12 @@ There's no good reason to nest data tables: thus it probably means we're facing
* <https://github.com/karlgroves/diagnostic.css/blob/39ede15ff46bd59af9f8f30efb04cbb45b6c1ba5/diagnostic.css#L175>
### Selector
-```css_example
+``` css
table table
```
### Test
-```html_example
+``` html
<table>
<caption>I'm a caption :3</caption>
<thead>
@@ -1102,13 +1102,13 @@ And it must be the `:first-child`, by the way.
* <https://github.com/imbrianj/debugCSS/blob/e04b489388870dd214aa1c1c1a07f6811210c8ef/debugCSS.css#L309>
### Selector
-```css_example
+``` css
table:not([role="presentation"]) > caption:not(:first-child),
table:not([role="presentation"]) > *:first-child:not(caption)
```
### Test
-```html_example
+``` html
<table>
<thead>
<tr>
@@ -1150,7 +1150,7 @@ category: Warnings
* <https://github.com/imbrianj/debugCSS/blob/e04b489388870dd214aa1c1c1a07f6811210c8ef/debugCSS.css#L314>
### Selector
-```css_example
+``` css
table > tfoot ~ thead,
table > tbody ~ tfoot,
table > tbody ~ thead,
@@ -1160,7 +1160,7 @@ table > tbody ~ colgroup
```
### Test
-```html_example
+``` html
<table>
<caption>I'm a caption</caption>
<thead>
@@ -1206,13 +1206,13 @@ category: Warnings
`<thead>` is strongly needed if `<tbody>` is present.
### Selector
-```css_example
+``` css
table:not([role="presentation"]) > caption + tbody,
table:not([role="presentation"]) > tbody:first-child
```
### Test
-```html_example
+``` html
<table>
<caption>Missing thead</caption>
<tbody>
@@ -1250,12 +1250,12 @@ category: Warnings
* <https://www.w3.org/TR/WCAG20-TECHS/H43.html>
### Selector
-```css_example
+``` css
th:not([scope]):not([id])
```
### Test
-```html_example
+``` html
<table>
<caption>Need for a [scope] or [id]</caption>
<thead>
@@ -1296,7 +1296,7 @@ Believe me, this still have to be tested.
* <https://www.la-grange.net/2015/03/11/visible>
### Selector
-```css_example
+``` css
img[src*="1px.gif"]:not([role="presentation"]),
img[src*="1x1.gif"]:not([role="presentation"]),
img[src*="clear.gif"]:not([role="presentation"]),
@@ -1307,7 +1307,7 @@ img[src*="pixel-1x1-clear.gif"]:not([role="presentation"])
```
### Test
-```html_example
+``` html
<img src="static/spacer.gif" alt="Spacer.gif" width="100" height="100"/><span>†</span>
```
*/
@@ -1333,7 +1333,7 @@ category: Warnings
Don't laugh, shit happens.
### Selector
-```css_example
+``` css
[id*="NaN"],
[id*="null"],
[class*="NaN"],
@@ -1343,7 +1343,7 @@ Don't laugh, shit happens.
```
### Test
-```html_example
+``` html
<p class="undefined">Oups, something went wrong.</p>
```
*/
@@ -1383,12 +1383,12 @@ The only exception shall be bookmarklets.
* <https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165>
### Selector
-```css_example
+``` css
a[href^="javascript"]:not([role="button"])
```
### Test
-```html_example
+``` html
<a href="javascript:(function(){a11ycss=document.createElement('LINK');a11ycss.href='https://rawgit.com/ffoodd/a11y.css/master/css/a11y-en.css';a11ycss.rel='stylesheet';a11ycss.media='all';document.body.appendChild(a11ycss);})();">Please use my bookmarklet ;)</a>
```
*/
@@ -1412,12 +1412,12 @@ Should probably be a `<button>` or at least a `[role="button"]`, don't you think
* <https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165>
### Selector
-```css_example
+``` css
a[href="#"]:not([role="button"])
```
### Test
-```html_example
+``` html
<a href="#">Oh boy, I don't mean anything</a>
```
*/
@@ -1443,12 +1443,12 @@ And no, JS shouldn't manipulate styles: it's better to play with classes, for ex
* <https://www.w3.org/TR/WCAG20/#content-structure-separation-sequence>
### Selector
-```css_example
+``` css
[style]
```
### Test
-```html_example
+``` html
<div style="color: red;">I'm red. I really feel dirty.</div>
```
*/
@@ -1480,14 +1480,14 @@ This is not actually an accessibility related issue, but everything helping user
* <https://twitter.com/KittyGiraudel/status/801475801397030912>
### Selector
-```css_example
+``` css
[target$="blank"]:not([rel]),
[target$="blank"]:not([rel*="noopener"]),
[target$="blank"]:not([rel*="noreferrer"])
```
### Test
-```html_example
+``` html
<a href="/" target="_blank">I feel vulnerable…</a>
```
*/
@@ -1518,12 +1518,12 @@ Though `[aria-level]` is not required by ARIA specification, it's actually bette
* <https://www.w3.org/TR/WCAG-TECHS/H42.html>
### Selector
-```css_example
+``` css
[role="heading"]:not([aria-level])
```
### Test
-```html_example
+``` html
<strong role="heading">Heading with undefined level</strong>
```
*/
@@ -1554,12 +1554,12 @@ Although implicitly labelling form controls is accepted, it's probably better to
* <https://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic>
### Selector
-```css_example
+``` css
label:not([for])
```
### Test
-```html_example
+``` html
<label>Guess what?</label>
```
*/
@@ -1586,7 +1586,7 @@ This also requires to check any in-page language change (marked up with `[lang]`
* <https://w3c.github.io/html/dom.html#the-dir-attribute>
### Selector
-```css_example
+``` css
[lang="ar"]:not([dir="rtl"]),
[lang="he"]:not([dir="rtl"]),
[lang="ar"] [lang]:not([dir="ltr"]),
@@ -1595,7 +1595,7 @@ This also requires to check any in-page language change (marked up with `[lang]`
```
### Test
-```html_example
+``` html
<p dir="rtl" lang="en">Well, I'm kinda disoriented…</p>
```
*/
diff --git a/sass/themes/_webextension.scss b/sass/themes/_webextension.scss
index c30383dc..c03ee861 100644
--- a/sass/themes/_webextension.scss
+++ b/sass/themes/_webextension.scss
@@ -51,7 +51,7 @@ name: check-alt-1
category: WebExtension
---
-```html_example
+``` html
<img src="static/checkalts/1.jpg" /><span>†</span>
```
*/
@@ -64,7 +64,7 @@ name: check-alt-2
category: WebExtension
---
-```html_example
+``` html
<img alt="A typewriter" title="Last day of August" src="static/checkalts/2.jpg" /><span>†</span>
```
*/
@@ -77,7 +77,7 @@ name: check-alt-3
category: WebExtension
---
-```html_example
+``` html
<img alt="" src="static/checkalts/3.jpg" /><span>†</span>
```
*/
@@ -90,7 +90,7 @@ name: check-alt-4
category: WebExtension
---
-```html_example
+``` html
<img src="static/checkalts/4.jpg" alt="Sunset" /><span>†</span>
```
*/
@@ -104,12 +104,12 @@ category: WebExtension
---
### Selector
-```css_example
+``` css
[lang]
```
### Test
-```html_example
+``` html
<p>Just testing languages. <span lang="fr">Voilà</span>.</p>
```
*/
@@ -123,12 +123,12 @@ category: WebExtension
---
### Selector
-```css_example
+``` css
[hreflang]
```
### Test
-```html_example
+``` html
<p>Here comes a simple to <a href="https://www.ffoodd.fr" hreflang="fr">my very own website</a>.</p>
```
*/
@@ -174,12 +174,12 @@ category: Advices
* 