Skip to content.
Adrian Roselli
Series A Virtualization Library CRT

Search Results: label

If the results below are no good, you can try searching the site via Duck Duck Go, searching via Bing, or even via Google.

My Priority of Methods for Labeling a Control

Here is the priority I follow when assigning an accessible name to a control: Native HTML techniques, aria-labelledby pointing at existing visible text, Visibly-hidden content that is still in the page, aria-label. Too often folks will grab ARIA first to provide an accessible name for a thing. Or they may…

Posted:

Tags: accessibility, ARIA, ARIAbuse, css, pattern, usability, UX

aria-label Does Not Translate

It does, actually. Sometimes. One of the big risks of using ARIA to define text content is that it often gets overlooked in translation. Automated translation services often do not capture it. Those who pay for localization services all too often miss content in ARIA attributes when sending text strings…

Posted:

Tags: accessibility, ARIA, ARIAbuse, Chrome, Edge, i18n, L10n

Group Labels Do Not Guarantee… Uniquity?

Heading this off early: uniquity uniq·​ui·​ty; \ yüˈnikwətē, -wətē, -i \Uniqueness; quality of being unique. There is a place where accessibility practitioners hang out and try to out-do each other with niche knowledge of nuance. While loitering in one, a question came up about text fields that have the same…

Posted:

Tags: accessibility, browser, Chrome, Edge, Firefox, Internet Explorer, Safari, usability, UX

Uniquely Labeling Fields in a Table

Many of my clients over the years have relied on fields in tables. Sometimes a checkbox to select a row, sometimes text inputs to update information, sometimes buttons select something. Rarely are they interested in a block of label text above the field, and I cannot disagree with them. The…

Posted:

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

AI-Generated Images from AI-Generated Alt Text

Dear sighted reader, I want you to read this post without looking at the images. Each has been hidden in a disclosure. Instead, read the alternative text I provide and visualize how it may look. Then read the automatically generated alternative text, and try to visualize it then. Consider how…

Posted:

Tags: accessibility, usability, UX

Use Legend and Fieldset

It’s 2022 and people are still afraid to use <fieldset> and <legend>. I understand the layout challenges can be frustrating, but swapping to an ARIA group role will result in a more inaccessible experience. A Solution Try this: <fieldset> <legend>Choose</legend> <div aria-hidden=”true”>Choose</div> […] </fieldset> legend:not(:focus):not(:active) { position: absolute; overflow: hidden;…

Posted:

Tags: accessibility, ARIA, html, standards

24×24 Pixel Cursor Bookmarklet

The proposed WCAG version 2.2 has gone through a bunch of revisions since I covered the first draft in 2020. One new success criterion that persisted is 2.5.8 Target Size (Minimum) at Level AA (its name changed from “Pointer Target Spacing”). For background, WCAG 2.1 introduced 2.5.5 Target Size, mandating…

Posted:

Tags: accessibility, browser, standards, WCAG

Under-Engineered Multi-Selects

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 Responsive Tables Under-Engineered Select Menus Under-Engineered Dependency Questions This post is not about <select multiple> nor a bunch of <div>s roled-up into a listbox with aria-multiselectable. Both the APG examples and…

Posted:

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

Brief Note on Buttons, Enter, and Space

Keyboard interaction note for just one control from the entire panoply of HTML controls: A native <button> fires on key down when that key is Enter. If you hold down the Enter key, it continues to fire for as long you hold Enter (or something crashes). A native <button> fires…

Posted:

Tags: browser, html, pattern, UX

Accessible Description Exposure

If you have little experience with ARIA, screen readers, or testing in general, understanding accessible descriptions can be trickier than understanding accessible names (already confusing for many). I have written explanations so many times for clients and in fora that I opted to put this together so I maybe never…

Posted:

Tags: accessibility, ARIA, browser, standards

Maybe Don’t Use Flow Charts on GitHub

In February the GitHub blog announced users would be able to Include diagrams in your Markdown files with Mermaid. I thought this was nifty, and even noticed on an initial scan that they considered screen reader users. Until I read this (since deleted): …clients requesting content with embedded Mermaid in…

Posted:

Tags: accessibility, html, SVG