Skip to content. Adrian Roselli Consultant, Writer, Speaker

All Posts Tagged: WHCM

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, print, WHCM

Under-Engineered Toggles

Toggle buttons feel like a favorite way for devs and designers to show off their animation, design, and pun skills. There is even a Codepen collection dedicated to toggles. Other writings on toggle and switch patterns Toggle Buttons by Heydon Pickering, 31 March 2017 Building Inclusive Toggle Buttons by Heydon…

Posted:

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

SVG Filtering for Windows High Contrast Mode

Two nearly back-to-back tweets this weekend reminded me that you can use CSS filters to mess with the colors of SVGs: Solved With CSS! Colorizing SVG Backgrounds at CSS-Tricks (tweet from Chris Coyier); Filter at MDN Web Docs (tweet from MDN). Generally this technique is not something you would consider…

Posted:

Tags: accessibility, css, Edge, 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, standards, usability, UX, WHCM

Tweaking Text Level Styles

This post is building on the post Short note on making your mark (more accessible) by Steve Faulkner at the Paciello Group blog. In that post, Steve answers a very specific question about the <mark> and making it more accessible for screen readers. I saw some follow-up questions on the…

Posted:

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

OS: High Contrast versus Inverted Colors

Low resolution screen shots combined to show the same page as seen using Windows High Contrast Mode and macOS Invert Colors settings. There are different ways to make a web page more easy to read, but there are two options that come directly from the operating system that many developers…

Posted:

Tags: accessibility, Apple, Microsoft, WHCM

A Responsive Accessible Table

Painfully slow demonstration of the example table resizing and different media queries kicking in. After writing (again) that it is ok to use tables, and after providing quick examples of responsive tables, I received questions about why I used some of the code I did. I am going to attempt…

Posted:

Tags: accessibility, ARIA, css, design, html, mobile, print, standards, tables, usability, UX, WHCM

Under-Engineered Custom Radio Buttons and Checkboxen

I keep seeing overly-complex controls with additional elements as style hooks, scripting to make up for non-semantic replacements, images that need to be downloaded, and so on. This is silly. Here are some really simple styles to make radio buttons and checkboxes look unlike native controls (which seems to be…

Posted:

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

Punch-Out Avatar

I built this on a whim after seeing some terrible examples on Stack Overflow, so unlike other demos I build there was no immediate application. That means it may or may not be useful as-is. Variation For this post I have forked each variation of the original and added a…

Posted:

Tags: accessibility, css, html, print, standards, WHCM

CSS and System Fonts

This weekend I read a post about techniques to get Apple’s new San Francisco font into your CSS. Since San Francisco is only just being added to iOS and OS X, it can be a bit tricky to get hold of it in Safari. What struck me was the use…

Posted:

Tags: Apple, browser, css, fonts, mobile, Safari, standards, usability, UX, WHCM

Obligatory Redesign Post

Screen shots showing four of the states of the menu of which I am so proud but which has questionable usability, as opposed to the h1 style, which is unquestionably unusable. Note that one of those screen shots is really a view of the printed page, where the menu is…

Posted:

Tags: accessibility, ARIA, css, design, html, mobile, standards, touch, usability, WHCM

CSS Background Images & High Contrast Mode

I try to stay up on accessibility gotchas and weird browser implementations, but I just discovered one that I suspect I should have already known. In Steve Faulkner’s post, Notes on accessible CSS image sprites, he tosses out a factoid that was new to me: When high contrast mode is…

Posted:

Tags: accessibility, browser, css, Internet Explorer, standards, W3C, WHCM

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.