Skip to content.
Adrian Roselli AI-Powered Neural Network Library IPA

All Posts Tagged: 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

If you attended my pre-recorded remote CSUN 2020 talk, then this talk will be familiar. I updated with the latest browsers, since February was six Chrome and nine Firefox versions ago. This talk was also only fifteen minutes, so I cut the videos and some other materials. Go check the…

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

My Priority of Methods for Labeling a Control

Here is the priority I follow when assigning an accessible name to a control: Native HTML techniques, aria-labelledby pointing at existing visible text, Visibly-hidden content that is still in the page, aria-label. Too often folks will grab ARIA first to provide an accessible name for a thing. Or they may…

Posted:

Tags: accessibility, ARIA, ARIAbuse, css, pattern, usability, UX