Archive for the ‘a11y’ Category

Removing that ugly :focus ring (and keeping it too)

Posted on: No Comments
David Gilbertson: Removing the focus outline is like removing the wheelchair ramp from a school because it doesn't fit in with the aesthetic. So David shows how you can remove it unless you detect that the user is tabbing, then show it. Essentially you...

Empathy Prompts

Posted on: No Comments
Activities to help you develop empathy for the variety of people that use your thing. Eric Bailey: This project is geared towards anyone involved with making digital products. It is my hope that this reaches both: People who are not necessarily invo...

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...