An accessible sortable table is not necessarily the same as a usable sortable table. Outline: Basics Let The User Know This Thing Has Sorted Screen Reader Announcement Sort Arrows Column Background Let The User Know This Thing Sorts SVGs Layout Windows High Contrast Mode Screen Readers <caption> Sort Hint aria-describedby…
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…
On Friday, 12 February, at the request of Chancey Fleet I joined a call accessiBe set up with her. I have made it a point to only engage accessiBe publicly and with publicly available information, declining invitations from accessiBe in the past. Michael Hingson, formerly of Aira, had recently joined…
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…
If someone approaches you claiming they can make your web site WCAG compliant for just $1,000, they are lying to you. Granted, you may have a one-page site where the only problem is some contrast, in which case sure, $1,000 might be more than enough. Adapted from “Cape Fear Discount…
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…
This is why you never go to the (locally- and independently-owned) grocery store on an empty stomach. Web developers around the world have celebrated Saturnalia solstice Isaac Newton’s birthday Christmas with advent calendars covering web-related topics. As a result, you may recognize some of the ones listed below. Every year…
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,…
Let’s establish something first — auto-generated captions are a problem. They almost guarantee a WCAG failure and can leave users more confused (or offended) than when they started. YouTube creates the transcript from the closed captions of a video (the text that overlays the video, as opposed to burned-in or…