100 Days of A11y

Day 49: Modal Completion

Published on

Back tracking to Day 41, I returned to the CodePen project I'd started in order to complete making it accessible. Due to unforeseen popularity of this pen (before I'd even completed it), I felt I needed to get all the pieces right.

Thing I accomplished

Permalink for "Thing I accomplished"

My pen now meets the requirements that need to happen for a dialog/modal to be accessible. I even ran a quick test with VoiceOver on Safari, as well as keyboard navigability.

See the Pen Accessible Modal by Amy (@digilou) on CodePen.

Accessible Modals on CodePen

What I learned today

Permalink for "What I learned today"

The two things I hadn't completed earlier involved:

It was the Tab trap that was getting me. I knew the Tab key was associated with key code 9, but it took me a bit to realize I needed to attach an event listener of keydown to the close button. That solved it!

As for returning focus, it was as simple as adding the focus method onto open button within my closeModal function. It worked!