A modal displays important information to a user without requiring them to navigate to a new page.
Keyboard and mouse users shouldn’t be able to interact with the rest of the page outside of an open modal. Set initial focus on the first focusable element in the modal. The user should be able to Tab to any interactive elements within the modal and use Tab + Shift to move backward through interactive elements. Keyboard users should be able to leave the modal by pressing Esc and focus should return to the element that invoked the modal.
Screen reader users shouldn’t be able to interact with the rest of the page outside an open modal. Add alternative text for any images or non-textual buttons (like icon buttons). Images should use the alt attribute:
aria-label is most common to label icon buttons. Write a clear headline that describes the modal, and be sure to follow our modal content guidelines to clearly communicate information contained within it.
Bear in mind that any components placed inside the modal should also follow that component’s accessibility requirements.
To make modal accessible:
- If you don’t use a title in your modal, add an
aria-labelto give the modal an accessible name. It will look like `aria-label=”[title of modal]” on the AboutModal and will appear directly on the class .pf-c-about-modal-box.
aria-describedbyfor any description you add to the modal.
The following props can be added or are customizable in PatternFly:
Which HTML element it appears on in markup
Id to use for Modal Box descriptor
Accessible descriptor of modal (use if no title)
Id to use for Modal Box label (use if no title)
Simple text content of the Modal Header, also used for aria-label on the body
Optional title label text for screen readers
View source on GitHub