What Elements Are Focusable?

This document is a testing ground to identify what a browser deems focusable and tabbable.

At first the document will add focus event handlers to every descendant of <body>. It will then try to .focus() every element to identify which elements satisfiy Focus Managemenet. After that you - the user - can hit TAB a couple of times (like 250 or something) to determine the browser's natural tabbing order

go to results

iOS Form Element Navigation

Form Control Elements

Disabled Form Control Elements

Label Element

Form Element

Fieldset Element

legend
legend
link link
legend
legend
legend
legend link

Navigation Elements

link link link link span with href attribute (invalid html)

Microdata Link

Image Maps

two clickable areas two clickable areas two clickable areas two clickable areas no map associated two clickable areas two clickable areas not a valid image

Image Maps With Coordinates

clickable anywhere clickable anywhere clickable anywhere

Browsing Contexts

Shadow DOM

Interactive Content

Scrollable Content

scrollable content
scrollable content
scrollable content
scrollable content
scrollable content
scrollable content
scrollable content
scrollable content
scrollable content
non overflowing content
non overflowing content
overflowing content
overflowing content
overflowing content
overflowing content
non overflowing content

Details/Summary

Collapsed Details link
Collapsed Details link
Collapsed Details link
Expanded Details link

Object

regular

with tabindex

with negative tabindex

without height

hidden

display none

SVG

a link just text, no link

svg with negative tabindex

a link just text, no link

svg with focusable="false"

a link just text, no link

svg with contradicting focusable and tabindex

just text, no link
just text, no link

tiny profile focusable="false"

a link a link just text, no link

svg with viewbox

svg containing negative tabindex

a link just text, no link

tiny profile

tiny profile focusable="false"

visibility hidden SVG

a link just text, no link

display none SVG

a link just text, no link

SVG foreignObject

svg with foreignObject content

Here is a paragraph that requires word wrap

Here is a paragraph that requires word wrap

svg with switch content

Here is a paragraph that requires word wrap

Here is a paragraph that requires word wrap.

SVG use

link t t t link t t t t t t t t

Editing Hosts

foo
foo

Tabindex

tabindex -2
tabindex -1
tabindex 0
tabindex 1
tabindex +2
tabindex +2

Invalid Tabindex

empty tabindex
tabindex hello
tabindex 3
tabindex 3x

Menu and Menuitems

No browser hast implemented <menu type="toolbar"> yet, so testing this now won't make a difference.

hidden attribute

CSS visibility

link link
link
link
cell cell
cell cell
cell link
link link link

CSS display

link link
link

CSS flexbox

link
inert focusable tabbable
inert focusable tabbable

CSS user-modify

hello world hello world

children of canvas element

hello hello hello hello

go to top

Results