Day 41: Coding a Custom Modal

Published on 10 Jan 2019

• journal
• was
• javascript
• patterns
• techniques
• widgets

Started coding a custom modal to experience for myself what effort has to go into it, and solidify what keyboard interactions and ARIA. It's far from fully accessible (or even pretty), but I've started work on CodePen, for those curious about how I'm working:

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

If the embed doesn't work, you can view my Accessible Modals on CodePen

Note: By the time some of you read this post, my project may be complete, yet others will see that focus has not been properly delegated to the inside of the modal and tabbing has not be restricted to stay within the modal.

What have I learned from this just in the hour I spent today?

• Well, for one, I sure think a well-supported dialog HTML element sure would make my life a lot easier!
• Making a checklist of what I needed to accomplish, based on expected keyboard interactions, really brought to light what needs to happen in the code.
• Keeping a mindset of mobile-first and progressive enhancement can really benefit in these situation of creating custom widgets.
• I was reminded that testing across browsers and platforms is important in this situation. I worked on my code from two different operating systems, same browser, and got different look and results my design and functionality.
• Esc == keycode 27
• Tab == keycode 9
• position="fixed" worked better on one platform than position="absolute", when making the modal cover the entire screen.
• If not for the people who coded and tested before me, I'm not sure if I'd be able to work through too many custom widgets for a website without them being inaccessible. Lots of love to the accessibility experts/coders out there!

• Modal Dialog Example (W3C)
• Support Keyboard Interaction (Harvard University)
• JavaScript Event KeyCodes (Wes Bos)