From 8e514a00ce6208e1d7de7d9545d75f2bf2848bce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Mon, 21 Feb 2022 16:55:24 +0100 Subject: [PATCH] docs(code blocks): improve contents and styles --- a11y.css.js | 12 +-- docs/advices.html | 108 +++++++++++----------- docs/docs.html | 140 ++++++++++++++-------------- docs/errors.html | 163 +++++++++++++++++---------------- docs/index.html | 4 +- docs/obsoletes.html | 8 +- docs/static/docs.css | 21 ++--- docs/warnings.html | 138 ++++++++++++++-------------- docs/webextension.html | 16 ++-- sass/themes/_advice.scss | 48 +++++----- sass/themes/_error.scss | 76 +++++++-------- sass/themes/_obsolete.scss | 4 +- sass/themes/_warning.scss | 68 +++++++------- sass/themes/_webextension.scss | 4 +- sass/utils/_functions.scss | 16 ++-- sass/utils/_mixins.scss | 50 +++++----- sass/utils/_placeholders.scss | 8 +- sass/utils/_variables.scss | 10 +- site/assets/css/docs.css | 21 ++--- site/index.md | 2 +- 20 files changed, 454 insertions(+), 463 deletions(-) diff --git a/a11y.css.js b/a11y.css.js index 2d13a0c8..930bd858 100644 --- a/a11y.css.js +++ b/a11y.css.js @@ -4,7 +4,7 @@ const showdown = require('showdown') const fm = require('front-matter') const prism = require('prismjs') const loadLanguages = require('prismjs/components/'); -loadLanguages(['scss']); +loadLanguages(['scss', 'css-extras']); const postcss = require('postcss') const atImport = require('postcss-import') const uglify = require('uglify-es') @@ -138,14 +138,14 @@ const parseSassComment = comment => { htmlContent = String(htmlContent).replace(/(<)+/g, '<') htmlContent = htmlContent.replace(/(>)+/g, '>') let processedHTML = prism.highlight(htmlContent, prism.languages.html, 'html') - processedContent = processedContent.replace(markupRegex, `
${htmlContent}
${processedHTML}
`) + processedContent = processedContent.replace(markupRegex, `
${htmlContent}
${processedHTML}
`) // CSS code blocks const stylesRegex = /((
)(.[\s\S]+?)(\/code><\/pre>))/gm
   const cssRegex = /((?<=)(.[\s\S]+?)(?=<\/code>))/gm
   let cssContent = processedContent.match(cssRegex)
