This post is part of RSS Club, rewarding those who still use RSS to read and/or share content. These posts are embargoed from my regular post feed and the socials for an arbitrary period of time. You can see all the RSS-only posts at AdrianRoselli.com/category/RSS. Tell your friends (to get…
TL;DR: Be careful when using the word grid on its own. Be certain you have chosen the term that accurately describes the pattern you want. If this post looks familiar to you, that is because it is essentially a redress of my 2023 post Be Careful Using ‘Menu’. It is…
If you want something done right, post it wrong. In the long history of the innertubes, if you ask for help with code you typically won’t get much of a response. But if you post code and assert it is ideal and perfect and an immutable reflection of your pristine…
Just another usability and accessibility pro telling authors not to do the thing they continue to do. It’s Ok to Disable Buttons There are plenty of cases where you want to disable a button until a user takes a conscious action to enable it, such as when launching nuclear missiles.…
There are plenty of use cases for embedding third-party content on a site, as well as local content that may not be in HTML. Perhaps you gave a talk and want to share your slides. Sometimes you want to reference a video that exists only on YouTube. Maybe you have…
TL;DR: When deleting something you should generally move focus to the prior equivalent control or its grouping container. Why This Is a Thing Plenty of user interfaces let users delete things that are on the screen. It may be an extra address, a calendar item, a message (the same as…
Does what it says on the tin. Uses <details> and <summary> with a bit of ARIA to create an accordion that works without JavaScript while working better with JavaScript. Mostly. See the Pen Progressively Enhanced HTML Accordion by Adrian Roselli (@aardrian) on CodePen. Visit the standalone version for testing or…
When I wrote Under-Engineered Text Boxen in 2019 I mentioned <datalist> (WHATWG, MDN) but did not dwell on it. Partly because support was poor at the time. Once Can I Use’s <datalist> entry listed Firefox on Android supporting it in version 110, I got excited and started testing to write…
TL;DR: Be careful when using the word menu. Be certain you have chosen the term that accurately describes the control you want. If this post looks familiar to you, that is because it is essentially a redress of my 2020 post Stop Using ‘Drop-down’. It is not as divergent as…
Others in this sorta-series: Under-Engineered Custom Radio Buttons and Checkboxen Under-Engineered Toggles Under-Engineered Toggles Too Under-Engineered Text Boxen Under-Engineered Responsive Tables Under-Engineered Select Menus Under-Engineered Dependency Questions This post is not about <select multiple> nor a bunch of <div>s roled-up into a listbox with aria-multiselectable. Both the APG examples and…
Keyboard interaction note for just one control from the entire panoply of HTML controls: A native <button> fires on key down when that key is Enter. If you hold down the Enter key, it continues to fire for as long you hold Enter (or something crashes). A native <button> fires…
The required set of radio buttons. The white whale to many a developer who is trying their darnedest to ensure they are conveyed accessibly while not also making it sound like every individual radio button must be toggled. 1961 Cadillac Wonderbar dashboard radio by Nicholas Lucien (cropped). CC BY 2.0.…