Making Modals more accessible with WAI-ARIA

We have all encountered modals – those sometimes annoying pop-ups that require us to interact with them in some way before they will return us to the web page we really want to be on. Usually, these modals can be dismissed with a mouse click or with an interaction followed by a mouse click.

But modals have traditionally been a different story for users of screen readers. Mouse clicks are difficult at best and often impossible for users of screen reading technologies. In addition, users of screen readers have not always been able to discern when they were in modal windows.

Fortunately, proper semantic markup helps to make modals more accessible. But WAI-ARIA can be used to further enhance the accessibility of these pop-ups. Below are three techniques that can be applied to make modals very accessible to users of screen readers.

• Use the role=”dialog” attribute so that users of screen readers are informed that some communication with the modal is necessary.
• Use the role=”alertdialog” to let users of screen readers know that immediate communication is necessary with the modal, as in the case of an error message.
• Use the labelledby attribute to associate an ID with a heading on the modal. If the modal does not have a heading, use the label attribute to give the modal an ID that can be recognized by screen reading software.

Additionally, each modal should have a title attribute. This lets all users know the purpose of the modal dialog. For screen-readers, Aria labelled-by should be associated with the title to make sure it reads correctly.