skip to focusable div containing H1 heading, paragraphs and a button (target has no set tabindex)
skip to focusable heading (target is tabindex -1)
skip to focusable region labeled using labelledby that points to heading (target is tabindex -1 and div contains button interactive content)
skip to focusable div labeled using aria label (target is tabindex -1 and div contains link interactive content)
skip to focusable div labeled using aria label (target is tabindex -1 and div contains tabindex interactive content)
skip to focusable div labeled using aria labelledby that points to a heading (target is tabindex -1 and div contains no interactive content)
skip to focusable div labeled using aria label (target is tabindex -1 and div contains no interactive content)
hidden accessible skip to focusable heading (target is tabindex -1)
visible-on-focus skip to main content
skip from a single, focusable superscript number 9 to a superscript character in a link (target is tabindex -1)
skip from a single, focusable superscript number 7 to a link that also contains a superscript character

(There are nine visible, one non-visible but accessible, and one visible-on-focus skip links above.)

A Page for Testing Programmatic Focus

This page is a place to test how browsers and screen readers handle setting focus to static and dynamically loaded elements within a page and on page load.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam aut debitis eaque, fuga nam nisi nobis nostrum optio provident quas quidem rem reprehenderit voluptatibus voluptatum. Blanditiis est perspiciatis suscipit.

And below a button whose name is derived from aria-label but whose exclamation icon contents are inaccessible:

And below this a button that looks the same as the one above but which gets its name not from aria-label but from hidden accessible text contents:

Important: A faux alert, where icon is nested in a div, with a nested set of spans. First span is only screen reader accessible. Both spans, individually, have tabindex="-1"

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.

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.




































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.

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

Some text and
some more text
and some more
  • and a list item
  • and and another
    with a DIV wrapping
    a DIV and some span text with more span text and finally the focusable text and some text after it and some more text wedged in
    along with some stuff following that
  • and another list item
and text in a wrapping DIV
and text in the DIV that wraps 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

Heading in a Focusable SECTION Containing No Interactive Content, Named Using ARIA Label

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab blanditiis deleniti dignissimos doloribus eligendi molestias numquam rem sit. Dolore ducimus est fugiat harum quae quis quod reiciendis unde veniam voluptas!

  • Lorem
  • Ipsum
  • Dolor
  • Sit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, architecto, laborum. Architecto aspernatur beatae corporis doloribus esse ipsum odit, perferendis quis temporibus. Cupiditate eaque facilis porro provident sit tenetur veritatis.