Others in this sorta-series: Under-Engineered Custom Radio Buttons and Checkboxen Under-Engineered Toggles Under-Engineered Toggles Too Under-Engineered Text Boxen Under-Engineered Select Menus A common interface pattern allows users to choose one item from a pre-defined set of choices, while still allowing them to add a custom selection if nothing else fits.…| Adrian Roselli
This post expands on what I covered in my April 2021 post, Sortable Table Columns. You may want to read that first to understand the broader challenges and techniques for making a table sortable by one column at a time. That last statement is what matters here. ARIA 1.1 says…| Adrian Roselli
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 Let The User Know This Thing Sorts SVGs Layout Windows High Contrast Mode Screen Readers…| Adrian Roselli
I have written a bunch about responsive tables. Maybe too much. I keep trying to give developers the information they need to make informed decisions — ARIA attributes, screen reader & browser pairing results, bugs, and so on. I have spread things out over years of posts. I have filed…| Adrian Roselli
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,…| Adrian Roselli
All Posts Tagged: ARIA| adrianroselli.com
All Posts Tagged: accessibility| adrianroselli.com
A reference for the custom functions and directives Tailwind exposes to your CSS.| tailwindcss.com
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…| Adrian Roselli
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,…| Adrian Roselli
Others in this sorta-series: Under-Engineered Custom Radio Buttons and Checkboxen Under-Engineered Toggles Under-Engineered Toggles Too This is the latest, and not last, in my informal series of posts on under-engineered controls. Generally I am looking at the minimum amount of CSS necessary to style native HTML controls while also retaining…| Adrian Roselli
A disclosure widget is a simple control whose sole purpose is to hide or show stuff. Native HTML has one built in via the and elements. Until recently, if you wanted to use it in modern browsers you needed to use a polyfill. In most cases it was…| Adrian Roselli
This document is a practical guide for developers on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification [WAI-ARIA-1.1], which defines a way to make Web content and Web applications more accessible to people with disabilities. This document demonstrates how to use WAI-ARIA in [HTML51], which especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.| www.w3.org
Accessibility of web content requires semantic information about widgets, structures, and behaviors, in order to allow assistive technologies to convey appropriate information to persons with disabilities. This specification provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. These semantics are designed to allow an author to properly convey user ...| www.w3.org