Skip to content.
Adrian Roselli
Containerized Funded Overlay CLI

All Posts Tagged: accessibility

Disability:IN 2024 Agenda Bookmarklet

I had some issues using the Disability:IN 2024 Conference Agenda so I made a bookmarklet: 🔗 Fix Disability:IN Agenda You may have seen this originally posted as a CodePen, but I opted to move it here since I can embed videos showing a before-and-after experience. Fixes Removes empty trigger link…

Posted:

Tags: accessibility, html, standards, usability, UX

YouTube and Vimeo Web Component

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…

Posted:

Tags: accessibility, html, JavaScript, pattern

Maybe Don’t Name That Landmark

TL;DR: You probably don’t need to name that landmark. The Ngong Ping Village tourist trap on Hong Kong’s Lantau Island. All the pricey tourist spots have visible named landmarks on the map, but the ones people generally care about (bathrooms, food, that lovely tea house) are not. The accompanying tactile…

Posted:

Tags: accessibility, ARIA, html, usability, UX

My Approach to Alt Text

I ran across a survey from Tilburg University on the experiences and perspectives of image describers. It asked what process I follow to write image alternative text, and it occurred to me that I don’t use a checklist or guideline anymore. That may or may not be a good thing,…

Posted:

Tags: accessibility, html, standards, usability, WAI

Level-Setting Heading Levels

TL;DR: Avoid setting heading levels greater than six (6). This applies whether using aria-level or the proposed headingstart HTML attribute. Use HTML <h#> elements whenever possible. ARIA The aria-level attribute, when applied to headings (or nodes with the heading role) lets authors set an integer value for a heading level.…

Posted:

Tags: accessibility, ARIA, Chrome, Firefox, html, Safari, standards, W3C

A Brief Note on Highlighted Text

TL;DR: If you plan to style text highlighted by the browser, you must give it sufficient contrast — 3:1 for the highlight block against its background and (probably) 4.5:1 for the text within that highlighted block against that background. CSS Context CSS provides methods to style the highlights that browsers…

Posted:

Tags: accessibility, css, usability

Long Alt

TL;DR: Keep your image alternative text brief, devoid of special characters, empty of URLs, and ideally in one language. Here We Go Sometimes you can have too much alternative text, particularly for an <img>. I don’t mean there is a limit to what is allowed, I mean there is a…

Posted:

Tags: accessibility, browser, html, rant, standards, usability, UX

CSUNATC: WCAGmire

Download a 4.4MB tagged PDF of my slides or try the embedded view if your browser displays PDF inline. The text in the slides is set in Atkinson Hyperlegible. The outdoor images are generated from Midjourney. The PDF is exported from PowerPoint, after confirming reading order and alternative text and…

Posted:

Tags: accessibility, slides, standards, W3C, WCAG

Jakob Has Jumped the Shark

Yes, that is the bear from Jakob’s clearly spurious alternative text example and yes, that is The Fonz after jumping the shark. If you have been following the saga of Jakob Nielsen, there a few quotes I could use here: Battle not with monsters, lest ye become a monster (Nietzsche).…

Posted:

Tags: accessibility, rant, usability, UX

My WebAIM 10th SR User Survey Takeaways

A rambling collection of thoughts from reading through the WebAIM Screen Reader User Survey #10 Results. Most of this was in a Masto thread, but I opted to post it here so I can laugh at myself later. Disability This opening nugget is important for understanding some of my commentary:…

Posted:

Tags: accessibility, rant, usability, UX

ARIA `note`

Trying Markdown code indicators in my post title, not because I want it to convert, but because I am curious if people will ping me to tell me it broke their RSS readers. Oh, and so it converts to code when pasted into your GitHub issues. ARIA note Role A…

Posted:

Tags: accessibility, ARIA, standards