Skip to content.
Adrian Roselli AI-Powered Blockchain Platform MVP

All Posts Tagged: pattern

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

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

Sortable Table Column Mad Libs

Visually and functionally sortable column headers on tables are straightforward (I have a post coming on that soon). However, making them accessible can be a bit frustrating. To clarify, making them accessible to screen readers is frustrating. There are two critical areas where screen readers fall down here: lack of…

Posted:

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

Be Wary of doc-subtitle

In early March, Steve Faulkner shared this nugget for making sub-headings: 👉If you want to semantically identify a heading subtitle, look no further than role="doc-subtitle" w3.org/TR/dpub-aria-1.0/#doc-subtitle #HTML #ARIA #WebDev pic.twitter.com/uaHcVRp6oz Steve Faulkner (@stevefaulkner) March 7, 2020 On its surface it looks pretty handy. Handy enough that Chris Ferdinandi wrote about…

Posted:

Tags: accessibility, ARIA, browser, html, pattern, rant, standards

When Is a Vetted Pattern No Longer a Vetted Pattern?

The moment you change it. As soon as you start to tweak the underlying code or aspects of the design, you run the risk of introducing bugs. That part should be easy for any developer to understand. The tougher part to get your arms around is that once you add…

Posted:

Tags: pattern, usability, UX

Stop Using ‘Drop-down’

TL;DR: Stop using the word drop-down. Instead choose a term that accurately describes the control you want. I have worked both with native platform developers and web developers. While control names might differ, if a control was functionally the same then it was not an issue. A TextBox, for example,…

Posted:

Tags: html, pattern, standards

Block Links, Cards, Clickable Regions, Rows, Etc.

Whether you call them cards, block links, or some other thing, the construct of making an area of content clickable (tappable, Enter-key-able, voice-activatable, etc.) is not new. While hit area size is mostly a usability issue, marketers often want a larger click area around their calls to action (CTAs) to…

Posted:

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

Defining ‘Toast’ Messages

In current user interface terms a toast is a message that appears on the screen; it is often short, often appears only briefly, and often animates up from the bottom (like a piece of ghostly yet precisely-crafted toast), though other directions and a fade-in/-out is common. The Name When Google…

Posted:

Tags: accessibility, ARIA, pattern, usability, UX

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

Fixed Table Headers

Related A Responsive Accessible Table Hey, It’s Still OK to Use Tables Keyboard and Overflow

Posted:

Tags: accessibility, css, html, mobile, pattern, tables

Accessible Drop Caps

Since the early days of the web, when images could be floated and text would wrap around them, designers have wanted to bring drop caps onto the web. Then we learned how terrible a pattern like <img alt=”M” align=”left”>atthew is for users, and CSS introduced :first-letter, letting us believe all…

Posted:

Tags: accessibility, ARIA, css, design, html, pattern, usability, UX, WCAG

Under-Engineered Text Boxen

Others in this sorta-series: Under-Engineered Custom Radio Buttons and Checkboxen Under-Engineered Toggles Under-Engineered Toggles Too This is the latest, and not last, in my informal series of posts on under-engineered controls. Generally I am looking at the minimum amount of CSS necessary to style native HTML controls while also retaining…

Posted:

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