Skip to content.
Adrian Roselli
Natural-Language-Processed Neural Network Token VTOL

All Posts Tagged: pattern

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

Toggling Animations On and Off, a Variation

In the post Toggling Animations On and Off Kirupa Chinnathambi does a great job of outlining the value in giving users a choice over seeing animations. Part of that is by honoring preferences users have already made in their operating systems to reduce the amount of animation they see. I…

Posted:

Tags: accessibility, css, pattern, usability, UX

Links List for Print Styles

I should qualify that I started writing this script and CSS, based on another experiment of mine, before I saw Aaron Gustafson’s 2005 ALA post Improving Link Display for Print. He uses similar techniques 12½ years ago that I use here, but with different syntax. Because scripting and styling has…

Posted:

Tags: css, html, JavaScript, pattern, print

Functions to Add ARIA to Tables and Lists

Related Other posts in this accidental series: Layout as a Clue to Semantics Display: Contents Is Not a CSS Reset Tables, JSON, CSS, ARIA, RWD, TLAs… Tables, CSS Display Properties, and ARIA A Responsive Accessible Table Hey, It’s Still OK to Use Tables When I presented my talk CSS Display…

Posted:

Tags: accessibility, ARIA, browser, css, html, pattern, standards, tables

Accessible Memes Can Be Done

By now most of you have seen that four panel American Chopper meme. For those who cannot see, it whisked across Twitter as yet another undescribed image in a sea of inaccessible memes. Heck, for those of us whose data plan crapped out, it was just a missing block in…

Posted:

Tags: accessibility, pattern, usability, UX

SVG Filtering for Windows High Contrast Mode

Update 21 January 2021: This post addresses the previous / original engine for Microsoft Edge (Legacy Edge or Ledgacy). Since Edge’s switch to the Chromium rendering engine (becoming Chromiedge), the proprietary feature queries are no longer supported and this technique may no longer work or may need to be amended…

Posted:

Tags: accessibility, css, Edge, pattern, WHCM

GitHub Contributions Chart

Perhaps a testament to how little I might value GitHub contributions. GitHub profile pages are, to many, the de facto place to quickly judge the value of a developer. The contributions chart is an at-a-glance visual indicator of that value. I disagree completely with the notion of the chart (or…

Posted:

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