Add Delivery Address

Add Delivery Address

Street:

City:

State:

Zip:

Special instructions: For example, gate code or other information to help the driver find you

Verify AddressAddCancel

Verification Result

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.

link to helpaccepting an alternative formClose

Address Added

The address you provided has been added to your list of delivery addresses. It is ready for immediate use. If you wish to remove it, you can do so from your profile.

OK

End of the Road!

You activated a fake link or button that goes nowhere! The link or button is present for demonstration purposes only.

Close