Skip to content.
Adrian Roselli
Crypto Monetization Token SME

All Posts Tagged: html

Brief Note on Disclosures in Fieldsets

TL;DR: Probably don’t use disclosure widgets in fieldsets. If you do it anyway, don’t put the trigger in the <legend>. Context With <details> / <summary>, recent support for the popover attribute, and the never-ending belief that a “clean” page means hiding content, there is a resurgence in stuffing useful content…

Posted:

Tags: html, standards, usability, UX

Semi-Annual Reminder to Learn and Hire for Web Standards

Alex Russell wrote a four-part series a couple weeks ago arguing that modern JavaScript-first framework-focused front-end development is costing the industry and users. Part of his conclusion for organizations: Never, ever hire for JavaScript framework skills. Instead, interview and hire only for fundamentals like web standards, accessibility, modern CSS, semantic…

Posted:

Tags: ARIA, html, rant, standards, W3C, whatwg

Mountain Chicken!

I am mis-using closed captions for a gag. The following video has an audio track and four sets of captions (for now?). Each set of captions is in English. Only one set of captions represents the spoken dialog, the other two represent dialog not in the video. The tracks are…

Posted:

Tags: ARIA, html, rant

Talkin’ Tables — WebAIM Conference 2024

I spoke at the 2024 Web Accessibility in Mind Conference (in partnership with PopeTech). As soon as the video is available I will embed it. This post is a stub to hold the links during my talk and will be updated sometime within a few days after my talk with…

Posted:

Tags: accessibility, html, slides, tables, usability, UX

Feedback on a Pagination Pattern

This post is part of RSS Club, rewarding those who still use RSS to read and/or share content. These posts are embargoed from my regular post feed and the socials for an arbitrary period of time. You can see all the RSS-only posts at AdrianRoselli.com/category/RSS. Tell your friends (to get…

Posted:

Tags: accessibility, ARIA, html, pattern, standards, usability, UX

Be Careful Using ‘Grid’

TL;DR: Be careful when using the word grid on its own. Be certain you have chosen the term that accurately describes the pattern you want. If this post looks familiar to you, that is because it is essentially a redress of my 2023 post Be Careful Using ‘Menu’. It is…

Posted:

Tags: ARIA, css, html, lingo, pattern, standards

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

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