Skip to content.
Adrian Roselli
Crypto Machine Learning System VTOL

All Posts Tagged: css

Using CSS to Enforce Accessibility

The CSS3 logo as a head atop a torso with its arms folded across its chest. I am a big proponent of the First Rule of ARIA (don’t use ARIA). But ARIA brings a lot to the table that HTML does not, such as complex widgets and state information that…

Posted:

Tags: accessibility, ARIA, css

Under-Engineered Select Menus

Others in this sorta-series: Under-Engineered Custom Radio Buttons and Checkboxen Under-Engineered Toggles Under-Engineered Toggles Too Under-Engineered Text Boxen I am still confounded how many developers and designers see a <select> and immediately reach for a library or framework to re-create the features from the ground up. Though, frankly, I am…

Posted:

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

Cistercian SVG

Thanks to a tweet from UCL Department of Mathematics, I am one of the many people who stumbled across Cistercian numerals and fell down the rabbit hole. To over-simplify, they are single glyphs that can each represent a number from 1 to 9,999 that were developed by Cistercian monks to…

Posted:

Tags: accessibility, css, html, JavaScript

WHCM and System Colors

Outline: Feature Queries Proprietary, or Internet Explorer Only Standards Track, or Edge Only Frankenquery’s Monster System Colors CSS2 System Color Keywords WHCM Proprietary Feature Query Color Mappings CSS4 System Color Keywords Browser Support Internet Explorer Legacy Edge (Ledgacy) Chromium Edge (Chromiedge) Firefox Chrome Examples Backgrounds Inline SVGs SVGs via <img>s…

Posted:

Tags: accessibility, browser, Chrome, css, Edge, Firefox, html, Internet Explorer, WHCM

Multi-Function Button

Table of Contents Example The HTML Live Region Button Decoration Accessible Name The Styles Hide the Live Region Color and Contrast Active Animations Text Resize and Reflow Windows High Contrast Mode The Script The Click Event Manipulate Outcomes Screen Reader Output WCAG Success Criteria What This Does Not Do Wrap-up…

Posted:

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

Web Development Advent Calendars for 2020

This is why you never go to the (locally- and independently-owned) grocery store on an empty stomach. 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…

Posted:

Tags: accessibility, css, design, html, internet, standards, UX

More Accessible Skeletons

I had this post queued up for Halloween because, come on, skeletons, and then life did its thing and now it is a … Thanksgiving post? Many skeleton patterns do a poor job presenting themselves to screen reader users in any meaningful way. They often stuff aria-busy into their widget,…

Posted:

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

a11yTO Conf: CSS Display Properties versus HTML Semantics

Update In early July 2022 I re-tested these to see how the results shaped up after nearly two years and at least one promise: It’s Mid-2022 and Browsers (Mostly Safari) Still Break Accessibility via Display Properties If the title is not clear, one browser stands out in failing to address…

Posted:

Tags: accessibility, browser, css, html, slides

Alternative Text for CSS Generated Content

Relying on images that come from CSS has always been risky from an accessibility perspective. CSS background images, in particular, must either be purely decorative or be described to the user in some way. The risk is no different for images coming from CSS generated content using content: url(foo.gif) (typically…

Posted:

Tags: accessibility, browser, css, standards, usability, UX

Source Order Viewer in Edge 86

Update, 15 September 2020: Microsoft put together a more formal announcement at Introducing Source Order Viewer in the Microsoft Edge DevTools. It has some video examples and instructions to enable it. Edge 86 has introduced a feature that shows the source order of a page. You can read more about…

Posted:

Tags: accessibility, browser, css, Edge

CSUN 2020: CSS Display Properties versus HTML Semantics

While originally I was scheduled to attend CSUN to present two talks one talk, I ended up not attending (my father won A Major Award so I joined him instead). I gave my talk remotely in my scheduled slot (during my father’s award dinner). While I would have loved to…

Posted:

Tags: accessibility, ARIA, css, html, slides, standards

Block Links, Cards, Clickable Regions, Rows, Etc.

Whether you call them cards, block links, or some other thing, the construct of making an area of content clickable (tappable, Enter-key-able, voice-activatable, etc.) is not new. While hit area size is mostly a usability issue, marketers often want a larger click area around their calls to action (CTAs) to…

Posted:

Tags: accessibility, css, design, html, pattern, tables, usability, UX