Skip to content. Adrian Roselli Consultant, Writer, Speaker

All Posts Tagged: css

Under-Engineered Toggles Too

In my post Under-Engineered Toggles I showed you how to take a standard checkbox and use some CSS to style it to visually look like a toggle. That styling does nothing to change the semantics, nor should it. A checkbox is the default fallback for a switch role. It also…

Posted:

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

Global Accessibility Awareness Day 2019

I kind of missed it this year. I was presenting at YGLF and was invested in the other talks, so my annual tweet thread of my accessibility posts since the previous GAAD did not come out on time. Instead I filled up timelines last night. Below are eight tweets with…

Posted:

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

F87: CSS Generated Content and WCAG Conformance

The Web Content Accessibility Guidelines (WCAG) does a good job of providing supporting techniques to help reviewers determine if a specific case would violate a given Success Criterion (SC). WCAG 2.0, which became a recommendation at the end of 2008, has carried these techniques over to WCAG 2.1, finalized in…

Posted:

Tags: accessibility, css, UX, W3C, WAI, WCAG

Uncanny A11y

Original photo by Kevin Hale, text added. CC BY-SA 2.0. The pun in the title is that some people pronounce the a11y numeronym as “alley”. That makes the full title sound like uncanny valley, the concept of human-looking things seeming almost, but not quite, human and therefore creepy. In accessibility,…

Posted:

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

Baseline Rules for Scrollbar Usability

Web Content Accessibility Guidelines Inclusive Design Principles Manage Expectations Wrap-up Now that one of the most popular CSS resource sites on the innertubes has implemented styled scrollbars in the browser I think the time is right (or too late?) for me to try to capture a starting point for ensuring…

Posted:

Tags: accessibility, browser, css, usability

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

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

Web Development Advent Calendars for 2018

Web developers around the world have celebrated Saturnalia solstice Isaac Newton’s birthday Christmas with advent calendars covering web-related topics. As a result, you may recognize some of the ones listed below. Every year I miss a few on day one, so add a comment or tweet me if you have…

Posted:

Tags: accessibility, css, design, html, internet, standards, 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, print

Demand Refunds for Invalid HTML in Courses

It is easier than ever to follow web standards and be confident that, for the most part, modern browsers will render it the same. Accessibility standards are enshrined in law the world over, making standards-based semantic and structural mark-up the safest and easiest path. If you do HTML correctly then…

Posted:

Tags: accessibility, css, html, rant, standards

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.