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
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.
What I learned today
The two things I hadn’t completed earlier involved:
- not allowing the user to Tab outside of the modal, and
- return focus back to the button that triggered the modal, once the modal is closed.
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!