Day 41: Coding a Custom Modal
Thing I accomplishedPermalink for "Thing I accomplished"
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 I learned todayPermalink for "What I learned today"
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!
Resources I leaned heavily on todayPermalink for "Resources I leaned heavily on today"
- Modal Dialog Example (W3C)
- Support Keyboard Interaction (Harvard University)