-  let processedCSS = prism.highlight(String(cssContent), prism.languages.css, 'css')
-  processedContent = processedContent.replace(stylesRegex, `
${processedCSS}
`)
+  let processedCSS = prism.highlight(String(cssContent), prism.languages.css, 'css-extras')
+  processedContent = processedContent.replace(stylesRegex, `
${processedCSS}
`)
 
   // SCSS code blocks
   const scssBlockRegex = /((
)(.[\s\S]+?)(\/code><\/pre>))/gm
@@ -153,14 +153,14 @@ const parseSassComment = comment => {
   let scssContent = processedContent.match(scssRegex)
   scssContent = String(scssContent).replace(/(&)+/g, '&')
   let processedSCSS = prism.highlight(String(scssContent), prism.languages.scss, 'scss')
-  processedContent = processedContent.replace(scssBlockRegex, `
${processedSCSS}
`)
+  processedContent = processedContent.replace(scssBlockRegex, `
${processedSCSS}
`)
 
   // Sass code blocks
   const sassBlockRegex = /((
)(.[\s\S]+?)(\/code><\/pre>))/gm
   const sassRegex = /((?<=)(.[\s\S]+?)(?=<\/code>))/gm
   const sassContent = processedContent.match(sassRegex)
   let processedSASS = prism.highlight(String(sassContent), prism.languages.scss, 'scss')
-  processedContent = processedContent.replace(sassBlockRegex, `
${processedSASS}
`)
+  processedContent = processedContent.replace(sassBlockRegex, `
${processedSASS}
`)
 
   return {
     attributes: content.attributes,
diff --git a/docs/advices.html b/docs/advices.html
index e98b365a..0888f38c 100644
--- a/docs/advices.html
+++ b/docs/advices.html
@@ -285,15 +285,19 @@ 
References

 
  • https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fjsbin.com%2Ftozopid%2Fquiet
    • 
 
 
    Selector
    
-
    select[required]:not([multiple])[size="1"],
-select[required]:not([multiple]):not([size])
-
    
+
    select[required]:not([multiple])[size="1"],
+select[required]:not([multiple]):not([size])
+
    
 
    Test
    
-
    <select name="slices" required>
-  <option value="1">Cheese</option>
-  <option value="2">Salami</option>
-</select><span>†</span>
-
    
+
    †
+
    <select name="slices" required>
+  <option value="1">Cheese</option>
+  <option value="2">Salami</option>
+</select><span>†</span>
+
    
         
       
         
    
@@ -301,12 +305,12 @@ 
    Empty [class] attribute
    
           
    Description
    
 
    [class] shouldn't be present if empty. Something to improve, right?
    
 
    Selector
    
-
    [class=""],
+
    [class=""],
 [class=" "]
 
    
 
    Test
    
 
    Why is there a class here?
-
    <b class="">Why is there a class here?</b>
+
    <b class="">Why is there a class here?</b>
 
    
         
    
       
@@ -315,12 +319,12 @@ 
    Empty [id] attribute
    
           
    Description
    
 
    [id] shouldn't be present if empty. You'll thank me later.
    
 
    Selector
    
-
    [id=""],
+
    [id=""],
 [id=" "]
 
    
 
    Test
    
 
    Wait. Why is my ID empty?
-
    <i id="">Wait. Why is my ID empty?</i>
+
    <i id="">Wait. Why is my ID empty?</i>
 
    
         
       
@@ -334,12 +338,12 @@ 
    References
    
 
  • https://www.w3.org/TR/html52/grouping-content.html#elementdef-main
    • 
 
 
    Selector
    
-
    main ~ main:not([hidden])
+
    main ~ main:not([hidden])
 
    
 
    Test
    
 
    I'm the main content!
    
 
    No, It's me!
    
-
    <main>I'm the main content!</main>
+
    <main>I'm the main content!</main>
 <main>No, It's me!</main>
 
    
         
@@ -353,7 +357,7 @@ 
    References
    
 
  • https://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-figure-element
    • 
 
 
    Selector
    
-
    figcaption:not(:first-of-type)
+
    figcaption:not(:first-of-type)
 
    
 
    Test
    
 
    
@@ -361,7 +365,7 @@ 
    Test
    
   Needed
   
    I'm the caption too.
    
 
    
-
    <figure role="group">
+
    <figure role="group">
   <figcaption>I'm the caption.</figcaption>
   <img src="/static/ffoodd.png" alt="Needed" width="144" height="144" />
   <figcaption>I'm the caption too.</figcaption>
@@ -378,7 +382,7 @@ 
    References
    
 
  • https://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-figure-element
    • 
 
 
    Selector
    
-
    figcaption:not(:first-child):not(:last-child)
+
    figcaption:not(:first-child):not(:last-child)
 
    
 
    Test
    
 
    
@@ -386,7 +390,7 @@ 
    Test
    
   
    I'm the caption.
    
   
    I'm something else. Oh, wait.
    
 
    
-
    <figure role="group">
+
    <figure role="group">
   <img src="/static/ffoodd.png" alt="Needed" width="144" height="144" />
   <figcaption>I'm the caption.</figcaption>
   <p>I'm something else. Oh, wait.</p>
@@ -400,11 +404,11 @@ 
    Description
    
 
    A <href="mailto:"> should contain a valid email.
 Otherwise you may annoy your users.
    
 
    Selector
    
-
    [href^="mailto"]
+
    [href^="mailto"]
 
    
 
    Test
    
 
    <a href="mailto:myself">Surpri-ise!</a>
+
    <a href="mailto:myself">Surpri-ise!</a>
 
    
         
       
@@ -414,11 +418,11 @@ 
    Description
    
 
    A <href="tel:"> should contain a valid phone number.
 Otherwise you may make your users to call anubody.
    
 
    Selector
    
-
    [href^="tel"]
+
    [href^="tel"]
 
    
 
    Test
    
 
    <a href="tel:012345678">Who will I call?</a>
+
    <a href="tel:012345678">Who will I call?</a>
 
    
         
       
@@ -431,11 +435,11 @@ 
    References
    
 
  • https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L174
    • 
 
 
    Selector
    
-
    a[role="button"]
+
    a[role="button"]
 
    
 
    Test
    
 
    <a href="/" role="button">Submit</a>
+
    <a href="/" role="button">Submit</a>
 
    
         
       
@@ -454,11 +458,11 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG-TECHS/F22.html
    • 
 
 
    Selector
    
-
    [target$="blank"]
+
    [target$="blank"]
 
    
 
    Test
    
 
    <a href="/" target="_blank" rel="noopener noreferrer">New tab</a>
+
    <a href="/" target="_blank" rel="noopener noreferrer">New tab</a>
 
    
         
       
@@ -474,7 +478,7 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG-TECHS/H33.html
    • 
 
 
    Selector
    
-
    [download],
+
    [download],
 [href$=".pdf"]:not(link),
 [href$=".doc"]:not(link),
 [href$=".png"]:not(link),
@@ -496,7 +500,7 @@ 
    Selector
    
 
    
 
    Test
    
 
    <a href="/file.png">Wanna file?</a>
+
    <a href="/file.png">Wanna file?</a>
 
    
         
       
@@ -510,7 +514,7 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG20/#navigation-mechanisms-skip
    • 
 
 
    Selector
    
-
    [role="main"] ~ [role="main"],
+
    [role="main"] ~ [role="main"],
 [role="search"] ~ [role="search"],
 [role="banner"] ~ [role="banner"],
 [role="contentinfo"] ~ [role="contentinfo"]
@@ -518,7 +522,7 @@ 
    Selector
    
 
    Test
    
 

    
 

    
-
    <main role="main"><br /></main>
+
    <main role="main"><br /></main>
 <div role="main"><br /></div>
 
    
         
@@ -533,7 +537,7 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG20/#navigation-mechanisms-skip
    • 
 
 
    Selector
    
-
    [id*="search"]:not([role="search"]),
+
    [id*="search"]:not([role="search"]),
 [class*="search"]:not([role="search"])
 
    
 
    Test
    
@@ -541,7 +545,7 @@ 
    Test
    
   
   †
 
-
    <form class="search" action="">
+
    <form class="search" action="">
   <label for="field">Search</label>
   <input type="search" id="field" /><span>†</span>
 </form>
@@ -558,7 +562,7 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG20/#minimize-error-cues
    • 
 
 
    Selector
    
-
    [required],
+
    [required],
 [aria-required]
 
    
 
    Test
    
@@ -566,7 +570,7 @@ 
    Test
    
   
   †
 
-
    <form action="">
+
    <form action="">
   <label for="field">Fied</label>
   <textarea id="field" required></textarea><span>†</span>
 </form>
@@ -583,12 +587,12 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG20/#ensure-compat-rsv
    • 
 
 
    Selector
    
-
    [hidden]:not(:empty),
+
    [hidden]:not(:empty),
 [aria-hidden="true"]:not(:empty)
 
    
 
    Test
    
 
    <a href="/" aria-hidden="true">Important thing!</a>
+
    <a href="/" aria-hidden="true">Important thing!</a>
 
    
         
       
@@ -597,11 +601,11 @@ 
    Placeholder can't replace a label
    
           
    Description
    
 
    A [placeholder] is not a label, is it?
    
 
    Selector
    
-
    [placeholder]:not([title]):not([aria-label]):not([aria-labelledby])
+
    [placeholder]:not([title]):not([aria-label]):not([aria-labelledby])
 
    
 
    Test
    
 
    †
-
    <input type="text" placeholder="Look Ma, no label!" id="test"><span>†</span>
+
    <input type="text" placeholder="Look Ma, no label!" id="test"><span>†</span>
 
    
         
       
@@ -618,12 +622,12 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG20/#media-equiv-text-doc
    • 
 
 
    Selector
    
-
    video,
+
    video,
 audio
 
    
 
    Test
    
 
    †
-
    <video src="/" controls></video><span>†</span>
+
    <video src="/" controls></video><span>†</span>
 
    
         
       
@@ -639,13 +643,13 @@ 
    References
    
 
  • https://www.w3.org/TR/html51/semantics.html#alt
    • 
 
 
    Selector
    
-
    img[alt][title],
+
    img[alt][title],
 area[alt][title],
 svg[aria-label][title]
 
    
 
    Test
    
 
    I'm an alternative text!†
-
    <img src="/static/ffoodd.png" alt="I'm an alternative text!" title="I'm a title!" height="144" width="144"><span>†</span>
+
    <img src="/static/ffoodd.png" alt="I'm an alternative text!" title="I'm a title!" height="144" width="144"><span>†</span>
 
    
         
       
@@ -654,12 +658,12 @@ 
    Date and time should be understandable
    
           
    Description
    
 
    A <time> or [datetime] content should be an understandable and well formated date.
    
 
    Selector
    
-
    time,
+
    time,
 [datetime]
 
    
 
    Test
    
 
    
-
    <time>Yesterday</time>
+
    <time>Yesterday</time>
 
    
         
       
@@ -674,7 +678,7 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG-TECHS/H63.html
    • 
 
 
    Selector
    
-
    th[scope]
+
    th[scope]
 
    
 
    Test
    
 
    
@@ -696,7 +700,7 @@ 
    Test
    
     
   
 
    
-
    <table>
+
    <table>
   <caption>I'm a caption</caption>
   <thead>
     <tr>
@@ -728,7 +732,7 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG20/#content-structure-separation-sequence
    • 
 
 
    Selector
    
-
    table[role="presentation"]
+
    table[role="presentation"]
 
    
 
    Test
    
 
    
@@ -741,7 +745,7 @@ 
    Test
    
     
    Second cell
   
    
 
    
-
    <table role="presentation">
+
    <table role="presentation">
   <tr>
     <td>First cell</td>
     <td>Second cell</td>
@@ -765,11 +769,11 @@ 
    References
    
 
  • https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165
    • 
 
 
    Selector
    
-
    a:not([href])
+
    a:not([href])
 
    
 
    Test
    
 
    <a>Who am I? Where do I link?</a>
+
    <a>Who am I? Where do I link?</a>
 
    
         
       
@@ -785,12 +789,12 @@ 
    References
    
 
  • https://checklists.opquast.com/oqs-v3/criteria/les-echanges-de-donnees-sensibles-sont-securises-et-signales-comme-tels
    • 
 
 
    Selector
    
-
    [src^="http:"],
+
    [src^="http:"],
 [href^="http:"]
 
    
 
    Test
    
 
    <a href="http://www.ffoodd.fr/">My target's protocol isn't secured</a>
+
    <a href="http://www.ffoodd.fr/">My target's protocol isn't secured</a>
 
    
         
       
diff --git a/docs/docs.html b/docs/docs.html
index 18352609..f6b71c1f 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -480,7 +480,7 @@ 
    Functions
    
                 
    Get translations
    
                 
    Retrieve message from translation map.
    
 
    Source
    
-
    @function message($theme, $key) {
+
    @function message($theme, $key) {
   $message-key: $theme + ':' + $key;
 
   @if not map-has-key($messages, $message-key) {
@@ -528,7 +528,7 @@ 
    Used by 
    
                 
    Get theme configuration
    
                 
    Helper function to easily access a theme configuration.
    
 
    Source
    
-
    @function theme-conf($theme, $key) {
+
    @function theme-conf($theme, $key) {
   @return map-get(map-get($themes, $theme), $key);
 }
 
    
@@ -559,12 +559,12 @@ 
    Parameters
    
 
 
    Example
    
 
    Get color from error theme.
    
-
    .selector {
+
    .selector {
   color: theme-conf('error', 'color');
 }
 
    
-
    .selector {
-  color: #911;
+
    .selector {
+  color: #911;
 }
 
    
 
    Used by
    
@@ -581,7 +581,7 @@ 
    Used by
    
                 
    Check level to display
    
                 
    Test whether $level is high enough to be displayed by comparing its index to $minimum-level's.
    
 
    Source
    
-
    @function is-level-enough($level) {
+
    @function is-level-enough($level) {
   $levels: map-keys($themes);
   @return index($levels, $level) &lt;= index($levels, $minimum-level);
 }
@@ -618,7 +618,7 @@ 
    Used by
    
                 
    Escape attr()
    
                 
    Ensures CSS attr() function will render the expected value, instead of being output as a string.
    
 
    Source
    
-
    @function replace-attr($message) {
+
    @function replace-attr($message) {
   $has-attr: str-index($message, 'attr(');
   $first-paren: str-index($message, ')');
 
@@ -626,8 +626,8 @@ 
    Source
    
     @return $message;
   }
 
-  $first-chunk: str-slice($message, 1, $has-attr - 1);
-  $last-chunk: str-slice($message, $first-paren + 1);
+  $first-chunk: str-slice($message, 1, $has-attr - 1);
+  $last-chunk: str-slice($message, $first-paren + 1);
 
   $result: ();
 
@@ -664,11 +664,11 @@ 
    Parameters
    
 
 
 
    Example
    
-
    .selector {
+
    .selector {
   content: replace-attr("ARIA role attr(role) should be unique, but this one is the second!");
 }
 
    
-
    .selector {
+
    .selector {
   content: "ARIA role " attr(role) "should be unique, but this one is the second!";
 }
 
    
@@ -746,12 +746,12 @@ 
    Set minimum level
    
 
  • advice for everything.
    • 
 
 
    Source
    
-
    @mixin set-minimum-level($level) {
+
    @mixin set-minimum-level($level) {
   $level: to-lower-case($level);
   $levels: map-keys($themes);
 
   @if not index($levels, $level) {
-    $default-level: nth($levels, -1);
+    $default-level: nth($levels, -1);
     $level: $default-level;
 
     @warn 'Level `#​{$level}` does not exist. '
@@ -782,7 +782,7 @@ 
    Parameters
    
 
 
 
    Example
    
-
    @include set-minimum-level('error');
+
    @include set-minimum-level('error');
 
    
               
             
@@ -792,7 +792,7 @@ 
    Example
    
                 
    Get a message
    
                 
    Get a message from the translation map based on the defined language and output it in the content property.
    
 
    Source
    
-
    @mixin message($theme, $key) {
+
    @mixin message($theme, $key) {
   content: replace-attr(quote("#​{message($theme, $key)}")) !important;
 }
 
    
@@ -822,11 +822,11 @@ 
    Parameters
    
 
 
 
    Example
    
-
    .selector {
+
    .selector {
   @include message('advice', 'nav');
 }
 
    
-
    .selector {
+
    .selector {
   content: 'Did you know the &lt;nav&gt; tag is exclusively restricted to primary and secondary navigation area?';
 }
 
    
@@ -839,14 +839,14 @@ 
    Extends selector with void tags
    
                 
    Extends selector with self-closing tags & replaced elements.
 Notice the & before the selector, and $self-closing: true argument.
    
 
    Source
    
-
    @mixin void-tags {
+
    @mixin void-tags {
   @at-root #​{selector-unify($void-tags, &)} {
     @content;
   }
 }
 
    
 
    Example
    
-
    .selector {
+
    .selector {
   @include advice('nav')
 
   @include void-tags {
@@ -854,7 +854,7 @@ 
    Example
    
   }
 }
 
    
-
    area .selector, base .selector, br .selector, col .selector, command .selector, embed .selector, hr .selector, img .selector, input .selector, keygen .selector, link .selector, meta .selector, param .selector, source .selector, track .selector, wbr .selector, textarea .selector, select .selector, svg .selector, audio .selector, video .selector, iframe .selector {
+
    area .selector, base .selector, br .selector, col .selector, command .selector, embed .selector, hr .selector, img .selector, input .selector, keygen .selector, link .selector, meta .selector, param .selector, source .selector, track .selector, wbr .selector, textarea .selector, select .selector, svg .selector, audio .selector, video .selector, iframe .selector {
   content: "Did you know the &lt;nav&gt; tag is exclusively restricted to primary and secondary navigation area?";
 }
 
    
@@ -866,7 +866,7 @@ 
    Example
    
                 
    Set a message
    
                 
    Theme mixin including everything needed for the $theme, and checking test is not disabled.
    
 
    Source
    
-
    @mixin item($theme, $key, $self-closing: false, $head: false) {
+
    @mixin item($theme, $key, $self-closing: false, $head: false) {
   $message-key: $theme + ':' + $key;
   $is-disabled: index($disabled-tests, $message-key);
 
@@ -920,7 +920,7 @@ 
    Parameters
    
                 
    Define an error
    
                 
    Level related mixins use item() mixin with a hardcoded theme name.
    
 
    Source
    
-
    @mixin error($key, $self-closing: false, $head: false) {
+
    @mixin error($key, $self-closing: false, $head: false) {
   @include item('error', $key, $self-closing, $head);
 }
 
    
@@ -956,7 +956,7 @@ 
    Parameters
    
 
 
 
    Example
    
-
    .selector {
+
    .selector {
   @include error("no-src");
 }
 
    
@@ -968,7 +968,7 @@ 
    Example
    
                 
    Define a warning
    
                 
    Level related mixins use item() mixin with a hardcoded theme name.
    
 
    Source
    
-
    @mixin warning($key, $self-closing: false, $head: false) {
+
    @mixin warning($key, $self-closing: false, $head: false) {
   @include item('warning', $key, $self-closing, $head);
 }
 
    
@@ -1004,7 +1004,7 @@ 
    Parameters
    
 
 
 
    Example
    
-
    .selector {
+
    .selector {
   @include warning("abbr");
 }
 
    
@@ -1016,7 +1016,7 @@ 
    Example
    
                 
    Define an obsolete thing
    
                 
    Level related mixins use item() mixin with a hardcoded theme name.
    
 
    Source
    
-
    @mixin obsolete($key, $self-closing: false, $head: false) {
+
    @mixin obsolete($key, $self-closing: false, $head: false) {
   @include item('obsolete', $key, $self-closing, $head);
 }
 
    
@@ -1052,7 +1052,7 @@ 
    Parameters
    
 
 
 
    Example
    
-
    .selector {
+
    .selector {
   @include obsolete("any");
 }
 
    
@@ -1064,7 +1064,7 @@ 
    Example
    
                 
    Define an advice
    
                 
    Level related mixins use item() mixin with a hardcoded theme name.
    
 
    Source
    
-
    @mixin advice($key, $self-closing: false, $head: false) {
+
    @mixin advice($key, $self-closing: false, $head: false) {
   @include item('advice', $key, $self-closing, $head);
 }
 
    
@@ -1100,7 +1100,7 @@ 
    Parameters
    
 
 
 
    Example
    
-
    .selector {
+
    .selector {
   @include advice("nav");
 }
 
    
@@ -1113,7 +1113,7 @@ 
    Disable test(s)
    
                 
    Disable specific tests. Each test key should match an entry in locales $messages map,
 made of a level and a test identifier separated by a double-colon, e.g. error:tab-order.
    
 
    Source
    
-
    @mixin disable-tests($keys...) {
+
    @mixin disable-tests($keys...) {
   @each $key in $keys {
     $disabled-tests: append($disabled-tests, $key) !global;
   }
@@ -1139,7 +1139,7 @@ 
    Parameters
    
 
 
 
    Example
    
-
    @include disable-tests('error:tab-order', 'advice:empty-class');
+
    @include disable-tests('error:tab-order', 'advice:empty-class');
 
    
               
             
@@ -1149,7 +1149,7 @@ 
    Example
    
                 
    Display messages in <head>
    
                 
    Display messages on <head>'s tags.
    
 
    Source
    
-
    @mixin a11y-head($self-closing: false) {
+
    @mixin a11y-head($self-closing: false) {
   // Because it's in the &lt;head&gt;
   @extend %a11y-head;
 
@@ -1180,7 +1180,7 @@ 
    Parameters
    
 
 
 
    Example
    
-
    .selector {
+
    .selector {
   @include a11y-head();
 }
 
    
@@ -1192,7 +1192,7 @@ 
    Example
    
                 
    Display counters ::after <body>
    
                 
    Defines body::after’s content and background-image depending on $minimum-level.
    
 
    Source
    
-
    @mixin base-content($minimum-level) {
+
    @mixin base-content($minimum-level) {
   $background: ();
   $content: ();
 
@@ -1202,17 +1202,17 @@ 
    Source
    
     @if is-level-enough($theme) {
       $background-offset: theme-conf($theme, 'background-offset');
       $background-theme:
-        transparent $background-offset,
+        transparent $background-offset,
         theme-conf($theme, 'color') $background-offset,
-        theme-conf($theme, 'color') ($background-offset + 0.2em),
-        transparent ($background-offset + 0.2em);
+        theme-conf($theme, 'color') ($background-offset + 0.2em),
+        transparent ($background-offset + 0.2em);
       $background: append($background, $background-theme, 'comma');
       $content-theme: quote(message('ui', $theme)) ': ' #​{counter(unquote($theme))} '\A ';
       $content: append($content, $content-theme);
     }
   }
 
-  background-image: linear-gradient(to bottom, transparent, $background, transparent 100%);
+  background-image: linear-gradient(to bottom, transparent, $background, transparent 100%);
   content: $content;
 }
 
    
@@ -1236,7 +1236,7 @@ 
    Parameters
    
 
 
 
    Example
    
-
    @include base-content($minimum-level);
+
    @include base-content($minimum-level);
 
    
               
             
@@ -1246,7 +1246,7 @@ 
    Example
    
                 
    Display a message
    
                 
    Main mixin to display a message.
    
 
    Source
    
-
    @mixin a11y($theme, $key, $self-closing: false, $head: false) {
+
    @mixin a11y($theme, $key, $self-closing: false, $head: false) {
   @extend %a11y-#​{$theme};
 
   $base-selector: '&::after';
@@ -1305,7 +1305,7 @@ 
    Parameters
    
 
 
 
    Example
    
-
    @include a11y($theme, $key, $self-closing, $head);
+
    @include a11y($theme, $key, $self-closing, $head);
 
    
               
             
@@ -1370,16 +1370,16 @@ 
    Placeholders
    
                 
    Messages common styles
    
                 
    Common styles for messages, mostly resetting text styles and preventing layout quirks.
    
 
    Source
    
-
    %a11y-before {
-  border-radius: 0 !important;
-  color: #fff !important;
+
    %a11y-before {
+  border-radius: 0 !important;
+  color: #fff !important;
   contain: content;
   display: block !important;
-  font: 700 normal 14px/1.5 sans-serif !important;
+  font: 700 normal 14px/1.5 sans-serif !important;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
   height: auto !important;
-  max-width: 100vw !important;
-  padding: 4px !important;
+  max-width: 100vw !important;
+  padding: 4px !important;
   pointer-events: none !important;
   position: absolute !important;
   text-decoration: none !important;
@@ -1402,11 +1402,11 @@ 
    Used by
    
                 
    Level-specific messages styles
    
                 
    Level-specific styles for messages, incrementing counter and enforcing outline.
    
 
    Source
    
-
    @each $theme in map-keys($themes) {
+
    @each $theme in map-keys($themes) {
   %a11y-#​{$theme} {
     counter-increment: unquote($theme) !important;
-    outline: 4px solid theme-conf($theme, 'color') !important;
-    outline-offset: -4px !important;
+    outline: 4px solid theme-conf($theme, 'color') !important;
+    outline-offset: -4px !important;
   }
 }
 
    
@@ -1422,9 +1422,9 @@ 
    Used by
    
                 
    Cancel a message
    
                 
    Provides a way to cancel a message by resetting its core properties.
    
 
    Source
    
-
    %a11y-reset {
+
    %a11y-reset {
   counter-increment: none !important;
-  outline: 0 !important;
+  outline: 0 !important;
 
   &::after,
   & + ::before {
@@ -1449,7 +1449,7 @@ 
    Used by
    
                 
    Display <head> children
    
                 
    Displays elements in <head>, to allow their messages to appear.
    
 
    Source
    
-
    %a11y-head {
+
    %a11y-head {
   display: block !important;
 }
 
    
@@ -1520,26 +1520,26 @@ 
    Variables
    
                 
    Themes
    
                 
    This map holds configuration for all themes. Each theme has an icon, a color and a z-index, and a background offset.
    
 
    Source
    
-
    $themes: (
+
    $themes: (
   'error': (
-    'color': #d90b0b,
-    'index': 2147483647,
-    'background-offset': 1.4em
+    'color': #d90b0b,
+    'index': 2147483647,
+    'background-offset': 1.4em
   ),
   'warning': (
-    'color': #f50,
-    'index': 2147483646,
-    'background-offset': 2.9em
+    'color': #f50,
+    'index': 2147483646,
+    'background-offset': 2.9em
   ),
   'obsolete': (
-    'color': royalblue,
-    'index': 2147483645,
-    'background-offset': 4.4em
+    'color': royalblue,
+    'index': 2147483645,
+    'background-offset': 4.4em
   ),
   'advice': (
-    'color': green,
-    'index': 2147483644,
-    'background-offset': 5.9em
+    'color': green,
+    'index': 2147483644,
+    'background-offset': 5.9em
   ),
 );
 
    
@@ -1593,7 +1593,7 @@ 
    Used by
    
                 
    Disabled tests
    
                 
    Map of disabled tests, referred by their key.
    
 
    Source
    
-
    $disabled-tests: ();
+
    $disabled-tests: ();
 
    
 
    Used by
    
 
      
@@ -1607,7 +1607,7 @@ 
      Used by
      
                 
      Void tags
      
                 
      Every HTML tag that do not allow generated content through pseudo-elements.
      
 
      Source
      
-
      $void-tags: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr, textarea, select, svg, audio, video, iframe;
+
      $void-tags: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr, textarea, select, svg, audio, video, iframe;
 
      
 
      Used by
      
 
        
@@ -1626,7 +1626,7 @@ 
        References
        
                 
        File formats
        
                 
        File formats used in a few selectors.
        
 
        Source
        
-
        $formats: pdf, doc, png, jpg, gif, ics, mp3, mp4, mov, ogg, xls, txt, zip, rar, docx, webp, apng, svg, svgz;
+
        $formats: pdf, doc, png, jpg, gif, ics, mp3, mp4, mov, ogg, xls, txt, zip, rar, docx, webp, apng, svg, svgz;
 
        
 
        Used by
        
 
          
@@ -1641,7 +1641,7 @@ 
          Used by
          
                 
          Interactive elements
          
                 
          Tags used in some selectors.
          
 
          Source
          
-
          $interactive: 'a[href]', 'audio[controls]', 'video[controls]', 'button', 'details', 'embed', 'iframe', 'img[usemap]', 'label', 'select', 'textarea', 'input[type]:not([hidden])';
+
          $interactive: 'a[href]', 'audio[controls]', 'video[controls]', 'button', 'details', 'embed', 'iframe', 'img[usemap]', 'label', 'select', 'textarea', 'input[type]:not([hidden])';
 
          
 
          Used by
          
 
 
          Selector
          
-
          [id*=" "],
-[lang*=" "],
-map[name*=" "]
-
          
+
          [id*=" "],
+[lang*=" "],
+map[name*=" "]
+
          
 
          Test
          
-
          <p id="my id">This is my beautiful element with an ID</p>
-
          
+
          This is my beautiful element with an ID
          
+
          <p id="my id">This is my beautiful element with an ID</p>
+
          
         
       
         
        
 
        Selector
        
-
        [tabindex]:not([tabindex="0"]):not([tabindex^="-"])
-
        
+
        [tabindex]:not([tabindex="0"]):not([tabindex^="-"])
+
        
 
        Test
        
 
        
-
        <button tabindex="1" type="button">Positive tabindex is bad</button>
+
        <button tabindex="1" type="button">Positive tabindex is bad</button>
 
        
         
       
@@ -415,12 +416,12 @@ 
        References
        
 
      • https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165
        • 
 
      
 
      Selector
      
-
      a[href=""],
+
      a[href=""],
 a[href=" "]
 
      
 
      Test
      
 
      <a href=" ">Who am I? Where do I link?</a>
+
      <a href=" ">Who am I? Where do I link?</a>
 
      
         
       
@@ -440,14 +441,14 @@ 
      References
      
 
    • https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L193
      • 
 
    
 
    Selector
    
-
    a:empty[title=""],
+
    a:empty[title=""],
 a:empty[aria-label=""],
 a:empty[aria-labelledby=""],
 a:empty:not([title]):not([aria-label]):not([aria-labelledby])
 
    
 
    Test
    
 
    
-
    <a href="/" class="inbl w-20" id="empty-link_code"></a>
+
    <a href="/" class="inbl w-20" id="empty-link_code"></a>
 
    
         
       
@@ -467,7 +468,7 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG-TECHS/F65.html
    • 
 
 
    Selector
    
-
    img[alt=" "],
+
    img[alt=" "],
 area[alt=" "],
 input[type="image"][alt=" "],
 img:not([alt]),
@@ -476,7 +477,7 @@ 
    Selector
    
 
    
 
    Test
    
 
    †
-
    <img src="/static/ffoodd.png" width="144" height="144" /><span>†</span>
+
    <img src="/static/ffoodd.png" width="144" height="144" /><span>†</span>
 
    
         
       
@@ -494,7 +495,7 @@ 
    References
    
 
  • https://www.w3.org/TR/wai-aria/roles#textalternativecomputation
    • 
 
 
    Selector
    
-
    [role="img"]:not([aria-label]):not([aria-labelledby]),
+
    [role="img"]:not([aria-label]):not([aria-labelledby]),
 svg[role="img"]:not([aria-label]):not([aria-labelledby])
 
    
 
    Test
    
@@ -503,7 +504,7 @@ 
    Test
    
   
 †
-
    <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+
    <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"  />
@@ -521,7 +522,7 @@ 
    References
    
 
  • https://scottjehl.github.io/picturefill/
    • 
 
 
    Selector
    
-
    img:not([src]):not([srcset]),
+
    img:not([src]):not([srcset]),
 img[src=""],
 img[src=" "],
 img[src="#"],
@@ -542,7 +543,7 @@ 
    Selector
    
 
    
 
    Test
    
 
    Missing src
-
    <img alt="Missing src" width="144" height="144"/>
+
    <img alt="Missing src" width="144" height="144"/>
 
    
         
       
@@ -562,12 +563,12 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic
    • 
 
 
    Selector
    
-
    label[for=""],
+
    label[for=""],
 label[for=" "]
 
    
 
    Test
    
 
    
-
    <label for=" ">Guess what?</label>
+
    <label for=" ">Guess what?</label>
 
    
         
       
@@ -584,13 +585,13 @@ 
    References
    
 
  • 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]),
+
    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>
+
    <input type="text" /><span>†</span>
 
    
         
       
@@ -606,13 +607,13 @@ 
    References
    
 
  • 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="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>
+
    <input type="submit" /><span>†</span>
 
    
         
       
@@ -629,11 +630,11 @@ 
    References
    
 
  • https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L193
    • 
 
 
    Selector
    
-
    button:empty:not([aria-label]):not([aria-labelledby]):not([title])
+
    button:empty:not([aria-label]):not([aria-labelledby]):not([title])
 
    
 
    Test
    
 
    
-
    <button type="button"></button>
+
    <button type="button"></button>
 
    
         
       
@@ -650,13 +651,13 @@ 
    References
    
 
  • https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L193
    • 
 
 
    Selector
    
-
    button[title=""],
+
    button[title=""],
 button[aria-label=""],
 button[aria-labelledby=""]
 
    
 
    Test
    
 
    
-
    <button title="" type="button">Test</button>
+
    <button title="" type="button">Test</button>
 
    
         
       
@@ -672,11 +673,11 @@ 
    References
    
 
  • https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L189
    • 
 
 
    Selector
    
-
    button:not([type]):not([form]):not([formaction]):not([formtarget])
+
    button:not([type]):not([form]):not([formaction]):not([formtarget])
 
    
 
    Test
    
 
    
-
    <button>I just don't know what todo with myself</button>
+
    <button>I just don't know what todo with myself</button>
 
    
         
       
@@ -696,7 +697,7 @@ 
    References
    
 
  • https://www.w3.org/TR/html5/forms.html#the-button-element
    • 
 
 
    Selector
    
-
    button[type="reset"][formmethod],
+
    button[type="reset"][formmethod],
 button[type="reset"][formaction],
 button[type="reset"][formtarget],
 button[type="reset"][formenctype],
@@ -709,7 +710,7 @@ 
    Selector
    
 
    
 
    Test
    
 
    
-
    <button type="button" formmethod="GET">I have a method!</button>
+
    <button type="button" formmethod="GET">I have a method!</button>
 
    
         
       
@@ -723,11 +724,11 @@ 
    References
    
 
  • https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L122
    • 
 
 
    Selector
    
-
    button[class*="disabled"]:not([disabled]):not([readonly])
+
    button[class*="disabled"]:not([disabled]):not([readonly])
 
    
 
    Test
    
 
    
-
    <button class="is-disabled" type="button">To be or not to be (disabled)?</button>
+
    <button class="is-disabled" type="button">To be or not to be (disabled)?</button>
 
    
         
       
@@ -741,14 +742,14 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG20/#minimize-error-suggestions
    • 
 
 
    Selector
    
-
    input:not([type]),
+
    input:not([type]),
 input[type=" "],
 input[type=""]
 
    
 
    Test
    
 
    
 †
-
    <label for="No-type">No type</label>
+
    <label for="No-type">No type</label>
 <input value="Whatever you want" id="No-type"/><span>†</span>
 
    
         
@@ -764,7 +765,7 @@ 
    References
    
 
  • https://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/H85
    • 
 
 
    Selector
    
-
    optgroup:not([label])
+
    optgroup:not([label])
 
    
 
    Test
    
 
    
@@ -780,7 +781,7 @@ 
    Test
    
      
    
 
    
-
    <form action="/">
+
    <form action="/">
     <label for="optgroup-test">Oh, hey</label>
     <select id="optgroup-test">
       <optgroup label="I'm a group">
@@ -807,13 +808,13 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG-TECHS/H64.html
    • 
 
 
    Selector
    
-
    iframe:not([title]),
+
    iframe:not([title]),
 iframe[title=" "],
 iframe[title=""]
 
    
 
    Test
    
 
    †
-
    <iframe src="/static/no-title.html" sandbox="allow-same-origin"></iframe><span>†</span>
+
    <iframe src="/static/no-title.html" sandbox="allow-same-origin"></iframe><span>†</span>
 
    
         
       
@@ -826,7 +827,7 @@ 
    References
    
 
  • https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L214
    • 
 
 
    Selector
    
-
    form:not([action]),
+
    form:not([action]),
 form[action=" "],
 form[action=""]
 
    
@@ -837,7 +838,7 @@ 
    Test
    
 
   
 
-
    <form>
+
    <form>
   <label for="input">Guess what do we do with your datas?</label>
   <input id="input" type="text" />
 
@@ -866,13 +867,13 @@ 
    References
    
 
  • https://codepen.io/matuzo/project/editor/ZyrVee
    • 
 
 
    Selector
    
-
    html:not([lang]),
+
    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>
+
    <iframe title="No language defined a11y.css test-case" src="/static/no-lang.html" sandbox="allow-same-origin"></iframe>
 
    
         
       
@@ -899,7 +900,7 @@ 
    References
    
 
  • https://www.w3.org/Translations/WCAG20-fr/#content-structure-separation-programmatic
    • 
 
 
    Selector
    
-
    table[role="presentation"] th,
+
    table[role="presentation"] th,
 table[role="presentation"] thead,
 table[role="presentation"] tfoot,
 table[role="presentation"] caption,
@@ -917,7 +918,7 @@ 
    Test
    
     
   
 
-
    <table role="presentation">
+
    <table role="presentation">
   <caption>I do not mean anything!</caption>
   <tbody>
     <tr>
@@ -941,12 +942,12 @@ 
    References
    
 
  • 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)[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>
+
    <p width="20">Damned! I feel sooo strait :(</p>
 
    
         
       
@@ -961,7 +962,7 @@ 
    References
    
 
  • https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
    • 
 
 
    Selector
    
-
    [onafterprint], [onbeforeprint], [onbeforeunload],
+
    [onafterprint], [onbeforeprint], [onbeforeunload],
 [onerror], [onhaschange], [onload], [onmessage],
 [onoffline], [ononline], [onpagehide], [onpageshow],
 [onpopstate], [onredo], [onresize], [onstorage],
@@ -985,7 +986,7 @@ 
    Selector
    
 
    
 
    Test
    
 
    Click click click
-
    <span onclick="alert('You clicked!');">Click click click</span>
+
    <span onclick="alert('You clicked!');">Click click click</span>
 
    
         
       
@@ -1001,7 +1002,7 @@ 
    References
    
 
  • https://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/tests/css3-modsel-175a.html
    • 
 
 
    Selector
    
-
    [id^="1"],
+
    [id^="1"],
 [id^="2"],
 [id^="3"],
 [id^="4"],
@@ -1046,7 +1047,7 @@ 
    Selector
    
 
    
 
    Test
    
 
    Hello! My ID is 2.
    
-
    <div id="2">Hello! My ID is 2.</div>
+
    <div id="2">Hello! My ID is 2.</div>
 
    
         
       
@@ -1071,11 +1072,11 @@ 
    References
    
 
  • https://css-tricks.com/almanac/selectors/b/blank/
    • 
 
 
    Selector
    
-
    title:empty
+
    title:empty
 
    
 
    Test
    
 
    
-
    <title></title>
+
    <title></title>
 
    
         
       
@@ -1093,13 +1094,13 @@ 
    References
    
 
  • https://adrianroselli.com/2015/10/dont-disable-zoom.html
    • 
 
 
    Selector
    
-
    meta[name="viewport"][content*="maximum-scale"],
+
    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>
+
    <iframe src="/static/viewport.html" sandbox="allow-same-origin" title="Wrong viewport instruction example"></iframe><span>†</span>
 
    
         
       
@@ -1122,11 +1123,11 @@ 
    References
    
 
  • https://www.w3.org/International/tutorials/tutorial-char-enc/
    • 
 
 
    Selector
    
-
    meta[charset]:not([charset="utf-8"]):not([charset="UTF-8"])
+
    meta[charset]:not([charset="utf-8"]):not([charset="UTF-8"])
 
    
 
    Test
    
 
    †
-
    <meta charset="Windows-1252"/><span>†</span>
+
    <meta charset="Windows-1252"/><span>†</span>
 
    
         
       
@@ -1149,11 +1150,11 @@ 
    References
    
 
  • https://michaelthelin.se/security/2014/06/08/web-security-cross-site-scripting-attacks-using-utf-7.html
    • 
 
 
    Selector
    
-
    head :first-child:not([charset])
+
    head :first-child:not([charset])
 
    
 
    Test
    
 
    
-
    <iframe src="/static/no-charset.html" title="Late charset a11y.css test-case" sandbox="allow-same-origin"></iframe>
+
    <iframe src="/static/no-charset.html" title="Late charset a11y.css test-case" sandbox="allow-same-origin"></iframe>
 
    
         
       
@@ -1169,11 +1170,11 @@ 
    References
    
 
  • https://w3c.github.io/html/dom.html#the-dir-attribute
    • 
 
 
    Selector
    
-
    [dir]:not([dir="rtl"]):not([dir="ltr"]):not([dir="auto"])
+
    [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>
+
    <p dir="wtf">Well, I'm kinda disoriented…</p>
 
    
         
       
@@ -1194,11 +1195,11 @@ 
    References
    
 
  • https://www.alsacreations.com/article/lire/568-Accesskey-le-grand-echec-de-l-accessibilite-du-Web.html
    • 
 
 
    Selector
    
-
    [accesskey]
+
    [accesskey]
 
    
 
    Test
    
 
    <a id="key" name="key" accesskey="1">Skip to this link using <kbd>1</kbd></a>
+
    <a id="key" name="key" accesskey="1">Skip to this link using <kbd>1</kbd></a>
 
    
         
       
@@ -1216,7 +1217,7 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG-TECHS/H71.html
    • 
 
 
    Selector
    
-
    [type="radio"]:not([name]),
+
    [type="radio"]:not([name]),
 [type="checkbox"]:not(:only-of-type):not([name])
 
    
 
    Test
    
@@ -1233,7 +1234,7 @@ 
    Test
    
     
    
   
 
-
    <form action="/">
+
    <form action="/">
   <fieldset>
     <legend>Options</legend>
     <p>
@@ -1266,7 +1267,7 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG-TECHS/H44.html
    • 
 
 
    Selector
    
-
    [type="radio"]
+
    [type="radio"]
 
    
 
    Test
    
 
    
@@ -1285,7 +1286,7 @@ 
    Test
    
     
    
   
 
    
-
    <form action="/">
+
    <form action="/">
   <p>
     <label for="option-1">Option N<sup>o</sup>1</label>
     <input type="radio" id="option-1" name="options"><span>†</span>
@@ -1328,14 +1329,14 @@ 
    References
    
 
  • 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-valuemin]),
 [role="slider"]:not([aria-valuemax]),
 [role="slider"]:not([aria-valuenow])
 
    
 
    Test
    
 
    
 †
-
    <label for="slider">Slider</label>
+
    <label for="slider">Slider</label>
 <input id="slider" role="slider" type="range" /><span>†</span>
 
    
         
@@ -1358,14 +1359,14 @@ 
    References
    
 
  • https://oaa-accessibility.org/example/33/
    • 
 
 
    Selector
    
-
    [role="spinbutton"]:not([aria-valuemin]),
+
    [role="spinbutton"]:not([aria-valuemin]),
 [role="spinbutton"]:not([aria-valuemax]),
 [role="spinbutton"]:not([aria-valuenow])
 
    
 
    Test
    
 
    
 †
-
    <label for="spinbutton">Spinbutton</label>
+
    <label for="spinbutton">Spinbutton</label>
 <input id="spinbutton" role="spinbutton" type="range" /><span>†</span>
 
    
         
@@ -1386,11 +1387,11 @@ 
    References
    
 
  • https://oaa-accessibility.org/examples/role/76/
    • 
 
 
    Selector
    
-
    [role="checkbox"]:not([aria-checked])
+
    [role="checkbox"]:not([aria-checked])
 
    
 
    Test
    
 
    Checkbox†
-
    <img src="/static/ffoodd.png" alt="Checkbox" role="checkbox" width="36" height="36"/><span>†</span>
+
    <img src="/static/ffoodd.png" alt="Checkbox" role="checkbox" width="36" height="36"/><span>†</span>
 
    
         
       
@@ -1405,11 +1406,11 @@ 
    References
    
 
  • https://oaa-accessibility.org/examples/role/77/
    • 
 
 
    Selector
    
-
    [role="combobox"]:not([aria-expanded])
+
    [role="combobox"]:not([aria-expanded])
 
    
 
    Test
    
 
    †
-
    <input type="text" aria-label="Combobox" role="combobox" id="combobox"><span>†</span>
+
    <input type="text" aria-label="Combobox" role="combobox" id="combobox"><span>†</span>
 
    
         
       
@@ -1434,7 +1435,7 @@ 
    References
    
 
  • https://www.w3.org/TR/wai-aria/states_and_properties#aria-orientation
    • 
 
 
    Selector
    
-
    [role="scrollbar"]:not([aria-controls]),
+
    [role="scrollbar"]:not([aria-controls]),
 [role="scrollbar"]:not([aria-valuemin]),
 [role="scrollbar"]:not([aria-valuemax]),
 [role="scrollbar"]:not([aria-valuenow]),
@@ -1442,7 +1443,7 @@ 
    Selector
    
 
    
 
    Test
    
 
    ↓
    
-
    <div role="scrollbar">↓</div>
+
    <div role="scrollbar">↓</div>
 
    
         
       
@@ -1465,7 +1466,7 @@ 
    References
    
 
  • https://w3c.github.io/html/sec-forms.html#the-label-element
    • 
 
 
    Selector
    
-
    a a[href],
+
    a a[href],
 button a[href],
 a audio[controls],
 button audio[controls],
@@ -1498,7 +1499,7 @@ 
    Test
    
 
    <a href="https://www.ffoodd.fr">
+
    <a href="https://www.ffoodd.fr">
   <button type=button">Oh wait, what should I trigger?</button>
 </a>
 
    
diff --git a/docs/index.html b/docs/index.html
index 29f97c73..66af6e5d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,7 +2,7 @@
 
   
     
-    Documentation | a11y.css
+    a11y.css’ documentation | a11y.css
     
     
@@ -117,7 +117,7 @@
 
     
    
       
-  
    Documentation
    
+  
    a11y.css’ documentation
    
 
       
    Introduction
    
 
    Pronounced "Alix".
    
diff --git a/docs/obsoletes.html b/docs/obsoletes.html
index 0feab0f4..df0916f1 100644
--- a/docs/obsoletes.html
+++ b/docs/obsoletes.html
@@ -159,7 +159,7 @@ 
    References
    
 
  • https://references.modernisation.gouv.fr/rgaa/criteres.html#crit-8-2
    • 
 
 
    Selector
    
-
    applet,
+
    applet,
 acronym,
 bgsound,
 dir,
@@ -192,7 +192,7 @@ 
    Selector
    
 
    
 
    Test
    
 
    W3C
-
    <acronym title="World Wide Web Consortium">W3C</acronym>
+
    <acronym title="World Wide Web Consortium">W3C</acronym>
 
    
         
       
@@ -209,7 +209,7 @@ 
    References
    
 
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
    • 
 
 
    Selector
    
-
    [dropzone],
+
    [dropzone],
 a[charset], link[charset],
 a[coords],
 a[shape],
@@ -292,7 +292,7 @@ 
    Selector
    
 
    
 
    Test
    
 
    I'm using [align]!
    
-
    <h3 align="right">I'm using [align]!</h3>
+
    <h3 align="right">I'm using [align]!</h3>
 
    
         
       
diff --git a/docs/static/docs.css b/docs/static/docs.css
index 4fdc4557..ebdb87f8 100644
--- a/docs/static/docs.css
+++ b/docs/static/docs.css
@@ -146,6 +146,7 @@ h1 {
 h2[id] {
   background-color: #fcf9e9;
   counter-increment: titles;
+  display: inline-block;
   font-size: 3em;
   line-height: 1;
   margin: 1em 0 .5em;
@@ -282,7 +283,7 @@ pre {
   color: #032c36;
   direction: ltr;
   font-family: monospace;
-  font-size: small;
+  font-size: 1em;
   -webkit-hyphens: none;
       -ms-hyphens: none;
           hyphens: none;
@@ -550,7 +551,7 @@ aside img {
 
 /* Code blocks */
 
-pre {
+.pre {
   background: #fffef9;
   border: 1px solid #e5dec8;
   border-radius: .25rem;
@@ -568,7 +569,7 @@ pre {
 
 .pre > div {
   background: #fff;
-  margin: 2em 0;
+  margin: 2.5em 0;
   padding: 1em;
 }
 
@@ -583,7 +584,7 @@ pre {
 
 .pre pre:only-child code {
   display: block;
-  margin: 2em 0 0;
+  margin: 2.5em 0 0;
 }
 
 .pre code::before {
@@ -591,7 +592,7 @@ pre {
   border: 1px solid #e5dec8;
   border-radius: .25rem 0 .25rem 0;
   color: #7b6e50;
-  content: "Example";
+  content: attr(data-language);
   font-family: var(--font-stack);
   font-style: italic;
   left: -1px;
@@ -600,19 +601,11 @@ pre {
   top: -1px;
 }
 
-.pre code[class*="css"]::before {
-  content: "CSS";
-}
-
-.pre code[class*="scss"]::before {
-  content: "Sass";
-}
-
 /* Footer */
 
 .builtWith {
   border-top: 0;
-  margin: -2rem 0 0 auto;
+  margin: -2rem 2rem 0 auto;
   padding: 1rem;
   width: -webkit-fit-content;
   width: -moz-fit-content;
diff --git a/docs/warnings.html b/docs/warnings.html
index b887e1ef..4ce0f126 100644
--- a/docs/warnings.html
+++ b/docs/warnings.html
@@ -353,7 +353,7 @@ 
    References
    
 
  • https://www.w3.org/TR/html5/grouping-content.html#the-li-element
    • 
 
 
    Selector
    
-
    ul &gt; :not(li),
+
    ul &gt; :not(li),
 ol &gt; :not(li),
 :not(ul):not(ol) &gt; li
 
    
@@ -361,7 +361,7 @@ 
    Test
    
 
      
   
      I feel like I'm lost.
      
 
    
-
    <ul>
+
    <ul>
   <p>I feel like I'm lost.</p>
 </ul>
 
    
@@ -380,15 +380,15 @@ 
    References
    
 
  • https://www.w3.org/TR/html5/grouping-content.html#the-dl-element
    • 
 
 
    Selector
    
-
    dt + :not(dd),
-:not(dt):not(dd) + dd
+
    dt + :not(dd),
+:not(dt):not(dd) + dd
 
    
 
    Test
    
 
    
   
    I need a definition, don't you think?
    
   
  • I'm a list item.
    • 
 
    
-
    <dl>
+
    <dl>
   <dt>I need a definition, don't you think?</dt>
   <li>I'm a list item.</li>
 </dl>
@@ -410,7 +410,7 @@ 
    References
    
 
  • https://www.w3.org/TR/html52/grouping-content.html#elementdef-dl
    • 
 
 
    Selector
    
-
    :not(dl) &gt; dt,
+
    :not(dl) &gt; dt,
 :not(dl) &gt; dd,
 dl &gt; :not(dt):not(dd):not(div)
 
    
@@ -418,7 +418,7 @@ 
    Test
    
 
    
   
  • I'm a list item.
    • 
 
    
-
    <dl>
+
    <dl>
   <li>I'm a list item.</li>
 </dl>
 
    
@@ -436,11 +436,11 @@ 
    References
    
 
  • https://www.w3.org/TR/html52/grouping-content.html#the-figcaption-element
    • 
 
 
    Selector
    
-
    :not(figure) &gt; figcaption
+
    :not(figure) &gt; figcaption
 
    
 
    Test
    
 
    I'm captionning something, isn't it?
    
-
    <figcaption>I'm captionning something, isn't it?</figcaption>
+
    <figcaption>I'm captionning something, isn't it?</figcaption>
 
    
         
       
@@ -455,14 +455,14 @@ 
    References
    
 
  • https://www.w3.org/TR/html52/grouping-content.html#the-figure-element
    • 
 
 
    Selector
    
-
    figure:not([role="group"])
+
    figure:not([role="group"])
 
    
 
    Test
    
 
    
   Figcaption test
   
    I'm a figcaption
    
 
    
-
    <figure>
+
    <figure>
   <img src="/static/ffoodd.png" width="144" height="144" alt="Figcaption test"/>
   <figcaption>I'm a figcaption</figcaption>
 </figure>
@@ -492,7 +492,7 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG20/#ensure-compat-rsv
    • 
 
 
    Selector
    
-
    nav main,
+
    nav main,
 aside main,
 footer main,
 header main,
@@ -524,7 +524,7 @@ 
    Selector
    
 
    
 
    Test
    
 
    I'm an legend. Am I?
-
    <legend>I'm an legend. Am I?</legend>
+
    <legend>I'm an legend. Am I?</legend>
 
    
         
       
@@ -538,7 +538,7 @@ 
    References
    
 
  • https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L326
    • 
 
 
    Selector
    
-
    b div,
+
    b div,
 i div,
 q div,
 em div,
@@ -552,7 +552,7 @@ 
    Selector
    
 
    
 
    Test
    
 
    Hey ya!
    
-
    <b><div>Hey ya!</div></b>
+
    <b><div>Hey ya!</div></b>
 
    
         
       
@@ -567,7 +567,7 @@ 
    References
    
 
  • https://www.w3.org/TR/html5/dom.html#sectioning-content
    • 
 
 
    Selector
    
-
    aside &gt; aside:first-child,
+
    aside &gt; aside:first-child,
 article &gt; aside:first-child,
 aside &gt; article:first-child,
 aside &gt; section:first-child,
@@ -579,7 +579,7 @@ 
    Test
    
 
    
-
    <aside>
+
    <aside>
   <section>I'm wrapping, you know.</section>
 </aside>
 
    
@@ -598,14 +598,14 @@ 
    References
    
 
  • https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L218
    • 
 
 
    Selector
    
-
    fieldset &gt; *:not(legend):first-child,
+
    fieldset &gt; *:not(legend):first-child,
 fieldset &gt; legend:not(:first-child)
 
    
 
    Test
    
 
    
   
 
    
-
    <fieldset>
+
    <fieldset>
   <label>I'm not a legend.</label>
 </fieldset>
 
    
@@ -625,14 +625,14 @@ 
    References
    
 
  • https://www.w3.org/TR/html52/interactive-elements.html#elementdef-details
    • 
 
 
    Selector
    
-
    details &gt; *:not(summary):first-child,
+
    details &gt; *:not(summary):first-child,
 details &gt; summary:not(:first-child)
 
    
 
    Test
    
 
    
   I'm not a summary.
 
    
-
    <details>
+
    <details>
   <legend>I'm not a summary.</legend>
 </details>
 
    
@@ -653,13 +653,13 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG-TECHS/H28.html
    • 
 
 
    Selector
    
-
    abbr:not([title]),
+
    abbr:not([title]),
 abbr[title=" "],
 abbr[title=""]
 
    
 
    Test
    
 
    Do you know about W3C?
    
-
    <p>Do you know about <abbr>W3C</abbr>?</p>
+
    <p>Do you know about <abbr>W3C</abbr>?</p>
 
    
         
       
@@ -681,7 +681,7 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG-TECHS/F38.html
    • 
 
 
    Selector
    
-
    img[alt=""],
+
    img[alt=""],
 area[alt=""],
 input[type="image"][alt=""],
 embed[type="image"][alt=""],
@@ -689,7 +689,7 @@ 
    Selector
    
 
    
 
    Test
    
 
    †
-
    <img alt="" src="/static/ffoodd.png" width="144" height="144" /><span>†</span>
+
    <img alt="" src="/static/ffoodd.png" width="144" height="144" /><span>†</span>
 
    
         
       
@@ -709,7 +709,7 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG-TECHS/F38.html
    • 
 
 
    Selector
    
-
    img[alt$=".pdf"],
+
    img[alt$=".pdf"],
 area[alt$=".pdf"],
 input[type="image"][alt$=".pdf"],
 img[alt$=".doc"],
@@ -802,7 +802,7 @@ 
    Selector
    
 
    
 
    Test
    
 
    /static/ffoodd.png†
-
    <img alt="/static/ffoodd.png" src="/static/ffoodd.png" width="144" height="144" /><span>†</span>
+
    <img alt="/static/ffoodd.png" src="/static/ffoodd.png" width="144" height="144" /><span>†</span>
 
    
         
       
@@ -835,7 +835,7 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG-TECHS/F65.html
    • 
 
 
    Selector
    
-
    img[alt=""][title],
+
    img[alt=""][title],
 img[alt=""][aria-label],
 img[alt=""][aria-labelledby],
 img[alt=""][aria-describedby],
@@ -868,7 +868,7 @@ 
    Test
    
   
 †
-
    <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+
    <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true" title="Decorative SVG, you punk!">
   <rect x="400" y="100" width="400" height="200"
@@ -889,7 +889,7 @@ 
    References
    
 
  • https://www.w3.org/WAI/tutorials/images/decorative/
    • 
 
 
    Selector
    
-
    img[role="presentation"],
+
    img[role="presentation"],
 svg[role="presentation"],
 area[role="presentation"],
 embed[role="presentation"],
@@ -903,7 +903,7 @@ 
    Test
    
   
 †
-
    <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+
    <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
      xmlns="http://www.w3.org/2000/svg"
      role="presentation">
   <rect x="400" y="100" width="400" height="200"
@@ -923,7 +923,7 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG-TECHS/F65.html
    • 
 
 
    Selector
    
-
    svg:not([aria-hidden="true"]):not([role="img"])
+
    svg:not([aria-hidden="true"]):not([role="img"])
 
    
 
    Test
    
 
    Test
   
 †
-
    <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+
    <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
      xmlns="http://www.w3.org/2000/svg"
      aria-label="Decorative SVG, you punk!">
   <rect x="400" y="100" width="400" height="200"
@@ -953,12 +953,12 @@ 
    References
    
 
  • https://www.punkchip.com/autoplay-is-bad-for-all-users/
    • 
 
 
    Selector
    
-
    video[autoplay],
+
    video[autoplay],
 audio[autoplay]
 
    
 
    Test
    
 
    †
-
    <video autoplay controls src=""></video><span>†</span>
+
    <video autoplay controls src=""></video><span>†</span>
 
    
         
       
@@ -975,12 +975,12 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG-TECHS/G4.html
    • 
 
 
    Selector
    
-
    video:not([controls]),
+
    video:not([controls]),
 audio:not([controls])
 
    
 
    Test
    
 
    †
-
    <video src=""></video><span>†</span>
+
    <video src=""></video><span>†</span>
 
    
         
       
@@ -1007,11 +1007,11 @@ 
    References
    
 
  • https://css-tricks.com/almanac/selectors/b/blank/
    • 
 
 
    Selector
    
-
    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)
+
    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
    
 
    
-
    <p id="empty-node_code"></p>
+
    <p id="empty-node_code"></p>
 
    
         
       
@@ -1026,7 +1026,7 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG20/#content-structure-separation-sequence
    • 
 
 
    Selector
    
-
    table:not([role="presentation"]) &gt; tr:only-child,
+
    table:not([role="presentation"]) &gt; tr:only-child,
 table:not([role="presentation"]) &gt; tbody &gt; tr:only-child
 
    
 
    Test
    
@@ -1043,7 +1043,7 @@ 
    Test
    
     
   
 
-
    <table>
+
    <table>
   <caption>I'm a caption :3</caption>
   <thead>
     <tr>
@@ -1071,7 +1071,7 @@ 
    References
    
 
  • https://github.com/karlgroves/diagnostic.css/blob/39ede15ff46bd59af9f8f30efb04cbb45b6c1ba5/diagnostic.css#L175
    • 
 
 
    Selector
    
-
    table table
+
    table table
 
    
 
    Test
    
 
    
@@ -1106,7 +1106,7 @@ 
    Test
    
     
   
 
    
-
    <table>
+
    <table>
   <caption>I'm a caption :3</caption>
   <thead>
     <tr>
@@ -1155,7 +1155,7 @@ 
    References
    
 
  • https://github.com/imbrianj/debugCSS/blob/e04b489388870dd214aa1c1c1a07f6811210c8ef/debugCSS.css#L309
    • 
 
 
    Selector
    
-
    table:not([role="presentation"]) &gt; caption:not(:first-child),
+
    table:not([role="presentation"]) &gt; caption:not(:first-child),
 table:not([role="presentation"]) &gt; *:first-child:not(caption)
 
    
 
    Test
    
@@ -1175,7 +1175,7 @@ 
    Test
    
     
   
 
-
    <table>
+
    <table>
   <thead>
     <tr>
       <th id="th-one">I'm a table without a caption!</th>
@@ -1206,7 +1206,7 @@ 
    References
    
 
  • https://github.com/imbrianj/debugCSS/blob/e04b489388870dd214aa1c1c1a07f6811210c8ef/debugCSS.css#L314
    • 
 
 
    Selector
    
-
    table &gt; tfoot ~ thead,
+
    table &gt; tfoot ~ thead,
 table &gt; tbody ~ tfoot,
 table &gt; tbody ~ thead,
 table &gt; tfoot ~ colgroup,
@@ -1236,7 +1236,7 @@ 
    Test
    
     I'm a table with tfoot done wrong.
   
 
-
    <table>
+
    <table>
   <caption>I'm a caption</caption>
   <thead>
     <tr>
@@ -1266,7 +1266,7 @@ 
    Missing head for data table
    
           
    Description
    
 
    <thead> is strongly needed if <tbody> is present.
    
 
    Selector
    
-
    table:not([role="presentation"]) &gt; caption + tbody,
+
    table:not([role="presentation"]) &gt; caption + tbody,
 table:not([role="presentation"]) &gt; tbody:first-child
 
    
 
    Test
    
@@ -1283,7 +1283,7 @@ 
    Test
    
     
   
 
-
    <table>
+
    <table>
   <caption>Missing thead</caption>
   <tbody>
     <tr>
@@ -1310,7 +1310,7 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG20-TECHS/H43.html
    • 
 
 
    Selector
    
-
    th:not([scope]):not([id])
+
    th:not([scope]):not([id])
 
    
 
    Test
    
 
    
@@ -1332,7 +1332,7 @@ 
    Test
    
     
   
 
    
-
    <table>
+
    <table>
   <caption>Need for a [scope] or [id]</caption>
   <thead>
     <tr>
@@ -1363,7 +1363,7 @@ 
    References
    
 
  • https://www.la-grange.net/2015/03/11/visible
    • 
 
 
    Selector
    
-
    img[src*="1px.gif"]:not([role="presentation"]),
+
    img[src*="1px.gif"]:not([role="presentation"]),
 img[src*="1x1.gif"]:not([role="presentation"]),
 img[src*="clear.gif"]:not([role="presentation"]),
 img[src*="spacer.gif"]:not([role="presentation"]),
@@ -1373,7 +1373,7 @@ 
    Selector
    
 
    
 
    Test
    
 
    Spacer.gif†
-
    <img src="/static/spacer.gif" alt="Spacer.gif" width="100" height="100"/><span>†</span>
+
    <img src="/static/spacer.gif" alt="Spacer.gif" width="100" height="100"/><span>†</span>
 
    
         
       
@@ -1382,7 +1382,7 @@ 
    Bad computed value
    
           
    Description
    
 
    Don't laugh, shit happens.
    
 
    Selector
    
-
    [id*="NaN"],
+
    [id*="NaN"],
 [id*="null"],
 [class*="NaN"],
 [class*="null"],
@@ -1391,7 +1391,7 @@ 
    Selector
    
 
    
 
    Test
    
 
    Oups, something went wrong.
    
-
    <p class="undefined">Oups, something went wrong.</p>
+
    <p class="undefined">Oups, something went wrong.</p>
 
    
         
       
@@ -1406,11 +1406,11 @@ 
    References
    
 
  • https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165
    • 
 
 
    Selector
    
-
    a[href^="javascript"]:not([role="button"])
+
    a[href^="javascript"]:not([role="button"])
 
    
 
    Test
    
 
    <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>
+
    <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>
 
    
         
       
@@ -1424,11 +1424,11 @@ 
    References
    
 
  • https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165
    • 
 
 
    Selector
    
-
    a[href="#"]:not([role="button"])
+
    a[href="#"]:not([role="button"])
 
    
 
    Test
    
 
    <a href="#">Oh boy, I don't mean anything</a>
+
    <a href="#">Oh boy, I don't mean anything</a>
 
    
         
       
@@ -1444,11 +1444,11 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG20/#content-structure-separation-sequence
    • 
 
 
    Selector
    
-
    [style]
+
    [style]
 
    
 
    Test
    
 
    I'm red. I really feel dirty.
    
-
    <div style="color: red;">I'm red. I really feel dirty.</div>
+
    <div style="color: red;">I'm red. I really feel dirty.</div>
 
    
         
       
@@ -1466,13 +1466,13 @@ 
    References*
    
 
  • https://twitter.com/KittyGiraudel/status/801475801397030912
    • 
 
 
    Selector
    
-
    [target$="blank"]:not([rel]),
+
    [target$="blank"]:not([rel]),
 [target$="blank"]:not([rel*="noopener"]),
 [target$="blank"]:not([rel*="noreferrer"])
 
    
 
    Test
    
 
    <a href="/" target="_blank">I feel vulnerable…</a>
+
    <a href="/" target="_blank">I feel vulnerable…</a>
 
    
         
       
@@ -1491,11 +1491,11 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG-TECHS/H42.html
    • 
 
 
    Selector
    
-
    [role="heading"]:not([aria-level])
+
    [role="heading"]:not([aria-level])
 
    
 
    Test
    
 
    Heading with undefined level
-
    <strong role="heading">Heading with undefined level</strong>
+
    <strong role="heading">Heading with undefined level</strong>
 
    
         
       
@@ -1516,11 +1516,11 @@ 
    References
    
 
  • https://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic
    • 
 
 
    Selector
    
-
    label:not([for])
+
    label:not([for])
 
    
 
    Test
    
 
    
-
    <label>Guess what?</label>
+
    <label>Guess what?</label>
 
    
         
       
@@ -1537,7 +1537,7 @@ 
    References
    
 
  • https://w3c.github.io/html/dom.html#the-dir-attribute
    • 
 
 
    Selector
    
-
    [lang="ar"]:not([dir="rtl"]),
+
    [lang="ar"]:not([dir="rtl"]),
 [lang="he"]:not([dir="rtl"]),
 [lang="ar"] [lang]:not([dir="ltr"]),
 [lang="he"] [lang]:not([dir="ltr"]),
@@ -1545,7 +1545,7 @@ 
    Selector
    
 
    
 
    Test
    
 
    Well, I'm kinda disoriented…
    
-
    <p dir="rtl" lang="en">Well, I'm kinda disoriented…</p>
+
    <p dir="rtl" lang="en">Well, I'm kinda disoriented…</p>
 
    
         
       
diff --git a/docs/webextension.html b/docs/webextension.html
index 0a5f2ded..d16d1a42 100644
--- a/docs/webextension.html
+++ b/docs/webextension.html
@@ -216,50 +216,50 @@ 
    References for text spacing
    
         
    
           
    No alt, no title
    
           
    †
-
    <img src="/static/checkalts/1.jpg" /><span>†</span>
+
    <img src="/static/checkalts/1.jpg" /><span>†</span>
 
    
         
       
         
    
           
    One alt, one title
    
           
    A typewriter†
-
    <img alt="A typewriter" title="Last day of August" src="/static/checkalts/2.jpg" /><span>†</span>
+
    <img alt="A typewriter" title="Last day of August" src="/static/checkalts/2.jpg" /><span>†</span>
 
    
         
       
         
    
           
    Empty alt, no title
    
           
    †
-
    <img alt="" src="/static/checkalts/3.jpg" /><span>†</span>
+
    <img alt="" src="/static/checkalts/3.jpg" /><span>†</span>
 
    
         
       
         
    
           
    One alt, no title
    
           
    Sunset†
-
    <img src="/static/checkalts/4.jpg" alt="Sunset" /><span>†</span>
+
    <img src="/static/checkalts/4.jpg" alt="Sunset" /><span>†</span>
 
    
         
       
         
    
           
    [lang]
    
           
    Selector
    
-
    [lang]
+
    [lang]
 
    
 
    Test
    
 
    Just testing languages. Voilà.
    
-
    <p>Just testing languages. <span lang="fr">Voilà</span>.</p>
+
    <p>Just testing languages. <span lang="fr">Voilà</span>.</p>
 
    
         
    
       
         
    
           
    [hreflang]
    
           
    Selector
    
-
    [hreflang]
+
    [hreflang]
 
    
 
    Test
    
 
    Here comes a simple to my very own website.
    
-
    <p>Here comes a simple to <a href="https://www.ffoodd.fr" hreflang="fr">my very own website</a>.</p>
+
    <p>Here comes a simple to <a href="https://www.ffoodd.fr" hreflang="fr">my very own website</a>.</p>
 
    
         
    
       
diff --git a/sass/themes/_advice.scss b/sass/themes/_advice.scss
index 57cccd8b..7182ff21 100644
--- a/sass/themes/_advice.scss
+++ b/sass/themes/_advice.scss
@@ -17,13 +17,13 @@ A `
   
   
@@ -47,7 +47,7 @@ category: Advices
 `[class]` shouldn't be present if empty. Something to improve, right?
 
 ### Selector
-``` css
+```css
 [class=""],
 [class=" "]
 ```
@@ -78,7 +78,7 @@ category: Advices
 `[id]` shouldn't be present if empty. You'll thank me later.
 
 ### Selector
-``` css
+```css
 [id=""],
 [id=" "]
 ```
@@ -113,7 +113,7 @@ A single `
    ` should be visible at a time. Isn't that obvious?
 * 
 
 ### Selector
-``` css
+```css
 main ~ main:not([hidden])
 ```
 
@@ -142,7 +142,7 @@ category: Advices
 * 
 
 ### Selector
-``` css
+```css
 figcaption:not(:first-of-type)
 ```
 
@@ -174,7 +174,7 @@ category: Advices
 * 
 
 ### Selector
-``` css
+```css
 figcaption:not(:first-child):not(:last-child)
 ```
 
@@ -204,7 +204,7 @@ A `` should contain a valid email.
 Otherwise you may annoy your users.
 
 ### Selector
-``` css
+```css
 [href^="mailto"]
 ```
 
@@ -230,7 +230,7 @@ A `` should contain a valid phone number.
 Otherwise you may make your users to call anubody.
 
 ### Selector
-``` css
+```css
 [href^="tel"]
 ```
 
@@ -258,7 +258,7 @@ Obviously, a button role on a link is probably not so hard to move to an authent
 * 
 
 ### Selector
-``` css
+```css
 a[role="button"]
 ```
 
@@ -292,7 +292,7 @@ You could use a `[title]`, for example.
 * 
 
 ### Selector
-``` css
+```css
 [target$="blank"]
 ```
 
@@ -323,7 +323,7 @@ A link to a file should indicate the file format, the file size and if different
 * 
 
 ### Selector
-``` css
+```css
 [download],
 [href$=".pdf"]:not(link),
 [href$=".doc"]:not(link),
@@ -376,7 +376,7 @@ Some ARIA roles should be unique: at least `[main]`, `[search]`, `[banner]`, `[c
 * 
 
 ### Selector
-``` css
+```css
 [role="main"] ~ [role="main"],
 [role="search"] ~ [role="search"],
 [role="banner"] ~ [role="banner"],
@@ -412,7 +412,7 @@ A `[class]` or `[id]` containing search may carry the search ARIA `[role]`.
 * 
 
 ### Selector
-``` css
+```css
 [id*="search"]:not([role="search"]),
 [class*="search"]:not([role="search"])
 ```
@@ -456,7 +456,7 @@ A `[required]` or `[aria-required]` should be visually understandable.
 * 
 
 ### Selector
-``` css
+```css
 [required],
 [aria-required]
 ```
@@ -499,7 +499,7 @@ A `[hidden]` or `[aria-hidden]` may not be a good idea if hiding content.
 * 
 
 ### Selector
-``` css
+```css
 [hidden]:not(:empty),
 [aria-hidden="true"]:not(:empty)
 ```
@@ -530,7 +530,7 @@ category: Advices
 A `[placeholder]` is not a label, is it?
 
 ### Selector
-``` css
+```css
 [placeholder]:not([title]):not([aria-label]):not([aria-labelledby])
 ```
 
@@ -566,7 +566,7 @@ A `