Skip to content

Instantly share code, notes, and snippets.

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
><!-- content --></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment