Archive | a11y

RSS feed for this section

Empathy Prompts

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 involved in the day-to-day part of the process, but who help shape things like budget, timeline, and scope, and
  • People who work every day to help to give these products shape and form

These prompts are intended to help …


Empathy Prompts is a post from CSS-Tricks

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 products. I ask because we are currently in the process of unifying and setting up an icon system.

I don’t think I would make the choice based on what “kind” of website I was building, so let’s ignore that part …


How Can I Make My Icon System Accessible? is a post from CSS-Tricks

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 if a panel is active or not), and how we can use CSS for that. We’re not going to be using inline styles, or, as much as can be helped, class selectors, for reasons that will …


User Facing State is a post from CSS-Tricks

Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First

A month ago I explored the importance of relying on Interaction Media Features to identify the user’s ability to hover over elements or to detect the accuracy of their pointing device, meaning a fine pointer like a mouse or a coarse one like a finger.

But it goes beyond the input devices or the ability to hover; the screen refresh rate, the color of the screen, or the orientation. Making assumptions about these factors based on the width of the …


Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First is a post from CSS-Tricks

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 can do the same things. But, they are more powerful because of how they are live-interpolated. Should their values ever change (e.g. JavaScript, media query hits, etc) the change triggers immediate change on the site.

Cool, right? But still, how actually useful …


CSS Custom Properties and Theming is a post from CSS-Tricks

Focus Styles on Non-Interactive Elements?

Last month, Heather Migliorisi looked at the accessibility of Smooth Scrolling. In order to do smooth scrolling, you:

  1. Check if the clicked link is #jump link
  2. Stop the browser default behavior of jumping immediately to that element on the page
  3. Animate the scrolling to the element the #jump link pointed to

Stopping the browser default behavior is the part that is problematic for accessibility. No longer does the #jump link move focus to element the #jump link pointed to. …


Focus Styles on Non-Interactive Elements? is a post from CSS-Tricks

An Introduction to the Reduced Motion Media Query

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

Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need for people being able to take back control of animations might be more prevalent than you may initially think.

A brief history of Reduced Motion

When it was released in …


An Introduction to the Reduced Motion Media Query is a post from CSS-Tricks

Maintaining Accessibility in a Responsive World

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 can be awkward for anyone who uses the keyboard to navigate the site and also looks at the screen.

To avoid this, we try to remember that any accessibly-hidden content should be visible when it gains focus. For example, …


Maintaining Accessibility in a Responsive World is a post from CSS-Tricks

The Art of Labeling

There’s a lot of neat tricks in this video by Rob Dodson where he focuses on accessibility tricks in Chrome’s DevTools. A few notes:

  • Chrome DevTools has an experimental feature to help with accessibility testing that you can unlock if you head to chrome://flags/ and turn on in the DevTools settings.
  • Wrapping an <input type="checkbox"> in a <label> gives the input a name of the text in the label, even without a for attribute.
  • The aria-labelledby attribute overrides the name


The Art of Labeling is a post from CSS-Tricks