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.…
Got myself one of those Bonne Maman jelly/jam advent calendars and am very much looking forward to opening the first day and all subsequent days. Web developers around the world have given a nod to Saturnalia solstice Isaac Newton’s birthday Christmas with advent calendars covering web-related topics. As a result,…
Automated accessibility testing tools are rightly wary of giving false positives. You don’t want to flag something as an error in a test only to have the team rebuild an entire thing for no reason (never mind the risk of introducing errors). We know automated accessibility testing tools can really…
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…
TL;DR: Stop using the word pop-up. Instead choose a term that accurately describes the control you want. I encourage you to read my post Stop Using ‘Drop-down’, which provides the set-up for this post. Along with another term I would prefer everyone stopped using. As you embark on a design,…
Both Chrome and Firefox support XPath searches when in the DOM view of their dev tools. Because the browser cleans whatever HTML it encounters (closing tags, correcting nesting), XPath can operate on the code as XML. Simple checks like finding a unique ID value can result in multiple hits in…
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…
Thanks to a tweet from UCL Department of Mathematics, I am one of the many people who stumbled across Cistercian numerals and fell down the rabbit hole. To over-simplify, they are single glyphs that can each represent a number from 1 to 9,999 that were developed by Cistercian monks to…
Outline: Feature Queries Proprietary, or Internet Explorer Only Standards Track, or Edge Only Frankenquery’s Monster System Colors CSS2 System Color Keywords WHCM Proprietary Feature Query Color Mappings CSS4 System Color Keywords Browser Support Internet Explorer Legacy Edge (Ledgacy) Chromium Edge (Chromiedge) Firefox Chrome Examples Backgrounds Inline SVGs SVGs via <img>s…
You may rely on embedding tweets in your posts as a quick and easy way to quote or reference a person or subject. There are two challenges to relying on this, however: A tweet or account may be deleted or go private; The content may not be accessible to users…
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…
Many of my clients try to reduce the number of controls on a screen by replacing them with single controls that change their name based on their purpose (what they unironically call reducing complexity). For example, presenting a download button that also acts as its own progress indicator and completion…