Accessibility

Aims to provide the same user experience for all.

Overlays

1. Modal & Alert

Be sure to add aria-labelledby="id...", referencing the modal title, to the Modal.

Additionally, you may give a description of your modal with the aria-describedby="id..." prop on the Modal.

The modal does not need aria-describedby if there is no static text that describes it.

<Modal aria-labelledby="modal-title" aria-describedby="modal-description">
  <h2 id="modal-title">My Title</h2>
  <p id="modal-description">My Description</p>
</Modal>

The WAI-ARIA authoring practices can help you set the initial focus on the most relevant element, based on your modal content.

Keep in mind that a "modal window" overlays on either the primary window or another modal window. Windows under a modal are inert. That is, users cannot interact with content outside an active modal window. This might create conflicting behaviours.

Read More

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#dialog_modal)

https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role