accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
165 lines (162 loc) • 7.7 kB
HTML
<html>
<head>
<!-- Removed the title for the PageWithoutTitle audit to catch. -->
<script type="text/javascript" src="../gen/axs_testing.js"></script>
</head>
<body style="margin-bottom: 0px;" aria-hidden="true" chromevoxignoreariahidden="true" role="application" chromevoxoriginalrole="null">
<script>
window.addEventListener("message", function(event) {
// console.log("message: ", event);
});
</script>
<div>
A form element without a label: <input type="text"></input>
</div>
<div>
<label>A form element <input type="text" aria-label="Screenreader-only label"></input> with two types of labels</label>
</div>
<div>
<span id="aria-label-incorrect">An incorrectly identified aria-labelledby</span>
<input type="text" aria-labelledby="aria-label"></input>
</div>
<div>
<span id="aria-label-correct" style="display: none">A correctly identified aria-labelledby</span>
<input type="text" aria-labelledby="aria-label-correct"></input>
</div>
<div>
<span id="aria-label-1">Multiple</span> <span id="aria-label-2">aria-labelledby values</span>
<input type="text" aria-labelledby="aria-label-1 badidref aria-label-2"></input>
</div>
<div>
<label for="forInput">A form element with <code>label for=</code></label><input type="text" id="forInput"></input>
</div>
<div>
<label for="forInput2" >A form element with multiple</label><label for="forInput2"><code>label for=</code></label><input type="text" id="forInput"></input>
</div>
<div>
<span id="label1">Delete history after</span>
<input type="number" id="numberfield" aria-labelledby="label1 numberfield label2">
<span id="label2">days</span>
</div>
<div>Click on this link:
<span tabindex="0" class="customlink"
onclick="alert('activated!')" onkeydown="handlekey(event);" >Click</span>
</div>
<script>
function handlekey(event) {
var target = event.target || event.srcElement;
if (event.keyCode == 13) { target.onclick(); }
}
</script>
<div id="subpage">
<label for="forInput2">A form element with</label> <label for="forInput2">multiple <code>label for=</code> values</label>
<input type="text" id="forInput2"></input>
</div>
<div>
<span role="badariarole">A span with a non-existent ARIA role</span>
</div>
<div>
<div style="cursor: pointer; background: #CCC; padding: 5px; border-radius: 3px; width: 60px;" id="deceptive">A button</div>
<div style="cursor: pointer; background: #CCC; padding: 5px; border-radius: 3px; width: 60px;" role="button" id="deceptive-aria">An ARIA button</div>
<img src="./images/button.png" id="deceptive-img"></img>
<script>
document.getElementById("deceptive").addEventListener("click", function() { alert("I'm not actually a button"); });
document.getElementById("deceptive-aria").addEventListener("click", function() { alert("I'm not actually a button either, but I play one on screenreaders"); });
document.getElementById("deceptive-img").addEventListener("click", function() { alert("I'm not a button either! Hahaha!"); });
</script>
<div>
Buttons without <code>value</code> attribute:
<button type="button" value="Hello" onclick="console.inspect(document.getElementById('forInput'));">Hello</button>
<input type="button"></input>
<input type="submit"></input>
</div>
</div>
<label for="someInput">This tape will self destruct in <input type="range" min="0" max="10" value="5"> seconds.</label>
<input type="button" id="someInput">
<div>
<img src="./images/chrome.png" title="chrome"/>
<img src="./images/chrome.png" alt="" />
<img src="./images/chrome.png" role="presentation" />
<div style="color: #888">Low contrast text</div>
<div style="color: #888; font-size: 18pt;">Large text</div>
<div style="color: #999; font-size: 18pt;">Large low-contrast text</div>
<div style="font-size: 10px;" id="absolute">Absolute sized text</div>
<style>
.bgimage {
background-image:url(https://lh5.googleusercontent.com/-sCg4gG_WAnM/UNS3_JRkvVI/AAAAAAAAAyk/8OT1wOmSC30/s16-c-k/icon_11_document_list.png);
display: inline-block;
height:16px;
width: 16px;
}
.bgImageNone {
background-image: none;
}
.bigbgimage {
background-image:url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Google_Chrome_icon_%282011%29.svg/150px-Google_Chrome_icon_%282011%29.svg.png);
height:150px;
width: 150px;
}
</style>
<span>
A small image in the background (div): <div id="backgroundiconDiv" title="Drive Document" class="bgimage" ></div><br>
A small image in the background (span): <span id="backgroundiconSpan" title="Drive Document" class="bgimage" ></span><br>
A small image in the background with text content (will no be flagged): <span title="Drive Document" class="bgimage" >Text</span><br>
A 'none' image in the background (will no be flagged): <span title="Drive Document" class="bgimageNone" ></span><br>
A large image in the background (will not be flagged): <div title="Big image" class="bigbgimage" ></div>
</span>
<style>
.absolute {
font-size: 12px;
}
</style>
<div class='absolute'>
Absolute sized text from class
</div>
<!--
<video controls autobuffer id="videoTest" width="800px">
<source src="videos/arduino.webm" type="video/webm" />
<track kind="captions" src="videos/arduino-en.vtt" type="text/vtt" srclang="en" label="English Captions" default />
<track kind="subtitles" src="videos/arduino-en.vtt" type="text/vtt" srclang="en" label="English Subtitles" default />
<track kind="descriptions" src="videos/arduino-en.vtt" type="text/vtt" srclang="en" label="English Descriptions" default />
<track kind="chapters" src="videos/arduino-en.vtt" type="text/vtt" srclang="en" label="English Chapters" default />
This is the <span style="font-style: italic">fallback content</span>.
</video>
<video controls autobuffer id="videoTest" width="800px">
<source src="videos/arduino.webm" type="video/webm" />
</video>
-->
<audio autoplay id="audioTest" src="005.ogg" type="audio/ogg; codecs=vorbis"></audio>
<div id="ariahidden" aria-hidden="true" tabindex="0" style="height: 20px;">ARIA-hidden</div>
<div id="notariahidden" tabindex="0">Not ARIA-hidden</div>
<div id="overlapping" style="font-size: 48px; position: relative; top: -40px; height: 40px; background: rgba(255, 255, 255, 0.5);">Overlapping div</div>
<div id="aria-invalid" role="textbox" aria-invalid="flurble">Eat my shorts</div>
<div id="menu-label-test">Using the
<div role="menu">
<div role="menuitemcheckbox" aria-checked="true">Selected menu item</div>
<div role="menuitemcheckbox" aria-checked="false">Not selected menu item</div>
</div>
in the computed label
</div>
<div role="textbox" aria-labelledby="menu-label-test"/>
<div role="menu list">An element with multiple ARIA roles</div>
<div role="checkbox">Checkbox without aria-checked</div>
<div role="slider">Slider without aria-valuemin, aria-valuemax or aria-valuenow</div>
<div>
For Google,<a href="http://google.com/"> click here.</a>
</div>
<iframe src="./iframe.html"></iframe>
<script>
var results = axs.Audit.run();
console.log(results);
var message = axs.Audit.createReport(results);
console.log(message);
var auditConfig = new axs.AuditConfiguration();
auditConfig.scope = document.querySelector('#subpage');
results = axs.Audit.run(auditConfig);
console.log(results);
var message = axs.Audit.createReport(results);
console.log(message);
</script>
</body>
</html>