doc_accessibility_text_label_audit.html (31852B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <body> 7 <button id="buttonmenu-1" aria-haspopup="true">I have a popup</button> 8 <label>I have a popup<button id="buttonmenu-2" aria-haspopup="true"></button></label> 9 <button id="buttonmenu-3" aria-haspopup="true"></button> 10 <button id="buttonmenu-4" aria-haspopup="true" aria-label="I have a popup"></button> 11 <label for="buttonmenu-5">I have a popup </label><button id="buttonmenu-5" aria-haspopup="true"></button> 12 <label id="buttonmenu-6-label">I have a popup </label><button id="buttonmenu-6" aria-haspopup="true" aria-labelledby="buttonmenu-6-label"></button> 13 <p id="p1">I am a paragraph</p> 14 <p id="p2"></p> 15 <canvas id="canvas-1"></canvas> 16 <canvas id="canvas-2" aria-label="Canvas label"></canvas> 17 <canvas id="canvas-3" aria-labelledby="canvas-3-heading"> 18 <h2 id="canvas-3-heading">Shapes</h2> 19 </canvas> 20 <canvas id="canvas-4"> 21 <h2>Shapes</h2> 22 </canvas> 23 <input id="checkbox-1" type="checkbox" name="world" /> 24 <label>hello</label><input id="checkbox-2" type="checkbox" name="world" /> 25 <label>hello<input id="checkbox-3" type="checkbox" name="world" /></label> 26 <label for="checkbox-4">hello</label><input id="checkbox-4" type="checkbox" name="world" /> 27 <input id="checkbox-5" type="checkbox" name="world" aria-label="hello" /> 28 <label id="checkbox-6-label">hello</label><input id="checkbox-6" type="checkbox" name="world" aria-labelledby="checkbox-6-label" /> 29 <div id="checkbox-7" role="checkbox"></div> 30 <div id="checkbox-8" aria-label="hello" role="checkbox"></div> 31 <div id="checkbox-9-label">hello</div><div id="checkbox-9" aria-labelledby="checkbox-9-label" role="checkbox"></div> 32 <div role="menu"> 33 <div id="menuitemcheckbox-1" role="menuitemcheckbox">hello</div> 34 <div id="menuitemcheckbox-2" role="menuitemcheckbox"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" /></div> 35 <div id="menuitemcheckbox-3" role="menuitemcheckbox"></div> 36 <div id="menuitemcheckbox-4" role="menuitemcheckbox"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="" /></div> 37 <div id="menuitemcheckbox-5" role="menuitemcheckbox"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="hello" /></div> 38 <div id="menuitemcheckbox-6" role="menuitemcheckbox"> </div> 39 </div> 40 <p id="columnheader-7-label">Budget</p> 41 <p id="rowheader-7-label">Toy Story 3</p> 42 <table> 43 <thead> 44 <tr> 45 <th id="columnheader-1" scope="col">Film Title</th> 46 <th id="columnheader-2" scope="col"></th> 47 <th id="columnheader-3" scope="col"> </th> 48 <th id="columnheader-4" scope="col" aria-label="Worldwide Gross"></th> 49 <th id="columnheader-5" scope="col" aria-label=""></th> 50 <th id="columnheader-6" scope="col" aria-label=" "></th> 51 <th id="columnheader-7" scope="col" aria-labelledby="columnheader-7-label"></th> 52 </tr> 53 </thead> 54 <tbody> 55 <tr><th id="rowheader-1" scope="row">Toy Story 3</th></tr> 56 <tr><th id="rowheader-2" scope="row"></th></tr> 57 <tr><th id="rowheader-3" scope="row"> </th></tr> 58 <tr><th id="rowheader-4" scope="row" aria-label="Alladin"></th></tr> 59 <tr><th id="rowheader-5" scope="row" aria-label=""></th></tr> 60 <tr><th id="rowheader-6" scope="row" aria-label=" "></th></tr> 61 <tr><th id="rowheader-7" scope="row" aria-labelledby="columnheader-7-label"></th></tr> 62 </tbody> 63 </table> 64 <div role="grid"> 65 <div role="row"> 66 <div role="columnheader" id="columnheader-8">Film Title</div> 67 <div role="columnheader" id="columnheader-9"></div> 68 <div role="columnheader" id="columnheader-10"> </div> 69 <div role="columnheader" id="columnheader-11" aria-label="Worldwide Gross"></div> 70 <div role="columnheader" id="columnheader-12" aria-label=""></div> 71 <div role="columnheader" id="columnheader-13" aria-label=" "></div> 72 <div role="columnheader" id="columnheader-14" aria-labelledby="columnheader-7-label"></div> 73 </div> 74 </div> 75 <label for="combobox-1">Choose a pet:</label> 76 <select id="combobox-1"> 77 <option id="combobox-option-1" value="">--Please choose an option--</option> 78 <option id="combobox-option-2" value="dog"></option> 79 <option id="combobox-option-3" value="cat"> </option> 80 <option id="combobox-option-4" value="" label="--Please choose an option--"></option> 81 <option id="combobox-option-5" value="dog" label=""></option> 82 <option id="combobox-option-6" value="cat" label=" "></option> 83 </select> 84 <select id="combobox-2"></select> 85 <label>Choose a pet:</label><select id="combobox-3"></select> 86 <label>Choose a pet:<select id="combobox-4"></select></label> 87 <select id="combobox-5" aria-label="Choose a pet:"></select> 88 <label id="combobox-6-label">Choose a pet:</label><select id="combobox-6" aria-labelledby="combobox-6-label"></select> 89 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="diagram-1" 90 xmlns:xlink="http://www.w3.org/1999/xlink"></svg> 91 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="diagram-2" aria-label="" 92 xmlns:xlink="http://www.w3.org/1999/xlink"></svg> 93 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="diagram-3" aria-label="empty drawing" 94 xmlns:xlink="http://www.w3.org/1999/xlink"></svg> 95 <div id="diagram-4-label">Empty drawing</div> 96 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="diagram-4" aria-labelledby="diagram-4-label" 97 xmlns:xlink="http://www.w3.org/1999/xlink"></svg> 98 <div id="diagram-5-label"></div> 99 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="diagram-5" aria-labelledby="diagram-5-label" 100 xmlns:xlink="http://www.w3.org/1999/xlink"></svg> 101 <dialog id="dialog-1" open> 102 <p>Greetings, one and all!</p> 103 </dialog> 104 <dialog id="dialog-2" aria-label="" open> 105 <p>Greetings, one and all!</p> 106 </dialog> 107 <dialog id="dialog-3" aria-label="Greetings" open> 108 <p>Greetings, one and all!</p> 109 </dialog> 110 <dialog id="dialog-4" aria-labelledby="dialog-4-label" open> 111 <p id="dialog-4-label">Greetings, one and all!</p> 112 </dialog> 113 <div role="dialog" id="dialog-5"> 114 <p>Greetings, one and all!</p> 115 </div> 116 <div role="dialog" id="dialog-6" aria-label=""> 117 <p>Greetings, one and all!</p> 118 </div> 119 <div role="dialog" id="dialog-7" aria-label="Greetings"> 120 <p>Greetings, one and all!</p> 121 </div> 122 <div role="dialog" id="dialog-8" aria-labelledby="dialog-8-label"> 123 <p id="dialog-8-label">Greetings, one and all!</p> 124 </div> 125 <dialog id="dialog-9" aria-labelledby="dialog-9-label" open> 126 <p id="dialog-9-label"></p> 127 </dialog> 128 <div role="dialog" id="dialog-10" aria-labelledby="dialog-10-label"> 129 <p id="dialog-10-label"></p> 130 </div> 131 <div id="editcombobox-1" role="combobox"></div> 132 <div id="editcombobox-2" aria-label="Choose a pet:" role="combobox"></div> 133 <div id="editcombobox-3-label">Choose a pet:</div><div id="editcombobox-3" aria-labelledby="editcombobox-3-label" role="combobox"></div> 134 <label>Customer name: <input id="entry-1"></label> 135 <input id="entry-2"> 136 <input id="entry-3" aria-label="Customer name:"> 137 <label>Customer name: </label><input id="entry-4"> 138 <label for="entry-5">Customer name: </label><input id="entry-5"> 139 <label id="entry-6-label">Customer name: </label><input id="entry-6" aria-labelledby="entry-6-label"> 140 <div id="entry-7" role="textbox"></div> 141 <div id="entry-8" aria-label="Customer name:" role="textbox"></div> 142 <div id="entry-9-label">Customer name: </div><div id="entry-9" aria-labelledby="entry-9-label" role="textbox"></div> 143 <figure id="figure-1"> 144 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text"> 145 <figcaption>Figure 1: The four layers of awesome.</figcaption> 146 </figure> 147 <figure id="figure-2"> 148 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text"> 149 </figure> 150 <div id="figure-3" role="figure" aria-labelledby="caption-figure-3"> 151 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text"> 152 <p id="caption-figure-3">Figure 1: The caption</p> 153 </div> 154 <div id="figure-4" role="figure" aria-labelledby="caption-figure-4"> 155 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text"> 156 <p id="caption-figure-4"></p> 157 </div> 158 <div id="figure-5" role="figure"> 159 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text"> 160 </div> 161 <img id="img-1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII="> 162 <img id="img-2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" aria-label="alt text"> 163 <p id="img-3-label">Label</p> 164 <img id="img-3" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" aria-labelledby="img-3-label"> 165 <img id="img-4" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text"> 166 <p id="img-5-label"></p> 167 <img id="img-5" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" aria-labelledby="img-5-label"> 168 <div id="img-6" role="img"></div> 169 <div id="img-7" role="img" aria-label="alt text"></div> 170 <p id="img-8-label">Label</p> 171 <div id="img-8" role="img" aria-labelledby="img-8-label"></div> 172 <div id="img-9" role="img" aria-label=""></div> 173 <p id="img-10-label"></p> 174 <div id="img-10" role="img" aria-labelledby="img-10-label"></div> 175 <select> 176 <optgroup id="optgroup-1" label="Group 1"> 177 <option>Option 1.1</option> 178 </optgroup> 179 <optgroup id="optgroup-2" label=""> 180 <option>Option 2.1</option> 181 </optgroup> 182 <optgroup id="optgroup-3"> 183 <option>Option 3.1</option> 184 </optgroup> 185 <optgroup id="optgroup-4" aria-label="Group 4"> 186 <option>Option 4.1</option> 187 </optgroup> 188 <optgroup id="optgroup-5" aria-labelledby="optgroup-5-label"> 189 <option id="optgroup-5-label">Option 5.1</option> 190 </optgroup> 191 </select> 192 <fieldset id="fieldset-1"><legend>Choose your favorite monster</legend></fieldset> 193 <fieldset id="fieldset-2"><legend></legend></fieldset> 194 <fieldset id="fieldset-3"></fieldset> 195 <fieldset id="fieldset-4" aria-label="Choose your favorite monster"></fieldset> 196 <p id="fieldset-5-label">Choose your favorite monster</p> 197 <fieldset id="fieldset-5" aria-labelledby="fieldset-5-label"></fieldset> 198 <h1 id="heading-1"></h1> 199 <h1 id="heading-2">Heading</h1> 200 <h1 id="heading-3"> </h1> 201 <h1 id="heading-4" aria-label="Heading"></h1> 202 <h1 id="heading-5" aria-labelledby="heading-5-label"></h1> 203 <p id="heading-5-label">Heading</p> 204 <h1 id="heading-6" aria-label="Heading">H</h1> 205 <h1 id="heading-7" aria-labelledby="heading-7-label">H</h1> 206 <p id="heading-7-label">Heading</p> 207 <div role="heading" aria-level="1" id="heading-8"></div> 208 <div role="heading" aria-level="1" id="heading-9">Heading</div> 209 <div role="heading" aria-level="1" id="heading-10"> </div> 210 <div role="heading" aria-level="1" id="heading-11" aria-label="Heading"></div> 211 <div role="heading" aria-level="1" id="heading-12" aria-labelledby="heading-12-label"></div> 212 <p id="heading-12-label">Heading</p> 213 <div role="heading" aria-level="1" id="heading-13" aria-label="Heading">H</div> 214 <div role="heading" aria-level="1" id="heading-14" aria-labelledby="heading-14-label">H</div> 215 <p id="heading-14-label">Heading</p> 216 <map name="imagemap"> 217 <area alt="One" shape="rect" coords="0,0,14,28" href="1.html"> 218 <area shape="rect" coords="14,0,28,28" href="2.html"> 219 </map> 220 <img id="imagemap-1" usemap="#imagemap" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII="> 221 <img id="imagemap-2" usemap="#imagemap" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" aria-label="image map name"> 222 <p id="imagemap-3-label">image map name</p> 223 <img id="imagemap-3" usemap="#imagemap" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" aria-labelledby="imagemap-3-label"> 224 <img id="imagemap-4" usemap="#imagemap" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="image map name"> 225 <p id="imagemap-5-label"></p> 226 <img id="imagemap-5" usemap="#imagemap" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" aria-labelledby="img-5-label"> 227 <iframe id="iframe-1" title="IFrame Title" src="https://example.com"></iframe> 228 <iframe id="iframe-2" title="" src="https://example.com"></iframe> 229 <iframe id="iframe-3" src="https://example.com"></iframe> 230 <iframe id="iframe-4" aria-label="Bad Title" src="https://example.com"></iframe> 231 <iframe id="iframe-5" aria-label="Bad Title" title="Good Title" src="https://example.com"></iframe> 232 <object id="object-1" type="image/png" data="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII="></object> 233 <object id="object-2" aria-label="Image object" type="image/png" data="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII="></object> 234 <p id="object-3-label">Image object</p> 235 <object id="object-3" aria-labelledby="object-3-label" type="image/png" data="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII="></object> 236 <object id="object-4" type="text/html" data="https://example.com"></object> 237 <embed id="embed-1" type="image/png" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII="> 238 <embed id="embed-2" type="video/webm" src="data:video/webm,xxx"> 239 <embed id="embed-3" aria-label="Embedded video" type="video/webm" src="data:video/webm,xxx"> 240 <p id="embed-4-label">Embedded video</p> 241 <embed id="embed-4" aria-labelledby="embed-4-label" type="video/webm" src="data:video/webm,xxx"> 242 <a id="link-1"></a> 243 <a id="link-2">Hello world</a> 244 <a id="link-3" href></a> 245 <a id="link-4" href>Hello world</a> 246 <a id="link-5" href=""></a> 247 <a id="link-6" href="">Hello world</a> 248 <a id="link-7" href="#"></a> 249 <a id="link-8" href="#">Hello world</a> 250 <a id="link-9" href="https://example.com"></a> 251 <a id="link-10" href="https://example.com">Hello world</a> 252 <a id="link-11" aria-label="Hello world" href="https://example.com"></a> 253 <p id="link-12-label">Hello world</p> 254 <a id="link-12" aria-labelledby="link-12-label" href="https://example.com"></a> 255 <div role="link" id="link-13"></div> 256 <div role="link" id="link-14">Hello world</div> 257 <div role="link" id="link-15" aria-label="Hello world"></div> 258 <p id="link-16-label">Hello world</p> 259 <div role="link" id="link-16" aria-labelledby="link-16-label"></div> 260 <p id="mglyph-3-label">Label</p> 261 <p id="mglyph-6-label"></p> 262 <math> 263 <mi><mglyph id="mglyph-1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII="/></mi> 264 <mi><mglyph id="mglyph-2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" aria-label="alt text"/></mi> 265 <mi><mglyph id="mglyph-3" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" aria-labelledby="mglyph-3-label"/></mi> 266 <mi><mglyph id="mglyph-4" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text"/></mi> 267 <mi><mglyph id="mglyph-5" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt=""/></mi> 268 <mi><mglyph id="mglyph-6" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" aria-labelledby="mglyph-6-label"/></mi> 269 </math> 270 <div role="menu"> 271 <span id="menuitem-1" role="menuitem"></span> 272 <span id="menuitem-2" aria-label="" role="menuitem"></span> 273 <span id="menuitem-3" aria-label="Menu Item" role="menuitem"></span> 274 <p id="menuitem-4-label">Menu Item</p> 275 <span id="menuitem-4" aria-labelledby="menuitem-4-label" role="menuitem"></span> 276 <p id="menuitem-5-label"></p> 277 <span id="menuitem-5" aria-labelledby="menuitem-5-label" role="menuitem"></span> 278 <span id="menuitem-6" role="menuitem">Menu Item</span> 279 </div> 280 <label for="listbox-1">Choose a pet:</label> 281 <select id="listbox-1" size="6"> 282 <option id="option-1" value="">--Please choose an option--</option> 283 <option id="option-2" value="dog"></option> 284 <option id="option-3" value="cat"> </option> 285 <option id="option-4" value="" label="--Please choose an option--"></option> 286 <option id="option-5" value="dog" label=""></option> 287 <option id="option-6" value="cat" label=" "></option> 288 </select> 289 <select id="listbox-2" size="2"></select> 290 <label>Choose a pet:</label><select id="listbox-3" size="2"></select> 291 <label>Choose a pet:<select id="listbox-4" size="2"></select></label> 292 <select id="listbox-5" aria-label="Choose a pet:" size="2"></select> 293 <label id="listbox-6-label">Choose a pet:</label><select id="listbox-6" aria-labelledby="listbox-6-label" size="2"></select> 294 <div role="listbox"> 295 <div role="option" id="option-7">--Please choose an option--</div> 296 <div role="option" id="option-8"></div> 297 <div role="option" id="option-9"> </div> 298 <div role="option" id="option-10" aria-label="--Please choose an option--"></div> 299 <div role="option" id="option-11" aria-label=""></div> 300 <div role="option" id="option-12" aria-label=" "></div> 301 <p id="option-13-label">--Please choose an option--</p> 302 <div role="option" id="option-13" aria-labelledby="option-13-label"></div> 303 <p id="option-14-label"></p> 304 <div role="option" id="option-14" aria-labelledby="option-14-label"></div> 305 <p id="option-15-label"> </p> 306 <div role="option" id="option-15" aria-labelledby="option-15-label"></div> 307 </div> 308 <div role="tree"> 309 <span id="treeitem-1" role="treeitem"></span> 310 <span id="treeitem-2" aria-label="" role="treeitem"></span> 311 <span id="treeitem-3" aria-label="Tree Item" role="treeitem"></span> 312 <p id="treeitem-4-label">Tree Item</p> 313 <span id="treeitem-4" aria-labelledby="treeitem-4-label" role="treeitem"></span> 314 <p id="treeitem-5-label"></p> 315 <span id="treeitem-5" aria-labelledby="treeitem-5-label" role="treeitem"></span> 316 <span id="treeitem-6" role="treeitem">Tree Item</span> 317 </div> 318 <div role="tablist"> 319 <span id="tab-1" role="tab"></span> 320 <span id="tab-2" aria-label="" role="tab"></span> 321 <span id="tab-3" aria-label="Tab" role="tab"></span> 322 <p id="tab-4-label">Tab</p> 323 <span id="tab-4" aria-labelledby="tab-4-label" role="tab"></span> 324 <p id="tab-5-label"></p> 325 <span id="tab-5" aria-labelledby="tab-5-label" role="tab"></span> 326 <span id="tab-6" role="tab">Tab</span> 327 </div> 328 <label>Password: <input type="password" id="password-1"></label> 329 <input type="password" id="password-2"> 330 <input type="password" id="password-3" aria-label="Password:"> 331 <label>Password: </label><input type="password" id="password-4"> 332 <label for="password-5">Password: </label><input type="password" id="password-5"> 333 <label id="password-6-label">Password: </label><input type="password" id="password-6" aria-labelledby="password-6-label"> 334 <label>Progress: <progress id="progress-1"></progress></label> 335 <progress id="progress-2"></progress> 336 <progress id="progress-3" aria-label="Progress:"></progress> 337 <label>Progress: </label><progress id="progress-4"></progress> 338 <label for="progress-5">Progress: </label><progress id="progress-5"></progress> 339 <label id="progress-6-label">Progress: </label><progress id="progress-6" aria-labelledby="progress-6-label"></progress> 340 <label>Progress: <div role="progressbar" id="progress-7"></div></label> 341 <label id="progress-8-label">Progress: <div role="progressbar" id="progress-8" aria-labelledby="progress-8-label"></div></label> 342 <div role="progressbar" id="progress-9"></div> 343 <div role="progressbar" id="progress-10" aria-label="Progress:"></div> 344 <label>Progress: </label><div role="progressbar" id="progress-11"></div> 345 <label for="progress-12">Progress: </label><div role="progressbar" id="progress-12"></div> 346 <label id="progress-13-label">Progress: </label><div role="progressbar" id="progress-13" aria-labelledby="progress-13-label"></div> 347 <button id="button-1">hello</button> 348 <button id="button-2"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" /></button> 349 <button id="button-3"></button> 350 <button id="button-4"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="" /></button> 351 <button id="button-5"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="hello" /></button> 352 <button id="button-6"> </button> 353 <label>Button: <button id="button-7"></button></label> 354 <button id="button-8" aria-label="Button:"></button> 355 <label>Button: </label><button id="button-9"></button> 356 <label for="button-10">Button: </label><button id="button-10"></button> 357 <label id="button-11-label">Button: </label><button id="button-11" aria-labelledby="button-11-label"></button> 358 <label>Button: <div role="button" id="button-12"></div></label> 359 <label id="button-13-label">Button: <div role="button" id="button-13" aria-labelledby="button-13-label"></div></label> 360 <div role="button" id="button-14"></div> 361 <div role="button" id="button-15" aria-label="Button:"></div> 362 <label>Button: </label><div role="button" id="button-16"></div> 363 <label for="button-17">Button: </label><div role="button" id="button-17"></div> 364 <label id="button-18-label">Button: </label><div role="button" id="button-18" aria-labelledby="button-18-label"></div> 365 <label>Radio label: <input type="radio" id="radiobutton-1"></label> 366 <input type="radio" id="radiobutton-2"> 367 <input type="radio" id="radiobutton-3" aria-label="Radio label:"> 368 <label>Radio label: </label><input type="radio" id="radiobutton-4"> 369 <label for="radiobutton-5">Radio label: </label><input type="radio" id="radiobutton-5"> 370 <label id="radiobutton-6-label">Radio label: </label><input type="radio" id="radiobutton-6" aria-labelledby="radiobutton-6-label"> 371 <div id="radiobutton-7" role="radio"></div> 372 <div id="radiobutton-8" aria-label="Radio label:" role="radio"></div> 373 <div id="radiobutton-9-label">Radio label: </div><div id="radiobutton-9" aria-labelledby="radiobutton-9-label" role="radio"></div> 374 <div role="menu"> 375 <div id="menuitemradio-1" role="menuitemradio">hello</div> 376 <div id="menuitemradio-2" role="menuitemradio"></div> 377 <div id="menuitemradio-3" role="menuitemradio"> </div> 378 </div> 379 <div role="grid"> 380 <div role="row"> 381 <div role="rowheader" id="rowheader-8">Toy Story 3</div> 382 <div role="rowheader" id="rowheader-9"></div> 383 <div role="rowheader" id="rowheader-10"> </div> 384 <div role="rowheader" id="rowheader-11" aria-label="Alladin"></div> 385 <div role="rowheader" id="rowheader-12" aria-label=""></div> 386 <div role="rowheader" id="rowheader-13" aria-label=" "></div> 387 <div role="rowheader" id="rowheader-14" aria-labelledby="columnheader-7-label"></div> 388 </div> 389 </div> 390 <label>Slider label: <input type="range" id="slider-1"></label> 391 <input type="range" id="slider-2"> 392 <input type="range" id="slider-3" aria-label="Slider label:"> 393 <label>Slider label: </label><input type="range" id="slider-4"> 394 <label for="slider-5">Slider label: </label><input type="range" id="slider-5"> 395 <label id="slider-6-label">Slider label: </label><input type="range" id="slider-6" aria-labelledby="slider-6-label"> 396 <div id="slider-7" role="slider"></div> 397 <div id="slider-8" aria-label="Slider label:" role="slider"></div> 398 <div id="slider-9-label">Slider label: </div><div id="slider-9" aria-labelledby="slider-9-label" role="slider"></div> 399 <label>Spin button label: <input type="number" id="spinbutton-1"></label> 400 <input type="number" id="spinbutton-2"> 401 <input type="number" id="spinbutton-3" aria-label="Spin button label:"> 402 <label>Spin button label: </label><input type="number" id="spinbutton-4"> 403 <label for="spinbutton-5">Spin button label: </label><input type="number" id="spinbutton-5"> 404 <label id="spinbutton-6-label">Spin button label: </label><input type="number" id="spinbutton-6" aria-labelledby="spinbutton-6-label"> 405 <div id="spinbutton-7" role="spinbutton"></div> 406 <div id="spinbutton-8" aria-label="Spin button label:" role="spinbutton"></div> 407 <div id="spinbutton-9-label">Spin button label: </div><div id="spinbutton-9" aria-labelledby="spinbutton-9-label" role="spinbutton"></div> 408 <div id="switch-1" role="switch"></div> 409 <div id="switch-2" aria-label="hello" role="switch"></div> 410 <div id="switch-3-label">hello</div><div id="switch-3" aria-labelledby="switch-3-label" role="switch"></div> 411 <label for="switch-4">hello</label><div id="switch-4" role="switch"></div> 412 <label>hello<div id="switch-5" role="switch"></div></label> 413 <label>Meter label: <meter id="meter-1"></meter></label> 414 <meter id="meter-2"></meter> 415 <meter id="meter-3" aria-label="Meter label:"></meter> 416 <label>Meter label: </label><meter id="meter-4"></meter> 417 <label for="meter-5">Meter label: </label><meter id="meter-5"></meter> 418 <label id="meter-6-label">Meter label: </label><meter id="meter-6" aria-labelledby="meter-6-label"></meter> 419 <div id="meter-7" role="meter"></div> 420 <div id="meter-8" aria-label="Meter label:" role="meter"></div> 421 <div id="meter-9-label">Meter label: </div><div id="meter-9" aria-labelledby="meter-9-label" role="meter"></div> 422 <button aria-pressed="true" id="togglebutton-1" >hello</button> 423 <button aria-pressed="true" id="togglebutton-2"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" /></button> 424 <button aria-pressed="true" id="togglebutton-3"></button> 425 <button aria-pressed="true" id="togglebutton-4"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="" /></button> 426 <button aria-pressed="true" id="togglebutton-5"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="hello" /></button> 427 <button aria-pressed="true" id="togglebutton-6"> </button> 428 <label>Button: <button aria-pressed="true" id="togglebutton-7"></button></label> 429 <button aria-pressed="true" id="togglebutton-8" aria-label="Button:"></button> 430 <label>Button: </label><button aria-pressed="true" id="togglebutton-9"></button> 431 <label for="togglebutton-10">Button: </label><button aria-pressed="true" id="togglebutton-10"></button> 432 <label id="togglebutton-11-label">Button: </label><button aria-pressed="true" id="togglebutton-11" aria-labelledby="togglebutton-11-label"></button> 433 <label>Button: <div role="button" aria-pressed="true" id="togglebutton-12"></div></label> 434 <label id="togglebutton-13-label">Button: <div role="button" aria-pressed="true" id="togglebutton-13" aria-labelledby="togglebutton-13-label"></div></label> 435 <div role="button" aria-pressed="true" id="togglebutton-14"></div> 436 <div role="button" aria-pressed="true" id="togglebutton-15" aria-label="Button:"></div> 437 <label>Button: </label><div role="button" aria-pressed="true" id="togglebutton-16"></div> 438 <label for="togglebutton-17">Button: </label><div role="button" aria-pressed="true" id="togglebutton-17"></div> 439 <label id="togglebutton-18-label">Button: </label><div role="button" aria-pressed="true" id="togglebutton-18" aria-labelledby="togglebutton-18-label"></div> 440 <span id="toolbar-1" role="toolbar" aria-label="Toolbar"></span> 441 <span id="toolbar-2" role="toolbar"></span> 442 <p id="toolbar-3-label"></p> 443 <span id="toolbar-3" role="toolbar" aria-labelledby="toolbar-3-label"></span> 444 <p id="toolbar-4-label">Toolbar</p> 445 <span id="toolbar-4" role="toolbar" aria-labelledby="toolbar-4-label"></span> 446 <svg id="svg-1" role="img" viewbox="0 0 100 10" height="10px"> 447 <title id="siteLogoTitle">Site Logo</title> 448 <rect x="0" y="00" width="100" height="10" fill="red"></rect> 449 </svg> 450 <svg id="svg-2" viewbox="0 0 100 10" height="10px"> 451 <title id="siteLogoTitle">Site Logo</title> 452 <rect x="0" y="00" width="100" height="10" fill="red"></rect> 453 </svg> 454 <svg id="svg-3" role="img" viewbox="0 0 100 10" height="10px"> 455 <rect x="0" y="00" width="100" height="10" fill="red"></rect> 456 </svg> 457 <svg id="svg-4" viewbox="0 0 100 10" height="10px"> 458 <rect x="0" y="00" width="100" height="10" fill="red"></rect> 459 </svg> 460 <svg id="svg-5" aria-label="foo" viewbox="0 0 100 10" height="10px"> 461 <rect id="svg-6" aria-label="bar" x="0" y="00" width="100" height="10" fill="red"></rect> 462 </svg> 463 <svg id="svg-7" viewbox="0 0 100 10" height="10px"> 464 <title id="siteLogoTitle">Site Logo</title> 465 <rect id="svg-8" aria-label="foo" x="0" y="00" width="100" height="10" fill="red"></rect> 466 </svg> 467 <svg id="svg-9" role="img" viewbox="0 0 100 10" height="10px"> 468 <title id="siteLogoTitle">Site Logo</title> 469 <rect aria-label="foo" id="svg-10" x="0" y="00" width="100" height="10" fill="red"></rect> 470 </svg> 471 <svg id="svg-11" role="img" viewbox="0 0 100 10" height="10px"> 472 <rect aria-label="foo" id="svg-12" x="0" y="00" width="100" height="10" fill="red"></rect> 473 </svg> 474 </body> 475 </html>