Skip to content. Adrian Roselli Consultant, Writer, Speaker

All Posts Tagged: pattern

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, pattern, usability, UX

Under-Engineered Toggles Too

Updated Intro Whether you use a <button> or <input type=”checkbox”> for your toggle depends on a few factors: Use <button> if: you can count on JavaScript being available, flipping the toggle has an immediate effect, the toggle will never have an indeterminate state. Continue reading this post. Use <input type=”checkbox”>…

Posted:

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

Maybe You Don’t Need a Date Picker

Calendar controls, date pickers, date widgets, whatever you call them, however they are described, they follow the same basic principle — present the user with a calendar to enter a date (and sometimes a time). Chris Blakeley, CC BY-NC-ND 2.0 The native implementations come from browsers when authors use <input…

Posted:

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

Link + Disclosure Widget Navigation

Early in 2017 I filed an issue against WAI-ARIA Authoring Practices (APG) requesting a change to the menu navigation pattern. Despite a great deal of feedback in agreement, it languished. In late 2017 I wrote Don’t Use ARIA Menu Roles for Site Nav and started actively campaigning against the APG…

Posted:

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

Periodic Table of the Elements

I built this for me. An audience of one. A way to keep sharp the skills that I am not always able to use on a project. My requirements were simple: responsive (print, small screens), accessible (beyond screen readers), and kinda fun. Since it relies on a JSON data source…

Posted:

Tags: accessibility, css, html, JavaScript, pattern, print, WHCM

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

Under-Engineered Toggles

Updated Intro Whether you use a <button> or <input type=”checkbox”> for your toggle depends on a few factors: Use <button> if: you can count on JavaScript being available, flipping the toggle has an immediate effect, the toggle will never have an indeterminate state. Go read Under-Engineered Toggles Too. Use <input…

Posted:

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

Avoid Default Field Validation

HTML5 gives us form field validation for free. The problem is that the default messages browsers provide are not always useful and typically do not work with assistive technology. I made an example on CodePen that uses an email field (type=”email”), is required (required), and uses a pattern to restrict…

Posted:

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

A CSS Venn Diagram

A few years ago I made a Venn diagram using floats and absolute positioning. It was fine. Nothing to really brag about, but it got the point across. I had use for CSS shapes in a project and wanted to play around beyond what the project itself allowed. I decided…

Posted:

Tags: css, html, pattern

Search icon Used in the search form as a button. Search icon Used in the search form as a button. Information icon Lower-case 'i' in a circle. Checkmark icon Symbol showing a checkmark. Alert icon Exclamation mark within a triangle.