Skip to content.
Adrian Roselli
AI-Powered Virtualization Framework CLI

All Posts Tagged: pattern

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

Support for Marking Radio Buttons Required, Invalid

The required set of radio buttons. The white whale to many a developer who is trying their darnedest to ensure they are conveyed accessibly while not also making it sound like every individual radio button must be toggled. 1961 Cadillac Wonderbar dashboard radio by Nicholas Lucien (cropped). CC BY 2.0.…

Posted:

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

Accessible Cart Tables?

The online holiday shopping coupled with my need to make a new invoice template got me looking at a common table structure that is harder to expose to screen readers than it seems at first glance. One I first coded in, checks watch, 1997 when I was an ecommerce developer…

Posted:

Tags: accessibility, html, pattern, tables

Under-Engineered Dependency Questions

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 Select Menus A common interface pattern allows users to choose one item from a pre-defined set of choices, while still allowing them to add a custom selection if nothing else fits.…

Posted:

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

Switch Role Support

Whether you use a <button> or <input type=”checkbox”> as the basis for your switch depends on a few factors: Use <button> if: you can count on JavaScript being available, and flipping the switch has an immediate effect. Go read Under-Engineered Toggles Too. Use <input type=”checkbox”> if: you want to progressively…

Posted:

Tags: accessibility, ARIA, pattern, standards

Sentence Forms (not Mad Libs)

Whether you call them sentence forms, narrative forms, fill-in-the-blank forms, or Mad Libs forms, you are probably describing a form where the fields are interspersed within words in a sentence. Unlike more traditional forms, laid out with simple pairings of labels and fields, these forms are meant to be read…

Posted:

Tags: accessibility, html, pattern, usability, UX

Scroll Snap Challenges

Though JS-free fixed table row and column headers have been possible for quite some time, Safari’s and Chrome’s recent fixes got some people pretty excited. Enough that folks are copying code samples in whole, without always paying attention to necessary considerations. That same excited demo included other CSS properties that…

Posted:

Tags: accessibility, css, pattern, standards, tables, usability, UX, WCAG

Stop Using ‘Pop-up’

TL;DR: Stop using the word pop-up. Instead choose a term that accurately describes the control you want. I encourage you to read my post Stop Using ‘Drop-down’, which provides the set-up for this post. Along with another term I would prefer everyone stopped using. As you embark on a design,…

Posted:

Tags: html, pattern, standards

Multi-Column Sortable Table Experiment

This post expands on what I covered in my April 2021 post, Sortable Table Columns. You may want to read that first to understand the broader challenges and techniques for making a table sortable by one column at a time. That last statement is what matters here. ARIA 1.1 says…

Posted:

Tags: accessibility, ARIA, pattern, tables, UX

Sortable Table Columns

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 Column Background via <col> Let The User Know This Thing Sorts SVGs Layout Windows High Contrast Mode Screen Readers…

Posted:

Tags: accessibility, ARIA, pattern, tables, UX

Under-Engineered Select Menus

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…

Posted:

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