On 7 April 2022, Twitter added a feature to let all web users display the alternative text on images in tweets. I am glad to see this feature in the wild for everyone. It has some issues, however, which complicate the experience for sighted keyboard users. The following video demonstrates…
Honoring April Fools’ Day I have created a foolishly responsive accordion control. Typically a responsive effort shoehorns a large pattern into a narrow viewport, often based on iDevice screen sizes. Less typically a responsive layout will also consider viewport height, and far less typically a responsive layout might even consider…
This block of code came across my Twitter timeline today framed as a CSS tip to prevent text selection on a web page: html { user-select: none; } For funsies, I dropped that CSS on this very page you are reading (assuming you are reading it in the browser). It…
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.…
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 Select Menus A common interface pattern allows users to choose one item from a pre-defined set of choices, while still allowing them to add a custom selection if nothing else fits.…
The title of this post is pretty specific. It relates to the meme on Twitter where users identify a trait or preference that they see as problematic, and identify it as a red flag. The emoji represents the red flag. For example: A stylized red flag Blaming Screen Readers 🚩🚩🚩🚩🚩…
Whether you call them sentence forms, narrative forms, fill-in-the-blank forms, or Mad Libs forms, you are probably describing a form where the fields are interspersed within words in a sentence. Unlike more traditional forms, laid out with simple pairings of labels and fields, these forms are meant to be read…
Though JS-free fixed table row and column headers have been possible for quite some time, Safari’s and Chrome’s recent fixes got some people pretty excited. Enough that folks are copying code samples in whole, without always paying attention to necessary considerations. That same excited demo included other CSS properties that…
Form ever follows function. Louis Sullivan Louis Sullivan, the father of the modern skyscraper, espoused this belief throughout his work. He recognized that the purpose of the building, when entering a place with no prior art, had to drive how it would look. With both the technology and audience providing…
Others in this sorta-series: Under-Engineered Custom Radio Buttons and Checkboxen Under-Engineered Toggles Under-Engineered Toggles Too Under-Engineered Text Boxen I am still confounded how many developers and designers see a <select> and immediately reach for a library or framework to re-create the features from the ground up. Though, frankly, I am…
Table of Contents Example The HTML Live Region Button Decoration Accessible Name The Styles Hide the Live Region Color and Contrast Active Animations Text Resize and Reflow Windows High Contrast Mode The Script The Click Event Manipulate Outcomes Screen Reader Output WCAG Success Criteria What This Does Not Do Wrap-up…
I had this post queued up for Halloween because, come on, skeletons, and then life did its thing and now it is a … Thanksgiving post? Many skeleton patterns do a poor job presenting themselves to screen reader users in any meaningful way. They often stuff aria-busy into their widget,…