Skip to content.
Adrian Roselli
Natural Language Processed Machine Learning Framework VTOL

All Posts Tagged:

Embracing Design Constraints

Form ever follows function. Louis Sullivan Louis Sullivan, the father of the modern skyscraper, espoused this belief throughout his work. He recognized that the purpose of the building, when entering a place with no prior art, had to drive how it would look. With both the technology and audience providing…

Posted:

Tags: accessibility, design, usability, UX

XPath for In-Browser Testing

Both Chrome and Firefox support XPath searches when in the DOM view of their dev tools. Because the browser cleans whatever HTML it encounters (closing tags, correcting nesting), XPath can operate on the code as XML. Simple checks like finding a unique ID value can result in multiple hits in…

Posted:

Tags: browser, Chrome, Firefox, html

Sortable Table Columns

An accessible sortable table is not necessarily the same as a usable sortable table. Outline: Basics Let The User Know This Thing Has Sorted Screen Reader Announcement Sort Arrows Column Background Column Background via <col> Let The User Know This Thing Sorts SVGs Layout Windows High Contrast Mode Screen Readers…

Posted:

Tags: accessibility, ARIA, pattern, tables, UX

13 Letters Podcast

This post is only visible to RSS feed readers, unless you got here by manually parsing the feed (weirdo) or someone shared the link with you (they probably should not have). It is part of RSS Club, rewarding those who still use RSS to read and/or share content. You can…

Posted:

Tags: accessibility, speaking

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

Free Feedback for #accessiBe

On Friday, 12 February, at the request of Chancey Fleet I joined a call accessiBe set up with her. I have made it a point to only engage accessiBe publicly and with publicly available information, declining invitations from accessiBe in the past. Michael Hingson, formerly of Aira, had recently joined…

Posted:

Tags: accessibility, standards, UX

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

Sub-$1,000 Web Accessibility Solution

If someone approaches you claiming they can make your web site WCAG compliant for just $1,000, they are lying to you. Granted, you may have a one-page site where the only problem is some contrast, in which case sure, $1,000 might be more than enough. Adapted from “Cape Fear Discount…

Posted:

Tags: accessibility

Bulletproofing Embedded Tweets

You may rely on embedding tweets in your posts as a quick and easy way to quote or reference a person or subject. There are two challenges to relying on this, however: A tweet or account may be deleted or go private; The content may not be accessible to users…

Posted:

Tags: accessibility, html, social media, Twitter

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

Be Careful with Dynamic Accessible Names

Many of my clients try to reduce the number of controls on a screen by replacing them with single controls that change their name based on their purpose (what they unironically call reducing complexity). For example, presenting a download button that also acts as its own progress indicator and completion…

Posted:

Tags: accessibility, ARIA, html, UX, WCAG