${processedHTML}${processedHTML})(.[\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
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
Submit
-<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
New tab
-<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
†
-<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) <= 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 <nav> 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 <nav> 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 <head>
@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
diff --git a/docs/errors.html b/docs/errors.html
index 736b9823..e7dbedb2 100644
--- a/docs/errors.html
+++ b/docs/errors.html
@@ -375,13 +375,14 @@ Reference
- https://tools.ietf.org/html/bcp47#section-2.1.1
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>
+
@@ -396,11 +397,11 @@ References
- https://www.scottohara.me/blog/2019/05/25/tabindex.html
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>
@@ -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
-<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
-<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
†
-<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">
<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 > :not(li),
+ul > :not(li),
ol > :not(li),
:not(ul):not(ol) > 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) > dt,
+:not(dl) > dt,
:not(dl) > dd,
dl > :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) > figcaption
+:not(figure) > 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
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
-<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 > aside:first-child,
+aside > aside:first-child,
article > aside:first-child,
aside > article:first-child,
aside > 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 > *:not(legend):first-child,
+fieldset > *:not(legend):first-child,
fieldset > 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 > *:not(summary):first-child,
+details > *:not(summary):first-child,
details > summary:not(:first-child)
Test
-<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
†
-<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
†
-<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"]) > tr:only-child,
+table:not([role="presentation"]) > tr:only-child,
table:not([role="presentation"]) > tbody > 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"]) > caption:not(:first-child),
+table:not([role="presentation"]) > caption:not(:first-child),
table:not([role="presentation"]) > *: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 > tfoot ~ thead,
+table > tfoot ~ thead,
table > tbody ~ tfoot,
table > tbody ~ thead,
table > 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"]) > caption + tbody,
+table:not([role="presentation"]) > caption + tbody,
table:not([role="presentation"]) > 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
†
-<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
†
-<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
†
-<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 `
