act-rules / act-rules.github.io Goto Github PK
View Code? Open in Web Editor NEWAccessibility conformance testing rules for HTML
Home Page: https://act-rules.github.io/
License: Other
Accessibility conformance testing rules for HTML
Home Page: https://act-rules.github.io/
License: Other
name: Meta-refresh no delay
description: |
This rule checks that the meta element is not used for delayed redirecting or refreshing.
success_criterion:
test_aspects:
authors:
The rule applies to any content
attribute in a meta
element that contains the http-equiv
attribute with value "refresh"
(case-insensitive).
The value before the first semicolon or comma (representing seconds) of the value of the content
attribute is not a number greater than 0.
Note: Semi-colon or comma is optional in the content
attribute. When none is present, the value of the attribute should be considered as a whole. See meta-refresh for parsing instructions.
There are no major accessibility support issues known for this rule.
<head>
<meta http-equiv="refresh" content="0; URL='https://auto-wcag.github.io/auto-wcag/'" />
</head>
<head>
<meta http-equiv="refresh" content="foo; URL='https://auto-wcag.github.io/auto-wcag/'" />
</head>
<head>
<meta http-equiv=refresh content=" -00.12 foo">
</head>
<head>
<meta http-equiv="refresh" content="; 30">
</head>
<head>
<meta http-equiv="refresh" content="30">
</head>
<head>
<meta http-equiv="refresh" content="30; URL='https://auto-wcag.github.io/auto-wcag/'">
</head>
<head>
<meta http-equiv="refresh">
</head>
<head>
<meta http-equiv="">
</head>
<head>
<meta content="30">
</head>
<head>
<meta>
</head>
Based on comment from Ken
Example:
https://github.com/auto-wcag/auto-wcag/blob/master/_draft-tests/SC1-1-1-decorative-images.html
https://github.com/auto-wcag/auto-wcag/blob/master/drafts/SC2-4-2-titles-across-pages.md
Please add your comments regarding the test-case to this issue.
rule_id: SC2-1-2-no-keyboard-trap-r1
test_case_template: default
success_criterion:
<a href ="#">Link 1</a>
<button class="target">Button1</button>
<a href="#">Link 1</a>
<button class="target" onblur="setTimeout(() => this.focus(), 10)">Button1</button>
<button class="target" onblur="setTimeout(() => this.nextSibling.focus(), 10)">Button1</button>
<button class="target" onblur="setTimeout(() => this.previousSibling.focus(), 10)">Button2</button>
<h1>Page 1</h1>
I'm sure this is an oversight, but you probably should update the definition of Manual at https://auto-wcag.github.io/auto-wcag/pages/structure/test-modes.html.
This rule should be updated before we can finalize it:
https://github.com/auto-wcag/auto-wcag/blob/master/_drafts/SC2-2-2-pause-stop-hide.md
Leave any comments in this issue.
name: Label is descriptive
test_type: atomic
description: |
This rule checks that labels describe the purpose of the interface components.
success_criterion:
test_aspects:
authors:
This rule applies to
<label>
elements andaria labelledby
attributtNote: This rule is only applies to (...markup equivalent to semantic role of label...). Thus, it is a partial check for WCAG 2.0 success criterion 2.4.6, which applies to all labels. "Label" is used in its general sense and includes text or other components with a text alternative that is presented to a user to identify a component within Web content.
Note: A label is presented to all users whereas the name may be hidden and only exposed by assistive technology. In many (but not all) cases the name and the label are the same.
Each target element describes the purpose of the element its a caption for.
Note: Labels do not need to be lengthy. A word, or even a single character, may suffice.
There are currently no assumptions.
There are no major accessibility support issues known for this rule.
Label that is coded with the <label>
element and describes the purpose of the associated element.
<label for ="fname">First name:</label>
<input id="fname" type="text" name="fname"/>
Description...
<!-- code -->
Description...
<!-- code -->
Action on me to review 1.1.1. images, see given our current approach if where we can break up this rule.
I looked at this rule:
https://github.com/auto-wcag/auto-wcag/blob/master/_rules/SC1-4-2-audio-control-audio.md
And it only takes audio into account, if the audio element is inserted in the DOM. But audio can be auto-played by doing:
var audio_object = new Audio('sample-audio.mp3');
audio_object.play();
This will not be caught by the rule currently, as the CSS selector will not be able to find this audio instance.
name: Inline links are distinguishable
description: |
This rule checks that links that are embedded in a block of text and where color alone is used to identify them, have a sufficient color contrast ratio with the surrounding text, and additional cues are given when the link receives focus or hover.
success_criterion:
test_aspects:
authors:
The rule applies to any HTML or SVG element with the semantic role of link that lives up to the following criteria:
Within the same block of text the contrast ratio is 3:1 or greater between either
When the link's focus state is triggered, the link has a distinguishing style, a distinguishing border, a distinguishing box-shadow or a background-image.
When the link's hover state is triggered, the link has a distinguishing style, a distinguishing border, a distinguishing box-shadow or a background-image.
There are no major accessibility support issues known for this rule.
@@@ Test cases: breaks, margins, content in lots of spans etc.
<!-- Link uses the browser's default link styling -->
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
<!-- Blue link in block of black text with text-decoration none has underline on hover and focus -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
a:hover, a:focus {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body>
<!-- Block of text only consist of one letter that is not contained within a link -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
a:hover, a:focus {
text-decoration: underline;
}
</style>
</head>
<body>
<p>A<a href="http://w3.org/WAI"> link text</a></p>
</body>
<!-- -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
a:hover, a:focus {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body>
<!-- Additional cues on hover/focus is change in font-family-->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
font-family: "Times New Roman", Times, serif;
}
a:hover, a:focus {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body>
<!-- Additional cues on hover/focus is change in font-weight -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
font-weight: normal;
}
a:hover, a:focus {
font-weight: bold;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body>
<!-- Additional cues on hover/focus is italics -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
font-style: normal;
}
a:hover, a:focus {
font-style: italic;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body>
<!-- Additional cues on hover/focus is change of background-color -->
<head>
<style>
p {
color: black;
background-color: white;
}
a:link {
color: blue;
text-decoration: none;
}
a:hover, a:focus {
background-color: red;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body>
<!-- Additional cues on hover/focus is background-image -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
a:hover, a:focus {
background-image: url("arrow.gif");
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body>
<!-- Button that is styled to look like a link and has role of link -->
<head>
<style>
p {
color: black;
}
button {
background:none;
color:blue;
border:none;
padding:0;
font: inherit;
cursor: pointer;
}
button:hover, button:focus {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <button role="link">button that acts like a link</button>.</p>
</body>
´´´html
´´´
´´´html
´´´
@@@ split out and a: link underlined
<!-- Too low contrast between link text and surrounding text-->
<head>
<style>
p {
color: red;
}
a:link {
color: blue;
text-decoration: none;
}
a:hover, a:focus {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body>
<!-- No additional cues on hover -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
a:focus {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body>
<!-- Additional cues on focus -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body>
´´´html
´´´
<!-- -->
<!-- <a> element doesn't have href="", so it doesn't have role of link -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a>a element without href attribute</a>.</p>
</body>
<!-- <a> element has had it's role changed -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI" role="button">link that has had its role changed</a>.</p>
</body>
<!-- No visible text in the block of text the link is contained within -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<p><a href="http://w3.org/WAI">Read more</a><span style="display:none">about our latest organisational changes.</span></p>
</body>
<!-- Breadcrumb with only links and separator characters -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<p>... / <a>About us</a> / <a>CSR</a> / <a>Accessibility</a></p>
</body>
<!-- -->
<head>
<style>
p {
color: black;
}
a:link {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<p>This is a block of text<a href="http://w3.org/WAI"></a>.</p>
</body>
<!-- Link is underlined, therefore this rule is not applicable -->
<head>
<style>
p {
color: black;
}
a:link {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body>
<!-- -->
<head>
<style>
a:link {
text-decoration: none;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <span style="text-decoration: underline;"><a href="http://w3.org/WAI">link text that is underlined</a><span>.</p>
</body>
<!-- -->
<head>
<style>
a:link {
text-decoration: none;
}
</style>
</head>
<body>
<p><a href="http://w3.org/WAI">link 1</a> | <a href="http://w3.org/WAI">link 2</a>.</p>
</body>
<!-- -->
<head>
<style>
a:link {
text-decoration: none;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI"><span style="text-decoration: underline;">link text that is underlined<span></a>.</p>
</body>
<!-- -->
<!-- button that looks like a link but has the role of button -->
<head>
<style>
p {
color: black;
}
button {
background:none;
color:blue;
border:none;
padding:0;
font: inherit;
cursor: pointer;
}
button:hover {
text-decoration: underline;
}
button:focus {
text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <button>button that acts like a link</button>.</p>
</body>
<!-- Link text color has too low contrast with background, but this is a violation of success criteria 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced), not 1.4.1 Use of Color -->
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
<!-- Blue link in block of black text with text-decoration none has underline on hover and focus -->
<head>
<style>
p {
color: black;
background-color: white;
}
a:link {
color: yellow;
text-decoration: none;
}
</style>
</head>
<body>
<p>This is a block of text with an embedded <a href="http://w3.org/WAI">link text</a>.</p>
</body>
@@@ add a:focus test cases for Passed test cases
@@@ fix up text color in first failed test case
@@@ comments in test cases about why they are failing
A block of text is a run of phrasing content containing no consecutive line breaks.
Contained within one block-like ancestor
has rendered text or phrasing content with rendered text
If more than one br
element is used, followed by additional rendered text or phrasing content with rendered text, this is considered a new block of text.
What if pre
element is used?
Look at the width, style, and color of the border-top, border-bottom or outline.
For one of these to be a distinguishing border, all the following must be true:
If either border-top, border-bottom or outline is distinguishable, the element has a distinguishing border.
Compare the style properties font-family, font-weight, font-style, text-decoration of the element to that of the surrounding text.
If any of the properties have a different value for the one than for the other, the style is distinguishable.
While I understand that the guideline is element specific, the rule refers to HTML document as a whole as well as the individual elements.
Current rule https://github.com/auto-wcag/auto-wcag/blob/master/_rules/SC4-1-1-unique-attrs.md includes:
...
Selector
Select all opening tags in the HTML document
Step 1
Make a list of all the attribute names on the current tag
Check if any of the attributes occurs more the once:
Return [step1-fail][#step1-fail]
Else, return [step1-pass][#step1-fail]
...
Fail: "Attribute was used more then once on the element"
Is it useful that at the bottom of every selector we say something like: "For each selected item, go through the following steps". Would that help make the rules clearer?
name: SC3-1-2-lang
description:
lang
and/or xml:lang
attribute on elements with in the body
of a web page are correct.success_criterion:
test_aspects:
authors:
lang
and/or xml:lang
attribute.lang
and/or xml:lang
conforms to BCP 47.There are currently no assumptions
This rule is only applicable in a scenario where assistive technologies are inconsistent about how they determine the language of the page.
Retrieve all DOM nodes with a lang
and or xml:lang
attribute, other than the root node
descendent-or-self::body[@lang]
descendent-or-self::body[@xml:lang]
<article lang="en">
<p xml:lang="DE">
<blockquote lang="fr-CH">
<article lang="dutch">
<p xml:lang="en-english">
none
name: video element transcript
group: SC1-2-video-element
description: |
Non-streaming video elements must have all audio and visual information available in a transcript.
success_criterion:
test_aspects:
authors:
The rule applies to any non-streaming video element visible in the page
A text transcript is available for the test target, either on the page or available through a link (or some other mechanism).
The text transcript (from expectation 1) contains all the visual and auditory information of the test target.
There are currently no assumptions
There are no major accessibility support issues known for this rule.
<video src="../test-assets/rabbit-video.mp4" controls></video>
<p>The above video shows a giant fat rabbit climbing out of a hole in the ground.
He stretches, yaws, and then starts walking.
Then he stops to scratch his bottom.</p>
<video src="../test-assets/rabbit-video.mp4" controls></video>
<a href="/test-assets/rabbit-video-transcript.html">Transcript</p>
<video src="../test-assets/rabbit-video.mp4" controls></video>
<p>The above video shows a giant fat dog climbing out of a hole in the ground.
He stretches, yaws, and then starts walking.
Then he stops to scratch his bottom.</p>
<video src="../test-assets/rabbit-video.mp4" controls></video>
<a href="/test-assets/rabbit-video-incorrect-transcript.html">Transcript</p>
TODO: a source to a live video
<video src="../test-assets/rabbit-video.mp4" controls style="display: none;"></video>
https://github.com/auto-wcag/auto-wcag/blob/master/drafts/SC3-2-3-navigational-links-across-pages.md
Please add your comments regarding the test-case to this issue.
name: SC3-1-2-text
description:
lang
attribute for any such changes.success_criterion:
test_aspects:
authors:
script
elements, attribute and comments.lang
attribute & that the value conforms to BCP 47.There are currently no assumptions
This rule is only applicable in a scenario where assistive technologies are inconsistent about how they determine the language of the page.
lang
attribute applies.<article>
To say good morning in Dutch, you would say <p lang="nl">Goedemorgen</p>
</article>
<article lang="en">
Goedemorgen
</article>
<article>
<!--
<p lang="nl">Goedemorgen</p>
-->
Good Morning
</article>
name: SC3-1-1-html-lang-valid
description:
xml:lang
and/or the lang
attribute, and that it conforms to BCP 47.success_criterion:
test_aspects:
authors:
The root node of the page, if it is an <html>
element with a lang
and/or xml:lang
attribute.
lang
and/or xml:lang
attribute conforms to BCP 47.There are currently no assumptions
This rule is only applicable in a scenario where assistive technologies are inconsistent about how they determine the language of the page.
<html lang="fr">
<html xml:lang="fr">
<html xml:lang="fr" lang="fr">
<html lang="xyz">
<html xml:lang="xyz">
<html lang="fr" xml:lang="xyz">
<svg lang="fr">
<svg xml:lang="fr">
name: audio described video element
group: SC1-2-video-element
description: |
Non-streaming video elements must not contain any visual information that is not expressed in the audio
success_criterion:
test_aspects:
authors:
The rule applies to any non-streaming video element visible in the page where the video contains audio.
The visual information of each test target is available through its audio, or through an audio description track.
There are currently no assumptions
There are no major accessibility support issues known for this rule.
<video src="../test-assets/rabbit-video-with-voiceover.mp4" controls></video>
TODO: Video with separate audio description
<video src="../test-assets/rabbit-video.mp4" controls></video>
<video src="../test-assets/rabbit-video-with-incorrect-voiceover.mp4" controls></video>
TODO: Video with separate incorrect audio description
TODO: a source to a live video
<video src="../test-assets/rabbit-video-silent.mp4" controls></video>
<video src="../test-assets/rabbit-video.mp4" controls style="display: none;"></video>
https://github.com/auto-wcag/auto-wcag/blob/master/drafts/SC1-4-1-a.md
Please add your comments regarding the test-case to this issue.
name: unique element id attributes
description: |
This rule checks that all id
attribute values on a single page are unique.
success_criterion:
test_aspects:
authors:
Any element with an id
attribute.
All id
attribute values are unique.
There are currently no assumptions.
There are no major accessibility support issues known for this rule.
<div id="my-div"> This is my first element</div>
<div id="my-div1"> This is my first element</div>
<div id="my-div2"> This is my second element</div>
<svg id="my-div3"> This is my third element</svg>
<div id="my-elm"></div>
<script>
var myElm = document.getElementById('my-elm');
var shadow = myElm.attachShadow({ move: 'open' });
shadow.innerHTML = '<b id="my-elm"><slot /></b>';
</script>
<div id="my-div"> This is my first element</div>
<div id="my-div"> This is my second element</svg>
<div id="my-div"> This is my first element</div>
<svg id="my-div"> This is my second element</svg>
<div>This is my first element</div>
<div xml:id="my-div">This is my first element</div>
Every rule is designed by a team of two or three people. They do their work in a github issue. This means that every activity is represented by an open issue on Github. The first post of an issue contains the proposal they are working on. In subsequent posts, discussions are held, and as they are resolved, the draft at the top of the issue is updated. Once the group is done with the proposal, a pull request is created, and the issue is closed.
When a proposal in step 1 is done, a pull request is created to update the rule in _drafts
. This gives the rest of auto-WCAG the opportunity to respond to the proposal. At this point one of three things can happen:
Editorial comments can be resolved immediately by updating the pull request.
For any comments that can't be resolved immediately, a new issue is created. Once the review period of the pull request has passed, the pull request is merged in. The team working on this rule continues working on the new issue that was created, going back to step 1.
If no comments come in, the issue can be merged in after the review period. If the authors feel the rule is read for publication, after they merged the PR into draft, they can open a new PR, wich must have "FINAL" in the PR name, to move the rule from _drafts
to _rules
. This will publish the rule. The rule needs at least 3 approved votes before it can be merged from people who weren't the editors. If new comments come in, the PR must be closed without merging, and a new issue is created to work on the fix.
At every auto-WCAG call, inactive issues and PRs are reviewed. If an issue / PR hasn't been updated since the last auto-WCAG call it will be closed. This is to ensure that issues and PRs don't get stale, and so that it's always clear at a glance what is being worked on. Issues closed for this reason are given the stale
flag, and can be reopened if a new team is interested to work on it.
Current rule https://github.com/auto-wcag/auto-wcag/blob/master/_rules/SC4-1-1-accesskey.md includes:
Assumptions
...
Selector
Select any element with an accesskey attribute. The following CSS selector could be used: *[accesskey]
Step 1
...
Fail "The accesskey of this element has occurred before on this page"
name: video closed captions
group: SC1-2-2-video-captions
description: |
Closed captions are available for audio information in non-streaming video elements.
success_criterion:
test_aspects:
authors:
The rule applies to any non-streaming video element visible in the page where the video contains audio.
Of each test target, audio information that is not expressed visually in the video, is available through a caption track.
There are currently no assumptions
There are no major accessibility support issues known for this rule.
<video src="../test-assets/rabbit-video.mp4" controls>
<track src="rabbit-video-closed-caption.vtt" kind="captions">
</video>
<video src="../test-assets/rabbit-video.mp4" controls></video>
TODO: a source to a live video
<video src="../test-assets/rabbit-video-silent.mp4" controls></video>
<video src="../test-assets/rabbit-video.mp4" controls style="display: none;"></video>
name: Descriptive headings
description: |
This rule checks that headings describe the topic or purpose of the content.
success_criterion:
test aspects:
authors:
The rule applies to any element with the the semantic role of heading
.
Note: The WCAG 2.0 success criterion 2.4.6 applies to all headings.
Note: Heading content defines the header of a section (whether explicitly marked up using sectioning content elements, or implied by the heading content itself).
Each target element describes the topic or purpose of the subsequent content.
Note: Headings do not need to be lengthy. A word, or even a single character, may suffice.
There are no major accessibility support issues known for this rule.
<!-- Heading marked up with h-element that describes the topic or purpose of the following section of content -->
<h1 class="target">Opening Hours</h1>
<p>We are open Monday through Friday from 10 to 16</p>
<!-- Heading marked up with role="heading" that describes the topic or purpose of the following section of content -->
<span role="heading">Opening Hours</span>
<p>We are open Monday through Friday from 10 to 16</p>
<!-- Heading marked up with h-element with an image that describes the topic or purpose of the following section of content -->
<h1 class="target"><img scr="../test-assets/opening_hours_icon.png" alt="Opening hours"></img></h1>
<p>We are open Monday through Friday from 10 to 16</p>
<!-- Heading marked up with h-element that is a single character that describes the topic or purpose of the following section of content -->
<h1 class="target">A</h1>
<dl>
<dt>airplane</dt>
<dd>a powered flying vehicle with fixed wings and a weight greater than that of the air it displaces.</dd>
<dt>apple</dt>
<dd>the round fruit of a tree of the rose family, which typically has thin green or red skin and crisp flesh.</dd>
</dl>
<!-- Heading marked up with h-element that does not describe the topic or purpose of the following section of content -->
<h1 class="target">Weather</h1>
<p>We are open Monday through Friday from 10 to 16</p>
<!-- Heading marked up with role="heading" that does not describe the topic or purpose of the following section of content -->
<span role="heading">Weather</span>
<p>We are open Monday through Friday from 10 to 16</p>
<!-- No heading -->
<p>We are open Monday through Friday from 10 to 16</p>
<!-- Heading that is not visible to users -->
<h1 style="display: none;">Opening hours</h1>
<p>We are open Monday through Friday from 10 to 16</p>
I was looking at
https://auto-wcag.github.io/auto-wcag/rules/SC2-4-7-focus-in-viewport.html
Just wondering if the check would catch cases where authors pick large positive offsets to move items to outside the viewport. The problem is clear: the exact size of the viewport is not known. x=2000px / y=2000px will movce the item outside the viewport but not on very large screens. So it seems this can only be tested for negative offsets - or positive offsets just beyond the currenty available screen resolutions.
name: video captions
description: |
Captions are available for audio information in non-streaming video elements.
success_criterion:
test_aspects:
authors:
The rule applies to any non-streaming video
element visible on the page where the video contains audio.
Of each test target, audio information that is not expressed visually in the video, is available through captions.
Note: Captions can be either embedded in the video file itself or can be made available trough a separate track.
There are currently no assumptions
There are no major accessibility support issues known for this rule.
<video src="../test-assets/perspective-video-with-captions.mp4" controls></video>
<video src="../test-assets/perspective-video.mp4" controls>
<track src="perspective-caption.vtt" kind="captions">
</video>
<video src="../test-assets/perspective-video.mp4" controls></video>
<video src="../test-assets/perspective-keyboard-compatibility-video.mp4" controls>
<track src="perspective-incorrect-caption.vtt" kind="captions">
</video>
<video src="../test-assets/perspective-video-silent.mp4" controls></video>
<video src="../test-assets/perspective-video.mp4" controls style="display: none;"></video>
name: Video element description track
group: SC1-2-3+1-2-5-Video-element
description: |
This rule checks that non-streaming video elements with a description track have that track be descriptive.
success_criterion:
test_aspects:
authors:
The rule applies to any non-streaming video element visible in the page where the video contains audio and a track
element with a kind="description"
attribute.
The visual information of each test target not available through its audio is describes with a description track element.
Note: Multiple description track elements may be useful for different languages, but at least one must match the language of the video.
There are currently no assumptions
Unknown
<video src="../test-assets/rabbit-video.mp4" controls>
<track kind="descriptions" src="rabbit-video-descriptions.vtt">
</video>
<video src="../test-assets/rabbit-video.mp4" controls>
<track kind="descriptions" src="rabbit-video-incorrect-descriptions.vtt">
</video>
<video src="../test-assets/rabbit-video.mp4" controls></video>
TODO: a source to a live video
<video src="../test-assets/rabbit-video.mp4" controls style="display: none;">
<track kind="descriptions" src="rabbit-video-descriptions.vtt">
</video>
<video src="../test-assets/rabbit-video-silent.mp4" controls></video>
name: No keyboard trap non-standard navigation
group:
description: |
This rule checks if the user is advised on a method for non-standard keyboard navigation to navigate through focusable content on a web page without becoming trapped in any element.
success_criterion:
test aspects:
authors:
The rule applies to any HTML or SVG element on a web page that is focusable and reachable through sequential focus navigation where focus cannot cycle to the browser UI by using standard keyboard navigation.
For each target element help information is visible on the page and exposed to assistive technologies or can be navigated to from within the keyboard trap.
Note: As per Success Criterion 2.1.1 Keyboard the help information should be accessible through a keyboard interface. This however is the test subject for another ACT rule.
The help information explains how to cycle to the browser UI, or on how to get to a point from where it is possible to cycle to the browser UI, using standard keyboard navigation.
For each target element focus can cycle to the browser UI by using the method advised in the help information.
Note: Cycling back to the browser UI can be done both by moving forward through the tab order and by moving backwards. It is not possible to fulfil this expectation by using browser specific shortcuts to return to the browser UI.
There are no major accessibility support issues known for this rule.
<!-- Keyboard trap with help information in a paragraph before, and where the method adviced works -->
<script>
var trapOn = false ;
</script>
<p class="target">Press the Esc-key to Exit</p>
<a id="link1" href="#">Link 1</a>
<button id="btn1" class="target" onblur="(function(e){trapOn=true; document.getElementById('btn2').focus();})(event)">Button 1</button>
<button id="btn2" class="target" onkeydown="(function(e){ if (e.keyCode === 27){trapOn=false;document.getElementById('link2').focus();}})(event)" onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)">Button 2</button>
<a id="link2" href="#">Link 2</a>
<!-- Keyboard trap with help information within the trap, and where the method adviced works -->
<script>
var trapOn = false ;
</script>
<a id="link1" href="#">Link 1</a>
<button id="btn1" class="target" onblur="(function(e){trapOn=true; document.getElementById('btn2').focus();})(event)">Button 1</button>
<p class="target">Press the Esc-key to Exit</p>
<button id="btn2" class="target" onkeydown="(function(e){ if (e.keyCode === 27){trapOn=false;document.getElementById('link2').focus();}})(event)" onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)">Button 2</button>
<a id="link2" href="#">Link 2</a>
<!-- Keyboard trap with no instructions -->
<script>
var trapOn = false ;
</script>
<a id="link1" href="#">Link 1</a>
<button id="btn1" class="target" onblur="(function(e){trapOn=true; document.getElementById('btn2').focus();})(event)">Button 1</button>
<button id="btn2" class="target" onkeydown="(function(e){ if (e.keyCode === 27){trapOn=false;document.getElementById('link2').focus();}})(event)" onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)">Button 2</button>
<a id="link2" href="#">Link 2</a>
<!-- Keyboard trap with instructions that doesn't give advice on the method for proceeding -->
<script>
var trapOn = false ;
</script>
<p class="target">Go to the next element</p>
<a id="link1" href="#">Link 1</a>
<button id="btn1" class="target" onblur="(function(e){trapOn=true; document.getElementById('btn2').focus();})(event)">Button 1</button>
<button id="btn2" class="target" onkeydown="(function(e){ if (e.keyCode === 27){trapOn=false;document.getElementById('link2').focus();}})(event)" onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)">Button 2</button>
<a id="link2" href="#">Link 2</a>
<!-- Keyboard trap with help text, where the method adviced doesn't work -->
<script>
var trapOn = false ;
</script>
<a id="link1" href="#">Link 1</a>
<button id="btn1" class="target" onblur="(function(e){trapOn=true; document.getElementById('btn2').focus();})(event)">Button 1</button>
<p class="target">Press the Esc-key to Exit</p>
<button id="btn2" class="target" onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)">Button 2</button>
<a id="link2" href="#">Link 2</a>
<!-- Not a keyboard trap (interactive element) -->
<a id="link1" href="#">Link 1</a>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<a id="link2" href="#">Link 2</a>
name: SC3-1-1-html-has-lang
description:
html
element has a lang
or xml:lang
attribute.success_criterion:
test_aspects:
authors:
The root node of the page, if it is an html
element.
lang
or xml:lang
attributeThere are currently no assumptions
There are no major accessibility support issues known for this rule.
<html lang="en">
<html xml:lang="en">
<html xml:lang="en" lang="en">
<html>
<svg lang="en">
name: SC3-1-1-html-xml-lang-match
description:
html
element, there is no mismatch between the primary language in lang
and xml:lang
attributes, if both are used.success_criterion:
test_aspects:
authors:
The root node of the page, if it is an html
element with both lang
and xml:lang
attributes.
lang
and xml:lang
attributes are the same.Note: language tags are not case sensitive
There are currently no assumptions
Since most assistive technologies will consistently use lang
over xml:lang
when both are used, violation of this rule may not necessarily be a violation of WCAG 2. Only when there are inconsistencies between assistive technologies, as to which attribute is used to determine the language, does this lead to a violation of SC 3.1.1.
<html lang="en" xml:lang="en">
<html lang="en" xml:lang="En">
<html lang="en" xml:lang="en-GB">
<html lang="fr" xml:lang="en">
<svg lang="en" xml:lang="en">
rule_id: SC2-4-4+SC4-1-2-link-names
name: Links have an accessible name
test_mode: automatic
criteria:
authors:
This rule checks that all links have an accessible name.
No known assumptions.
Property | Value |
---|---|
Test name | Links have an accessible name |
Success Criterion | 2.4.4 Link Purpose (In Context), 4.1.2 Name, Role, Value |
Test mode | automatic |
Test environment | Rendered page |
Test subject | Single web page |
Test mode: automatic
Select elements matching the following CSS selector:
a[href]:not([role]), *[role=link]
Test mode: automatic
Check if the selected element has an aria-label
or aria-labelledby
attribute.
If yes, continue with Step 5
Else, continue with step Step 2
Test mode: automatic
Concatenate the selected element's rendered text and the text of the title
attribute, in variable T1.
If T1 is non-empty, return:
Outcome | Passed |
---|---|
Testcase | SC2-4-4+SC4-1-2-link-names |
ID | SC2-4-4+SC4-1-2-link-names-passed1 |
Info | Link contains text |
Else, continue with Step 3
Check if the selected element contains an img
element or an input
element of type=image
,
If yes, continue with Step 4
Else, return:
Outcome | Failed |
---|---|
Testcase | {{ page.rule_id }} |
ID | {{ page.rule_id }}-failed1 |
Error | The links must have a name, either though the link text or by the title attribute. |
Test mode: automatic
Take all images from step 3, that do not have [role=presentation]
and are not hidden through display:none
or visibility:hidden
.
If there are no such images, return:
Outcome | Failed |
---|---|
Testcase | {{ page.rule_id }} |
ID | {{ page.rule_id }}-failed2 |
Error | Ensure that images within the link are not ignored by assistive technologies. |
Get the text alternatives of the images using the Text Alternative Computation Algorithm. Concatenate the resulting texts into variable T2.
If T2 contains non-empty text, return:
Outcome | Passed |
---|---|
Testcase | {{ page.rule_id }} |
ID | {{ page.rule_id }}-passed2 |
Info | The link contains images with a text alternative |
Else return:
Outcome | Failed |
---|---|
Testcase | {{ page.rule_id }} |
ID | {{ page.rule_id }}-failed3 |
Error | An image is the only content of this anchor and so it should have a text alternative to give a name to the link. |
Test mode: automatic
Concatenate the selected element's aria-label
attribute, and the text content of an element referred to with the aria-labeledby
attribute, in variable T3.
If T3 contains non-empty text, return:
Outcome | Passed |
---|---|
Testcase | {{ page.rule_id }} |
ID | {{ page.rule_id }}-passed3 |
Info | The link has an accessible name through ARIA labels |
Dlese, return:
Outcome | Failed |
---|---|
Testcase | {{ page.rule_id }} |
ID | {{ page.rule_id }}-failed4 |
Error | The link's aria label does not provide an alternative |
rule_id: SC1-3-1-tables-headers-id-correct
name: Tables headers-id associations correct
test_mode: semi-automatic
environment: DOM Structure
success_criterion:
authors:
This rule checks that data table headers-id associations reference correct targets in the correct order.
Loop outward from most deeply nested table.
For each un-marked table, select all elements that match the following CSS selector:
table:not([role=presentation]) th[headers],
table:not([role=presentation]) td[headers],
table:not([role=none]) th[headers],
table:not([role=none]) td[headers]
Mark table complete.
For each value in each cell headers
attribute,
find the 'th' referenced,
give the user the following question:
Property | Value |
---|---|
Presented item | Highlight a table cell and the related "header" cell. |
Question | Is the cell appropriately categorized by or semantically related with the associated "header" cell? |
Requires context | Yes. |
Requires interaction | Yes. |
if yes, continue with step 2
else, return step1-fail1.
For each value in each cell headers
attribute,
find the 'th' referenced,
give the user the following question:
Property | Value |
---|---|
Presented item | Highlight a table cell and the related header cell. Display the sequence order of the header cell as a number value, as specified by the order in which the header's id appears within the cell's headers attribute. |
Question | Is the number of the related header consistent with the desired reading sequence? |
Requires context | Yes. |
Requires interaction | Yes. |
if yes, return step2-pass1
else, return step2-fail1.
The resulting assertion is as follows,
Property | Value |
---|---|
type | Assertion |
test | auto-wcag:SC1-3-1-tables-headers-id-correct |
subject | the selected element |
mode | semi-automatic |
result | One TestResult from below |
Property | Value |
---|---|
type | TestResult |
outcome | Failed |
description | Table cell references an incorrect th via the headers attribute. |
Property | Value |
---|---|
type | TestResult |
outcome | Passed |
Property | Value |
---|---|
type | TestResult |
outcome | Failed |
description | Table cell references a th via the headers in an incorrect order. |
Property | Value |
---|---|
type | TestResult |
outcome | Passed |
Implementation tests are available at:
headers
can only reference a th
.From Github:
"We found a potential security vulnerability in a repository for which you have been granted security alert access.
**bbc/bbc-a11y**
Known critical severity security vulnerability detected in electron >= 1.7.0,< 1.7.11 defined in package-lock.json.
package-lock.json update suggested: electron ~> 1.7.11.
Always verify the validity and compatibility of suggestions with your codebase."
This is something to check and potentially update dependencies.
We've been using the same template for two years now, and given what we've learned I think we can do better.
https://github.com/auto-wcag/auto-wcag/blob/master/pages/rule-template.md
A few topics to address:
Katie take a look at SC2-4-7-focus-in-viewport.md (https://github.com/auto-wcag/auto-wcag/blob/master/_rules/SC2-4-7-focus-in-viewport.md ). The question is to review it to make it fit into our new template, or just put it into our new template - that is here: https://github.com/WilcoFiers/auto-wcag/blob/b0442b231adc1f6308623ee25f924690b6d0e792/pages/rule-template.md
This rule should be updated before we can finalize it:
https://github.com/auto-wcag/auto-wcag/blob/master/_drafts/SC1-3-1-form-division.md
Leave any comments in this issue.
name: SC3-1-1-xml-lang
group: # (what goes here?)
description: |
This rule checks the value of the xml:lang
and/or the lang
attribute.
success_criterion:
test_aspects:
To run the test cases, the below conditions are necessary.
authors:
For html
element.
html
element of the document.html
element has a lang
and or xml:lang
attribute.For object
embedded element.
object
element of the document.object
element has a lang
and or xml:lang
attribute.Checking language in HTTP(S) Request Headers & Responses.
request
and response
from a XHR.request
has passed Accept-Lanauage
in the header to advertise which languages that the client is able to undersand.response
stream and Content-Language
response header is specified.This rule applies to the html
, object
, xhr request
& xhr response
.
Past tests have shown that xml:lang
is ignored by certain screenreaders (Both Jaws 15 with FF and IE, as well as NVDA with FF). This test identifies pages that use only the xml lang
attribute.
There are no major accessibility support issues known for this rule.
The xml:lang attribute
is a universal attribute to mark up and or specify the human language that an element contains, confirming to the XML 1.0 documents. It is synonymous to the lang
attribute and can/ should be used in parallel to allow for back-ward compatability.
Further References:
rule_id: SC1-3-1-tables-headers-id-valid
name: Tables headers-id associations valid
test_mode: automatic
environment: DOM Structure
success_criterion:
authors:
This rule checks that data table headers
attributes have values that reference td
or th
elements in the same table.
Loop outward from most deeply nested table.
For each un-marked table, select all elements that match the following CSS selector:
table:not([role=presentation]) th[headers],
table:not([role=presentation]) td[headers],
table:not([role=none]) th[headers],
table:not([role=none]) td[headers]
Mark table completed.
For each value in each cell headers
attribute,
check that the value references an id
attribute value of a th
within the currently selected table,
if yes, return step1-pass1
else, return step1-fail1.
The resulting assertion is as follows,
Property | Value |
---|---|
type | Assertion |
test | auto-wcag:SC1-3-1-tables-headers-id-valid |
subject | the selected element |
mode | automatic |
result | One TestResult from below |
Property | Value |
---|---|
type | TestResult |
outcome | Failed |
description | Table cell's headers attribute contains an id that does not correspond to a th in the same table. |
Property | Value |
---|---|
type | TestResult |
outcome | Passed |
Implementation tests are available at:
headers
can only reference a th
.name: HTML page has a title
description: |
This rule checks that the HTML page has a title
success_criterion:
test_aspects:
authors:
The rule applies to any page where the root element is an html
element, and which is not embedded in another page.
Note: Pages may be embedded inside other pages through elements such as iframes and object elements.
The page contains at least one title
element.
Note: The title
element exists in other namespaces such as SVG. These are not title
elements for HTML document and should be ignored.
The first title
element contains non-empty text.
There are currently no assumptions
There are no major accessibility support issues known for this rule.
<html>
<title>This page has a title</title>
</html>
<html>
<title>This page gives a title to an iframe</title>
<iframe src="page-without-title.html"></iframe>
</html>
<html>
<h1>this page has no title</h1>
</html>
<html>
<title> <!-- this page has an empty title --> </title>
</html>
<html>
<iframe src="page-with-title.html"></iframe>
</html>
<svg>
<title>This is an SVG</title>
</svg>
This rule should be updated before we can finalize it:
https://github.com/auto-wcag/auto-wcag/blob/master/_drafts/SC2-4-2-title.md
Leave any comments in this issue.
Add tests to these 3 draft rules, based on the template created from #57.
name: No keyboard trap standard navigation
group:
description: |
This rule checks if it is possible to use standard keyboard navigation to navigate through all content on a web page without becoming trapped in any element.
success_criterion:
test aspects:
authors:
The rule applies to any HTML or SVG element on a web page that is focusable by keyboard.
For each target element focus can cycle to the browser UI by using standard keyboard navigation.
Note: Cycling back to the browser UI can be done both by moving forward through the tab order and by moving backwards. It is not possible to fulfil this expectation by using browser specific shortcuts to return to the browser UI.
There are no major accessibility support issues known for this rule.
<a href ="#">Link 1</a>
<button class="target">Button1</button>
<a href ="#" style="visibility: hidden;">Link 1</a>
<button class="target" style="visibility: hidden;">Button1</button>
<div tabindex=“1”>Text</div>
<!-- something with tabindex=0 ? -->
<a href="#">Link 1</a>
<button class="target" onblur="setTimeout(() => this.focus(), 10)">Button1</button>
<button class="target" onblur="setTimeout(() => this.nextSibling.focus(), 10)">Button1</button>
<button class="target" onblur="setTimeout(() => this.previousSibling.focus(), 10)">Button2</button>
<h1>Page 1</h1>
<a href="#" tabindex="-1">Tab key cannot reach here!</a>
<!-- Element you can't reach -->
<button type="button" disabled>Click Me!</button>
<!-- Disabled element -->
<button type="button" style=“display: none;”>Click Me!</button>
<!-- Hidden element -->
Current rule https://github.com/auto-wcag/auto-wcag/blob/master/_rules/SC4-1-1-id.md includes:
Assumptions
no known assumptions
...
Selector
Select all elements that match the following CSS selector: *[id]
Step 1
...
Fail: "The ID of this element has occurred before on this page"
Current rule is at https://github.com/auto-wcag/auto-wcag/blob/master/_drafts/SC1-4-3-text-bg-contrast.md and includes commented notes.
For review purposes:
This test checks that the text nodes on a page contrast sufficiently with the background, gradient or image behind them.
Select elements that match the following XPath or Javascript selector:
//*[text()]
node.nodeType = 3;
For each selected item, go through the following steps:
Determine if the text node has an applied/computed "color" property (ie. not default and not a background image or gradient). Record the text-color value; unknown or null if default.
Continue with step 2
Determine if the parent, or another layer or layers behind the text node, has an applied/computed "background-color" (ie. not default and not a background image or gradient) and is not transparent. Record the background-color value or values; unknown or null if default.
Continue with step 3
Check if the recorded text-color value, or background-color value or values, is unknown or null, while the other or others has a color.
if yes, return step3-fail else, continue with step 4
Check if the text-color value and background-color value or values contrast sufficiently for the size and boldness of text. Record all contrast-ratios.
if no, return step4-fail else, continue with step 5
Determine if any other styles are applied to the text node or background element or elements that would affect the colour contrast. For example, background image or gradient, drop-shadow, border or opacity. Record text-styles and background-styles.
if yes, return step5-cannottell else, return step 5-pass
Property | Value |
---|---|
type | TestResult |
outcome | Failed |
description | Text node or background has some color property, while the other does not (see F24). |
Property | Value |
---|---|
type | TestResult |
outcome | Failed |
description | Text node color property and background color property do not contrast sufficiently (for the text size and weight): [contrast-ratio]. |
Property | Value |
---|---|
type | TestResult |
outcome | CannotTell |
description | Further contrast tests are needed for text node and background, because of [text-styles] and/or [background-styles]. |
Property | Value |
---|---|
type | TestResult |
outcome | Pass |
description | Text node and background appear to contrast sufficiently: [contrast-ratio]. |
The current format looks like this:
---
rule_id: SCx-y-z-name
success_criterion:
- x.y.z
---
<h2>inapplicable</h2>
<div data-outcome="incomplete">
<!-- HTML code here -->
</div>
<!-- other incomplete examples if needed -->
<h2>step1-pass</h2>
<div data-outcome="passed"
data-outcome-id="step1-pass">
<!-- HTML code here -->
</div>
<!-- more test cases -->
<h2>step1-fail</h2>
<div data-outcome="failed"
data-outcome-id="step1-fail">
<!-- HTML code here -->
</div>
<!-- more test cases -->
<h2>step#-pass/fail</h2>
<!-- Add pass / fail / incomplete examples for every step that has them -->
There are a number of limitations to this:
The ACT TF has developed an alternative format, which comes with its own advantages and disadvantages. We should think about what would be the easiest format for us to work with.
https://github.com/w3c/wcag-act-rules/blob/master/_rule-tests/ACT-R1-tests.html
rule_id:
name:
test_mode: semi-automatic
environment: Web Browser
success_criterion:
Video elements without description track must be reviewed to ensure that audio descriptions aren’t necessary or are provided in a different way.
Any video
element(s) that does not contain a track
element with a kind
attribute set to descriptions
.
There are currently no tests available for this rule.
Implementation tests are available at: rulename tests
Todo
Here I suggest some minor changes for rules
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.