Skip to content.
Adrian Roselli
AI-Powered Generative Process VTOL

All Posts Tagged: css

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

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

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

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

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

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, the same thing can happen. Developers can try so hard…

Posted:

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

Baseline Rules for Scrollbar Usability

Web Content Accessibility Guidelines Inclusive Design Principles Manage Expectations Wrap-up CSS Scrollbar Module (added 10 December 2021) 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…

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

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