This is just a demonstration. If it were a real application, it would provide a message telling whether the entered address is valid.

For demonstration purposes, this dialog has a lot of text. It demonstrates a scenario where:

• The first interactive element, the help link, is at the bottom of the dialog.
• If focus is placed on the first interactive element when the dialog opens, the validation message may not be visible.
• If the validation message is visible and the focus is on the help link, then the focus may not be visible.
• When the dialog opens, it is important that both:
  • The beginning of the text is visible so users do not have to scroll back to start reading.
  • The keyboard focus always remains visible.

There are several ways to resolve this issue:

• Place an interactive element at the top of the dialog, e.g., a button or link.
• Make a static element focusable, e.g., the dialog title or the first block of text.

Please DO NOT make the element with role dialog focusable!

• The larger a focusable element is, the more difficult it is to visually identify the location of focus, especially for users with a narrow field of view.
• The dialog has a visual border, so creating a clear visual indicator of focus when the entire dialog has focus is not very feasible.
• Screen readers read the label and content of focusable elements. The dialog contains its label and a lot of content! If a dialog like this one has focus, the actual focus is difficult to comprehend.

In this dialog, the first paragraph has tabindex= -1 . The first paragraph is also contained inside the element that provides the dialog description, i.e., the element that is referenced by aria-describedby . With some screen readers, this may have one negative but relatively insignificant side effect when the dialog opens -- the first paragraph may be announced twice. Nonetheless, making the first paragraph focusable and setting the initial focus on it is the most broadly accessible option.