Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#focusable-1 {
outline: none;
}
#focusable-2:focus {
outline: none;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="button-1" class="Button" tabindex="0">I should really be a button</div>
<div id="button-2" class="Button">I should really be a button</div>
<div id="input-container"><input id="input-1" type="text" tabindex="-1" /></div>
<input id="input-2" type="text" tabindex="-1" disabled />
<input id="input-3" type="text" disabled />
<input id="input-4" type="text" />
<a id="link-1">Though a link, I'm not interactive.</a>
<a id="link-2" href="example.com">I'm a proper link.</a>
<a id="link-3" href="#">Link 3</a>
<a id="link-4" href="">Link 4</a>
<button id="button-3">Button with no tabindex</button>
<button id="button-4" tabindex="-1">Button with -1 tabindex</button>
<button id="button-5" tabindex="0">Button with 0 tabindex</button>
<button id="button-6" tabindex="1">Button with 1 tabindex</button>
<div id="focusable-1" role="button" tabindex="0">Focusable with no focus style.</div>
<div id="focusable-2" role="button" tabindex="0">Focusable with focus style.</div>
<div id="focusable-3" role="button" tabindex="0">Focusable with focus style.</div>
<div id="mouse-only-1" onclick="console.log('foo');">Button for mouse only</div>
<div id="focusable-4" onclick="console.log('foo');" tabindex="0">Button no semantics</div>
<div id="button-7" onclick="console.log('foo');" role="button">Semantic button not focusable</div>
<div id="button-8" onclick="console.log('foo');" role="button" tabindex="0">Button</div>
<img id="img-1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text">
<img id="img-2" longdesc="https://example.com" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text">
<img id="img-3" longdesc="https://example.com" onclick="console.log('foo');" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text">
<img id="img-4" onclick="console.log('foo');" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text">
<button id="buttonmenu-1" aria-haspopup="true">I have a popup</button>
<div role="button" id="buttonmenu-2" aria-haspopup="true">I have a popup</div>
<input id="checkbox-1" type="checkbox" name="hello" />
<select id="listbox-1" size="2">
<option id="lb_orange">orange</option>
<option id="lb_apple">apple</option>
</select>
<select id="combobox-1"></select>
<select id="combobox-2"><option>One</option></select>
<select id="combobox-3">
<option id="cb_orange">orange</option>
<option id="cb_apple">apple</option>
</select>
<div id="editcombobox-1" role="combobox"><span role="option">One</span></div>
<span id="editcombobox-2"role="combobox"></span>
<span id="editcombobox-3"role="combobox" tabindex="0"></span>
<span id="switch-1" role="switch"></span>
<span id="switch-2" role="switch" tabindex="0"></span>
<div aria-label="Tag" role="combobox" aria-expanded="true" aria-owns="owned_listbox" aria-haspopup="listbox">
<input type="text" aria-autocomplete="list" aria-controls="owned_listbox" aria-activedescendant="selected_option">
</div>
<ul role="listbox" id="owned_listbox">
<li role="option">Zebra</li>
<li role="option" id="selected_option">Zoom</li>
</ul>
<label id="label-1">hello<input type="checkbox" name="world" /></label>
<label id="label-2" for="checkbox-1">hello</label>
<label id="label-3">hello</label>
<label id="label-4">hello</label><input type="checkbox" name="world" />
<a href="about:mozilla" target="_blank" rel="opener">
<img id="img-5" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text">
</a>
<a onmousedown="">
<img id="img-6" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text">
</a>
<a onclick="">
<img id="img-7" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text">
</a>
<a onmouseup="">
<img id="img-8" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text">
</a>
<section id="section-1" class="collapsible-section top-sites animation-enabled" aria-expanded="true"></section>
<main id="main" tabindex="-1">Main content</main>
<div id="not-keyboard-focusable-1" tabindex="-1">Not keyboard fqocusable with no focus style.</div>
<div id="grid-1" role="grid" aria-label="Interactive grid"></div>
<div id="grid-2" tabindex="0" role="grid" aria-label="Interactive grid"></div>
<div id="table-1" role="table" aria-label="Non-interactive ARIA table"></div>
<div id="table-2" tabindex="0" role="table" aria-label="Non-interactive ARIA table"></div>
<table id="table-3" aria-label="Non-interactive table"></table>
<table id="table-4" tabindex="0" aria-label="Non-interactive table"></table>
<div id="article-1" role="article"></div>
<div id="article-2" role="article" tabindex="0"></div>
<div role="grid" aria-label="Interactive grid">
<div id="columnheader-1" role="columnheader"></div>
<div id="rowheader-1" role="rowheader"></div>
<div role="row">
<div id="gridcell-1" role="gridcell"></div>
<div id="gridcell-2" role="gridcell" tabindex="0"></div>
</div>
</div>
<div role="table" aria-label="Non-interactive table">
<div id="columnheader-2" role="columnheader"></div>
<div id="rowheader-2" role="rowheader"></div>
</div>
<table>
<tr>
<th id="columnheader-3">Animals</th>
</tr>
<tr>
<th id="columnheader-4" tabindex="0">Hippopotamus</th>
</tr>
<tr>
<th id="rowheader-3">Horse</th>
<td>Mare</td>
</tr>
<tr>
<th id="rowheader-4" tabindex="0">Chicken</th>
<td>Hen</td>
</tr>
</table>
<table role="grid">
<tr>
<th id="columnheader-5">Animals</th>
</tr>
<tr>
<th id="columnheader-6" tabindex="0">Hippopotamus</th>
</tr>
<tr>
<th id="rowheader-5">Horse</th>
<td id="gridcell-3">Mare</td>
</tr>
<tr>
<th id="rowheader-6" tabindex="0">Chicken</th>
<td id="gridcell-4" tabindex="0">Hen</td>
</tr>
</table>
<div id="tablist-1" role="tablist"></div>
<div id="tablist-2" role="tablist" tabindex="0"></div>
<div id="scrollbar-1" role="scrollbar"></div>
<div id="scrollbar-2" role="scrollbar" tabindex="0"></div>
<div id="separator-1" role="separator"></div>
<div id="separator-2" role="separator" tabindex="0"></div>
<div id="toolbar-1" role="toolbar"></div>
<div id="toolbar-2" role="toolbar" tabindex="0"></div>
<div id="menu-1" role="menu"></div>
<div id="menu-2" role="menu" tabindex="0"></div>
<div id="menubar-1" role="menubar"></div>
<div id="menubar-2" role="menubar" tabindex="0"></div>
</body>
</html>