| <!DOCTYPE HTML PUBLIC> |
| <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> |
