Skip to content.
Adrian Roselli SaaS Monetization Intelligent Agent CRT

All Posts Tagged: pattern

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

Table with Expando Rows

I regularly work on projects with HTML tables that have been pushed to the edge with styles, scripts, and widget features. A common pattern is where rows are hidden until the user opts to show them. Unfortunately, the pattern is often over-complicated with unnecessary script and styles that regularly break…

Posted:

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

Basic Custom Control Requirements

If you are working on a custom control, a complex widget, or a novel interface element to integrate into a project, library, or framework, there are some core features you need to build. These represent not just what works for users across the most contexts and preferences, but also what…

Posted:

Tags: accessibility, ARIAbuse, pattern, usability, UX