Help is a Request Away

Search

Best Practices Around Modal Dialogs

  • Updated

Q: Can you share some best practices around modal dialogues and how they are read? 

A: You want to make sure that you are doing the ARIA roles correctly, the ARIA role of dialogue, you want to make sure there is a heading in there and the AIRA Labeled By is pointing at it so when a screen reader user reads that modal it will tell them what the modal is. The other thing that you need to make sure of is that your focus becomes trapped within the modal when it’s on the screen, you should not be able to play that modal on the screen and then go back to the main content of the page and interact with anything. You need to just say focused within that modal. You also need to make sure that it’s closable with keyboard as well as with the mouse.  

Was this article helpful?