Skip to content.
Adrian Roselli Integrated Monetization Tool-set IPA

All Posts Tagged: html

Beware False Negatives

Automated accessibility testing tools are rightly wary of giving false positives. You don’t want to flag something as an error in a test only to have the team rebuild an entire thing for no reason (never mind the risk of introducing errors). We know automated accessibility testing tools can really…

Posted:

Tags: html, rant, standards, WCAG

Sentence Forms (not Mad Libs)

Whether you call them sentence forms, narrative forms, fill-in-the-blank forms, or Mad Libs forms, you are probably describing a form where the fields are interspersed within words in a sentence. Unlike more traditional forms, laid out with simple pairings of labels and fields, these forms are meant to be read…

Posted:

Tags: accessibility, html, pattern, usability, UX

Stop Using ‘Pop-up’

TL;DR: Stop using the word pop-up. Instead choose a term that accurately describes the control you want. I encourage you to read my post Stop Using ‘Drop-down’, which provides the set-up for this post. Along with another term I would prefer everyone stopped using. As you embark on a design,…

Posted:

Tags: html, pattern, standards

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

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

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

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