Skip to content.
Adrian Roselli AI-Powered Monetization Platform SME

All Posts

Sub-$1,000 Web Accessibility Solution

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…

Posted:

Tags: accessibility

Bulletproofing Embedded Tweets

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…

Posted:

Tags: accessibility, html, social media, Twitter

Multi-Function Button

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…

Posted:

Tags: accessibility, ARIA, css, html, JavaScript, pattern, usability, UX, WHCM

Be Careful with Dynamic Accessible Names

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…

Posted:

Tags: accessibility, ARIA, html, UX, WCAG

Web Development Advent Calendars for 2020

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…

Posted:

Tags: accessibility, css, design, html, internet, standards, UX

More Accessible Skeletons

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,…

Posted:

Tags: accessibility, css, html, pattern, usability, UX

Don’t Rely on YouTube Transcripts

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…

Posted:

Tags: accessibility, video, WCAG

Under-Engineered Responsive Tables

I have written a bunch about responsive tables. Maybe too much. I keep trying to give developers the information they need to make informed decisions — ARIA attributes, screen reader & browser pairing results, bugs, and so on. I have spread things out over years of posts. I have filed…

Posted:

Tags: accessibility, html, pattern, standards, tables, WCAG

a11yTO Conf: CSS Display Properties versus HTML Semantics

If you attended my pre-recorded remote CSUN 2020 talk, then this talk will be familiar. I updated with the latest browsers, since February was six Chrome and nine Firefox versions ago. This talk was also only fifteen minutes, so I cut the videos and some other materials. Go check the…

Posted:

Tags: accessibility, browser, css, html, slides

Alternative Text for CSS Generated Content

Relying on images that come from CSS has always been risky from an accessibility perspective. CSS background images, in particular, must either be purely decorative or be described to the user in some way. The risk is no different for images coming from CSS generated content using content: url(foo.gif) (typically…

Posted:

Tags: accessibility, browser, css, standards, usability, UX

Dialog Focus in Screen Readers

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…

Posted:

Tags: accessibility, browser, html, usability, UX

Gutenberg Accessibility Costs WordPress the W3C Work

This is a slightly extended version of my Twitter thread. As the W3C has embarked on a full web property rebuild, its vendor (Studio24) indirectly announced earlier this month that it had dropped WordPress from consideration as a CMS. WPTavern took issue with this yesterday, and Studio24 responded today, (politely)…

Posted:

Tags: accessibility, standards, W3C, WordPress