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.
