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
Does what it says on the tin. Uses and with a bit of ARIA to create an accordion that works without JavaScript while working better with JavaScript. Mostly. See the Pen Progressively Enhanced HTML Accordion by Adrian Roselli (@aardrian) on CodePen. Visit the standalone version for testing or…| Adrian Roselli
Open UI| open-ui.org
Create an exclusive accordion with multiple `` elements that have the same `name`.| Chrome for Developers
All Posts Tagged: ARIA| adrianroselli.com
All Posts Tagged: usability| adrianroselli.com
All Posts Tagged: pattern| adrianroselli.com
All Posts Tagged: html| adrianroselli.com
All Posts Tagged: accessibility| adrianroselli.com
TL;DR: Be careful when using the word menu. Be certain you have chosen the term that accurately describes the control you want. If this post looks familiar to you, that is because it is essentially a redress of my 2020 post Stop Using ‘Drop-down’. It is not as divergent as…| Adrian Roselli
I have spent a few years banging on about ensuring scrolling areas on a page are accessible to keyboard-only users. This is partly because the term “keyboard” maps to other input types that we distill to “keyboard” for ease of reference (speech input, sip-and-puff, on-screen keyboards, scanning software, etc.). When…| Adrian Roselli
How “Exclusive Accordions” hinder especially people with disabilities to efficiently use web pages, and why that is a reason to be careful about making it easy to implement them.| Eric Eggert
Once major browsers started supporting & developers immediately started to play with them to see what sorts of patterns they could enhance or replace. This is a good thing. Experimentation pushes boundaries, improves understanding. However, we need to be careful of christening this new-to-us interaction as the solution…| 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
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 s…| Adrian Roselli
HTML Accessibility API Mappings (HTML-AAM) defines how user agents map HTML [HTML] elements and attributes to platform accessibility application programming interfaces (APIs). It leverages and extends the Core Accessibility API Mappings 1.2 and the Accessible Name and Description Computation 1.2 for use with the HTML host language. Documenting these mappings promotes interoperable exposure of roles, states, properties, and events implemented by accessibility APIs and helps to ensure that this...| 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 ...| w3c.github.io
I've already written about the and elements, but there is more to tell, and there have been some changes since I la...| www.scottohara.me