Skip to content

Instantly share code, notes, and snippets.

@michaelschofield

michaelschofield/making-css-only-modal-a11y-ish.html

Created May 26, 2016 16:49
Show Gist options
  • Save michaelschofield/3486e9b71e9065766b501ff5e458545d to your computer and use it in GitHub Desktop.
Save michaelschofield/3486e9b71e9065766b501ff5e458545d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
making-css-only-modal-a11y-ish.html
<!-- Hi. This assumes the modal is mostly using CSS
for the whole pop-over effect. You really need javascript
to do two things: toggle aria-hidden="true" to "false" on open,
then focus the user on the modal and set the tabindex to the rest
of the <body> to -1. This captures the keyboard navigation and prevents
the user from accidentally tabbing out of the modal until he or she
closes the modal.
-->
<button class="button button--link" role="button">Modal Button</button>
<section aria-hidden="true" aria-labelledby="modal-label" aria-describedby="modal-content" class="modal semantic-content" id="test" role="dialog" tabindex="-1">
<div class="modal-inner">
<!-- Screen readers will read the content of this header -->
<header id="modal-label">
<h3>Hi, I'm a modal!</h3>
</header>
<!-- Then they will read the content of this modal, as long as its
short, like an alert.
-->
<div class="modal-content clearfix" id="modal-content">
<p>
Thanks for clicking on me.
</p>
</div>
</div>
<button class="modal-close" role="button">Close</button>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment