All Posts Tagged: css| adrianroselli.com
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
Using ARIA instead of HTML is generally fine for content, layout, structure, and other static bits of a page. A is the same as as far users and accessibility APIs are concerned. It is unlikely a user will ever notice the difference unless you use both…| 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
When I wrote Under-Engineered Text Boxen in 2019 I mentioned (WHATWG, MDN) but did not dwell on it. Partly because support was poor at the time. Once Can I Use’s entry listed Firefox on Android supporting it in version 110, I got excited and started testing to write…| Adrian Roselli
There are plenty of use cases for embedding third-party content on a site, as well as local content that may not be in HTML. Perhaps you gave a talk and want to share your slides. Sometimes you want to reference a video that exists only on YouTube. Maybe you have…| Adrian Roselli
Before you get too far into this post, maybe read Browser Video Players Review. There I wade into the accessibility of the element based on the video players browsers provide. Then maybe read Scott Jehl’s How to Use Responsive HTML Video (…and Audio!). I am leaning on support in…| Adrian Roselli
The Test Page The Code Testing Results Keyboard Screen Readers Voice Control, Forced Colors, Speed Media Queries: 20 December 2023 Audio Description: 20 December 2023 Wrap-up Browsers each provide built-in video players for the element. Nearly four years ago Scott Vinkle wrote How accessible is the HTML video player?,…| Adrian Roselli
CSS Custom Properties can be used for far more than just color, and their values update in realtime, both via display mode updates and JavaScript logic. This is powerful stuff. Eric explains how modern CSS is a powerful piece of assistive technology that can thread into it to create flexible, maintainable and adaptive digital experiences.| Smashing Magazine
Visible focus styles help us to understand which part of a web page we may be interacting with. You may have seen visible focus styles appear as an outline around a link or a button for example. For people who only use a keyboard to navigate the web, visible focus styles may be one of the few ways to understand where they are in a page and what it is that they are interacting with.| TetraLogical
Low resolution screen shots combined to show the same page as seen using Windows High Contrast Mode and macOS Invert Colors settings. There are different ways to make a web page more easy to read, but there are two options that come directly from the operating system that many developers…| Adrian Roselli
In this article, we’ll see how to make our sites friendly for Windows High Contrast Mode by using a good set of practices, including the media query `forced-colors` and its toolset.| Smashing Magazine