Meet the New Dialog Element
Move over, JavaScript alerts; HTML dialogs are here.
Creating An Accessible Modal Dialog
In the same vein as Hugo’s script, Ire walks through the steps involved in making an accessible modal window. Seeing all the thinking and code required for this really highlights the need for a way of making the document in the background inert.
Related links
An Image Dialog Web Component
Here’s an HTML web component that uses progressive enhancement for a very common use case: clicking a thumbnail image to view the full size image in an overlay. Just be sure to update the code to include an alt attribute before using this in production!
80 / 20 accessibility · marcus.io
So my observation is that 80% of the subject of accessibility consists of fairly simple basics that can probably be learnt in 20% of the time available. The remaining 20% are the difficult situations, edge cases, assistive technology support gaps and corners of specialised knowledge, but these are extrapolated to 100% of the subject, giving it a bad, anxiety-inducing and difficult reputation overall.
The Web Accessibility Cookbook
Manu’s book is available to pre-order now. I’ve had a sneak peek and I highly recommend it!
You’ll learn how to build common patterns written accessibly in HTML, CSS, and JavaScript. You’ll also start to understand how good and bad practices affect people, especially those with disabilities.
Home - Sa11y
Another handy accessibility testing tool that can be used as a bookmarklet.
Related posts
Applying the four principles of accessibility
Here’s how I interpret the top-level guidance in the Web Content Accessibility Guidelines.
Performative performance
When it comes to sustainable web design, the hard work is invisible.
The intersectionality of web performance
Business, sustainability, and inclusivity.
Assumption
Separate your concerns.
Alt writing
Aiming for originality and creativity in alt text.