doc_accessibility_keyboard_audit.html (7733B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 #focusable-1 { 7 outline: none; 8 } 9 10 #focusable-2:focus { 11 outline: none; 12 border: 1px solid black; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="button-1" class="Button" tabindex="0">I should really be a button</div> 18 <div id="button-2" class="Button">I should really be a button</div> 19 <div id="input-container"><input id="input-1" type="text" tabindex="-1" /></div> 20 <input id="input-2" type="text" tabindex="-1" disabled /> 21 <input id="input-3" type="text" disabled /> 22 <input id="input-4" type="text" /> 23 <a id="link-1">Though a link, I'm not interactive.</a> 24 <a id="link-2" href="example.com">I'm a proper link.</a> 25 <a id="link-3" href="#">Link 3</a> 26 <a id="link-4" href="">Link 4</a> 27 <a id="link-5" href="https://example.com">Website</a> 28 <button id="button-3">Button with no tabindex</button> 29 <button id="button-4" tabindex="-1">Button with -1 tabindex</button> 30 <button id="button-5" tabindex="0">Button with 0 tabindex</button> 31 <button id="button-6" tabindex="1">Button with 1 tabindex</button> 32 <div id="focusable-1" role="button" tabindex="0">Focusable with no focus style.</div> 33 <div id="focusable-2" role="button" tabindex="0">Focusable with focus style.</div> 34 <div id="focusable-3" role="button" tabindex="0">Focusable with focus style.</div> 35 <div id="mouse-only-1" onclick="console.log('foo');">Button for mouse only</div> 36 <div id="focusable-4" onclick="console.log('foo');" tabindex="0">Button no semantics</div> 37 <div id="button-7" onclick="console.log('foo');" role="button">Semantic button not focusable</div> 38 <div id="button-8" onclick="console.log('foo');" role="button" tabindex="0">Button</div> 39 <img id="img-1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text"> 40 <img id="img-2" longdesc="https://example.com" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text"> 41 <img id="img-3" longdesc="https://example.com" onclick="console.log('foo');" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text"> 42 <img id="img-4" onclick="console.log('foo');" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text"> 43 <button id="buttonmenu-1" aria-haspopup="true">I have a popup</button> 44 <div role="button" id="buttonmenu-2" aria-haspopup="true">I have a popup</div> 45 <input id="checkbox-1" type="checkbox" name="hello" /> 46 <select id="listbox-1" size="2"> 47 <option id="lb_orange">orange</option> 48 <option id="lb_apple">apple</option> 49 </select> 50 <select id="combobox-1"></select> 51 <select id="combobox-2"><option>One</option></select> 52 <select id="combobox-3"> 53 <option id="cb_orange">orange</option> 54 <option id="cb_apple">apple</option> 55 </select> 56 <div id="editcombobox-1" role="combobox"><span role="option">One</span></div> 57 <span id="editcombobox-2"role="combobox"></span> 58 <span id="editcombobox-3"role="combobox" tabindex="0"></span> 59 <span id="switch-1" role="switch"></span> 60 <span id="switch-2" role="switch" tabindex="0"></span> 61 <div aria-label="Tag" role="combobox" aria-expanded="true" aria-owns="owned_listbox" aria-haspopup="listbox"> 62 <input type="text" aria-autocomplete="list" aria-controls="owned_listbox" aria-activedescendant="selected_option"> 63 </div> 64 <ul role="listbox" id="owned_listbox"> 65 <li role="option">Zebra</li> 66 <li role="option" id="selected_option">Zoom</li> 67 </ul> 68 <label id="label-1">hello<input type="checkbox" name="world" /></label> 69 <label id="label-2" for="checkbox-1">hello</label> 70 <label id="label-3">hello</label> 71 <label id="label-4">hello</label><input type="checkbox" name="world" /> 72 <a href="about:mozilla" target="_blank" rel="opener"> 73 <img id="img-5" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text"> 74 </a> 75 <a onmousedown=""> 76 <img id="img-6" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text"> 77 </a> 78 <a onclick=""> 79 <img id="img-7" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text"> 80 </a> 81 <a onmouseup=""> 82 <img id="img-8" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text"> 83 </a> 84 <section id="section-1" class="collapsible-section top-sites animation-enabled" aria-expanded="true"></section> 85 <main id="main" tabindex="-1">Main content</main> 86 <div id="not-keyboard-focusable-1" tabindex="-1">Not keyboard fqocusable with no focus style.</div> 87 <div id="grid-1" role="grid" aria-label="Interactive grid"></div> 88 <div id="grid-2" tabindex="0" role="grid" aria-label="Interactive grid"></div> 89 <div id="table-1" role="table" aria-label="Non-interactive ARIA table"></div> 90 <div id="table-2" tabindex="0" role="table" aria-label="Non-interactive ARIA table"></div> 91 <table id="table-3" aria-label="Non-interactive table"></table> 92 <table id="table-4" tabindex="0" aria-label="Non-interactive table"></table> 93 <div id="article-1" role="article"></div> 94 <div id="article-2" role="article" tabindex="0"></div> 95 <div role="grid" aria-label="Interactive grid"> 96 <div id="columnheader-1" role="columnheader"></div> 97 <div id="rowheader-1" role="rowheader"></div> 98 <div role="row"> 99 <div id="gridcell-1" role="gridcell"></div> 100 <div id="gridcell-2" role="gridcell" tabindex="0"></div> 101 </div> 102 </div> 103 <div role="table" aria-label="Non-interactive table"> 104 <div id="columnheader-2" role="columnheader"></div> 105 <div id="rowheader-2" role="rowheader"></div> 106 </div> 107 <table> 108 <tr> 109 <th id="columnheader-3">Animals</th> 110 </tr> 111 <tr> 112 <th id="columnheader-4" tabindex="0">Hippopotamus</th> 113 </tr> 114 <tr> 115 <th id="rowheader-3">Horse</th> 116 <td>Mare</td> 117 </tr> 118 <tr> 119 <th id="rowheader-4" tabindex="0">Chicken</th> 120 <td>Hen</td> 121 </tr> 122 </table> 123 <table role="grid"> 124 <tr> 125 <th id="columnheader-5">Animals</th> 126 </tr> 127 <tr> 128 <th id="columnheader-6" tabindex="0">Hippopotamus</th> 129 </tr> 130 <tr> 131 <th id="rowheader-5">Horse</th> 132 <td id="gridcell-3">Mare</td> 133 </tr> 134 <tr> 135 <th id="rowheader-6" tabindex="0">Chicken</th> 136 <td id="gridcell-4" tabindex="0">Hen</td> 137 </tr> 138 </table> 139 <div id="tablist-1" role="tablist"></div> 140 <div id="tablist-2" role="tablist" tabindex="0"></div> 141 <div id="scrollbar-1" role="scrollbar"></div> 142 <div id="scrollbar-2" role="scrollbar" tabindex="0"></div> 143 <div id="separator-1" role="separator"></div> 144 <div id="separator-2" role="separator" tabindex="0"></div> 145 <div id="toolbar-1" role="toolbar"></div> 146 <div id="toolbar-2" role="toolbar" tabindex="0"></div> 147 <div id="menu-1" role="menu"></div> 148 <div id="menu-2" role="menu" tabindex="0"></div> 149 <div id="menubar-1" role="menubar"></div> 150 <div id="menubar-2" role="menubar" tabindex="0"></div> 151 <input id="input-search" type="search"> 152 </body> 153 </html>