A Page for Testing Programmatic Focus

Focusable Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at beatae ea eum ipsum iste laboriosam laudantium magnam molestias quibusdam repellat, saepe voluptatibus? Ad aspernatur dolore magni nostrum ullam voluptatem!

I am a focusable paragraph.

I am a focusable paragraph with an underlined span in me.

The full text of the paragraph below, with brackets around the hidden accessible text bits, is: “[I am hidden accessible text in a span,] and I am visible text in a span [containing some accessible text] in a focusable paragraph.”

I am hidden accessible text in a span, and I am visible text in a span containing some accessible text in a focusable paragraph.

The full text of the paragraph below, with brackets around the hiddent accessible text bits, is: “I am focusable visible text in a paragraph. This next sentence, though, ends with some hidden accessible text [and I am that hidden screen-reader only text.”

I am focusable visible text in a paragraph. This next sentence, though, ends with some hidden accessible text and I am that hidden screen-reader only text.

Heading Inside a Focusable Region Set as Name Using ARIA-Labelledby

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio doloribus eum facilis iure laborum laudantium necessitatibus quam quisquam, reiciendis tempora tempore veritatis vitae voluptas? Architecto cumque facilis nemo nesciunt sit.

I am a button that does nothing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci beatae blanditiis commodi consequatur cupiditate eos harum id incidunt inventore iste laudantium modi neque provident saepe sed tempora, tenetur totam voluptates.

Controls for Focusing Elements

Beyond the skip-to links at the top of the page, the buttons below force focus to various elements, and you can set most of these to be focused when the page is reloaded from the button after the select.

Focus the link at top of page
Focus the button in the header
Focus the empty exclamation icon button in the header
Focus the exclamation icon button in the header, where the button gets its name from hidden accessible text contents
Focus the button containing multiple child nodes
Focus the focusable heading containing multiple text nodes
Focus focusable faux alert message (and get ready for double-reading on down arrow in NVDA...)
Focus focusable the alternative text for the alert icon in the faux alert message
Focus the “Focusable Heading”
Focus a paragraph
Focus a paragraph containing a span that is styled underline
Focus a span set to be hidden accessible text
Focus a paragraph which is half hidden accessible text and half visible text, both wrapped in spans
Focus a paragraph that begins with plain text and ends with hidden accessible text
Focus the focusable region labeled using ARIA labelledby which points to the heading. Div contains button interactive content.
Focus the div labeled using an ARIA label. Div contains link interactive content.
Focus the div labeled using an ARIA label. Div contains tabindex interactive content.
Focus a deeply nested span
Focus a link in the table
Focus focus a superscript in a link in the table
Focus a data element in the table
Focus focus a data element in the table, which contains CSS generated content
Focus the focusable div labeled using ARIA labelledby with points to the heading. Div contains NO interactive content.
Focus the focusable section labeled using ARIA label. Div contains NO interactive content.
Focus a text input in the footer
Focus the label for a text input in the footer
Focus the link in the footer
Scroll to and focus a dynamically added alert at the top of the page
Scroll to and focus some text element in a dynamically added alert at the top of the page
Scroll to and focus some screen-reader hidden text element in a dynamically added alert at the top of the page
Focus heading in shadow DOM widget
Focus heading's span in shadow DOM widget
Focus button in shadow DOM widget
Focus button with nesting in shadow DOM widget
Create new widget and focus its heading
Create new widget and, after a delay, focus its heading
Create new widget and focus a button in it
Change the heading of the widget and focus it
Choose what to focus on page reload
make a selection link at top of page button in the header focusable heading containing multiple text nodes focusable heading focusable paragraph focusable paragraph containing a span focusable span set to be hidden accessible text focusable paragraph with hidden text and visible text focusable paragraph that ends with hidden text focusable region using aria-labelledby (button interactive content) focusable div using aria-label (link interactive content) focusable div using aria-label (tabindex interactive content) focusable deeply nested span link in the table focusable superscript in a link in the table focusable data element in the table focusable data element in the table, which contains CSS generated content focusable div using aria-labelledby (no interactive content) focusable section using aria-label (no interactive content) text input in the footer label for text input in the footer link in the footer Reload page

To test if the setting of tabindex on target elements is affecting results, you can remove all instances of tabindex on target elements by un-checking the checkbox below and clicking the button. Put tabindex back by checking the box and pressing the button again.

Targets have tabindex=−1 Set tabindex −1 status on all targets

Heading in a Focusable DIV Named by ARIA-Label, With Interactive Content of Link

Lorem ipsum dolor sit amet, consectetur adipisicing elit a link to nowhere embedded in this paragraph. Assumenda dolorem fuga itaque, molestiae perspiciatis qui. Aliquid commodi dicta dolor doloremque, eius in ipsum magnam, nam nulla quae, quo sapiente sit.

Heading in a Focusable DIV Named by ARIA-Label, With Interactive Content via Tabindex

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores dicta eligendi eveniet maiores mollitia! I am tab focusable and role=link, though technically not interactive. Ab culpa doloremque inventore itaque laborum molestias officia saepe sed ullam vero! Deserunt exercitationem in qui.

Heading for a DIV That Has a “Deeply Nested” Element in It

Table with focusable elements in it

Header Col 1	Header Col 2 a link with a superscript ™	Header Col 3
Data Row 2 Col 1	Data Row 2 Col 2	Data Row 2 Col 3 (focusable)
Data Row 3 Col 1 (focusable and	Data Row 3 Col 2	Data Row 3 Col 3

A Heading in a Focusable DIV No Interactive Content, Named by Heading Using ARIA-Labelledby

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam cupiditate dicta dignissimos, dolore dolorem excepturi id labore maiores minima modi nemo quas quasi quidem quisquam reiciendis rem sequi. Omnis.

• Lorem
• Ipsum
• Dolor
• Sit