Archive for the ‘a11y’ Category

How Can I Make My Icon System Accessible?

Here's a question I got the other day? Would you suggest icon fonts or inline SVGs for a complex single page application? And are there specific accessibility concerns for either? Accessibility is especially important for us because schools use our pro...

User Facing State

Let's talk about state. Communicating state to the user that is, not application stores state in JavaScript objects, or localStorage. We're going to be talking about how to let our users know about state (think: whether a button is disabled or not, or ...

Methods for Contrasting Text Against Backgrounds

It started with seeing a recent Pen of Mandy Michael's text effects demos. I'm a very visual creature, so the first thing I noticed was the effect, not the title (which clearly states how the effect was achieved). Instantly, my mind went "blend modes!"...

Focus Styles on Non-Interactive Elements?

Last month, Heather Migliorisi looked at the accessibility of Smooth Scrolling. In order to do smooth scrolling, you: Check if the clicked link is #jump link Stop the browser default behavior of jumping immediately to that element on the page Animate ...

CSS Custom Properties and Theming

We posted not long ago about the difference between native CSS variables (custom properties) and preprocessor variables. There are a few esoteric things preprocessor variables can do that native variables cannot, but for the most part, native variables...

Automated Accessibility Checking with aXe

Posted on: No Comments
Accessibility concerns are often ignored due to the efforts required to check them and implement solutions. Not only do developers have to get acquainted with the underlying standards but also constantly check that they are met. Can we make developing ...

Inclusive Components

Posted on: No Comments
Heydon Pickering with a new project: A blog trying to be a pattern library. Each post explores the design of a robust, accessible interface component. Just one post so far on Toggle Buttons, but it's a doozy. Direct Link to Article — Permalink In...

Maintaining Accessibility in a Responsive World

Posted on: No Comments
There a bit of a CSS trick is Scott Jehl's latest article. Perhaps you've used an "accessible hiding" technique? That's where you are deliberately avoiding display: none; because you want the element to be focusable, but not seen visually. But... that...

An Introduction to the Reduced Motion Media Query

Posted on: No Comments
The open web's success is built on interoperable technologies. The ability to control animation now exists alongside important features such as zooming content, installing extensions, enabling high contrast display, loading custom stylesheets, or disab...