Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A proper way to create an accessible modal dialog element (a11y). This gist is only about the wrapper element, the links in the comment describe all necessary steps in detail.
<!--
A tabindex="-1" allows an element to receive programmatic focus.
This is useful a modal dialog window: when opened, focus should be set to the dialog so a screen reader
will begin reading and the keyboard will be able to navigate within the dialog.
Because the dialog (probably a <div> element) is not focusable by default, assigning it tabindex="-1"
allows scripting to set focus to it when it is presented
Resources:
https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box#Note_on_focus_management
https://webaim.org/techniques/keyboard/tabindex
-->
<div
tabindex="-1"
role="dialog"
aria-labelledby="myDialog"
><!-- content --></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment