Rather than continuing to update this post (where this would have been the 6th time I made some major revisions to the text) please instead see my updated ...
Spoiler alert: tooltips, modals, tabs, carousels, and dropdown menus are some of the user interface components that require more than CSS. To ensure accessibility of your interface, JavaScript is a necessary addition to accomplish focus management, respond to keyboard events, and toggle ARIA attributes.
Learn how to use the HTML dialog element to create accessible modal dialogs for your web sites and applications.
Creating an accessible dialog on the web is trickier than it should be. Lack of support for the <dialog> element, the need for fundraisers to get inert into WebKit, inconsistent support for the ARIA dialog role, and other annoyances make them problematic. Scott O’Hara has spent a few years covering…
I learned something this week and I thought I would share it. Earlier this year I read Adrian Roselli’s post “Details/Summary are not [insert control here]”. In this post Adrian says <details> is not a tab set, it’s not a subnavigation menu, not a dialog, not an accordion, not a … wait, what? Not an accordion‽⁈
This article is the second of two parts about a guide to making websites accessible to keyboard users. Here Cristian Diaz covers a toolset on JavaScript that you can mix into different components to create a great experience for keyboard users.
A collection of notes on accessibility topics at work.
Once major browsers started supporting <details> & <summary> developers immediately started to play with them to see what sorts of patterns they could enhance or replace. This is a good thing. Experimentation pushes boundaries, improves understanding. However, we need to be careful of christening this new-to-us interaction as the solution…
This newsletter issue was sent out to 180,930 subscribers on Tuesday, February 23, 2021.
Helsinki recently launched the City as a Service campaign. This post explores how to make it more accessible.
The personal website of Dan Cătălin Burzo.
Accessibility chapter of the 2020 Web Almanac covering ease of reading, media, ease of navigation, and compatibility with assistive technologies.
CSS Custom Properties can be used for far more than just color, and their values update in realtime, both via display mode updates and JavaScript logic. This is powerful stuff. Eric explains how modern CSS is a powerful piece of assistive technology that can thread into it to create flexible, maintainable and adaptive digital experiences.
I’ve always abided in the idea that “HTML is accessible by default and then we come along and mess it up.” In a lot places this is very true and by just using a suitable HTML element instead of a generic div or span we can have a big Accessibility impact.
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered CSS Auditing Tools and CSS Generators, and this time we look into reliable accessible components: from tabs and tables to toggles and tooltips. We sincerely hope that these tools and techniques will prove to be useful in your day-to-day work — and most importantly help you avoid some time-consuming, routine tasks.
The native HTML <dialog> element has come a long way. While it used to be very inconsistent, not to mention somewhat unfinished, it is now in a pretty healthy place and can generally be used — provided one is aware of the remaining caveats.
A deep dive into the semantics, behaviours and characteristics of some of the most common user interface elements of websites today.
Yesterday, we recorded a JS Jabber episode (I’m a co-host on the show) with Chris DeMars. (It comes out in a month or two.) Chris has a strong focus on performance and web accessibility, and at one said something to the effect of: Building websites that are accessible is your moral obligation as a web developer. I expected everyone to nod in agreement, but to my surprise, a few of my co-hosts actually disagreed with this position.
Dialogs are everywhere in modern interface design (for good or for bad), and yet many of them are not accessible to assistive technologies. In this post, Kitty Giraudel is going to write a small JavaScript library for authoring accessible dialogs from the very beginning. The goal is to understand what goes into it. She’s not going to deal with styling too much, just the JavaScript part.
A retrospective post about my year 2021, and what I have accomplished
How I retrofitted my portfolio to be more accessible.
Please just make a new page.