Archive for the ‘a11y’ Category

Keeping Parent Visible While Child in :focus

Posted on: No Comments
Say we have a <div>. We only want this div to be visible when it's hovered, so: div:hover { opacity: 1; } We need focus styles as well, for accessibility, so: div:hover, div:focus { opacity: 1; } But div's can't be focused on their own, ...

Advocating for Accessible UI Design

Posted on: No Comments
Accessibility is a hot topic these days, and the older we web-makers get, the hotter it's going to become! That might be a snarky outlook, but what I'm trying to say is that it's about time we start designing the web for everyone because the web was me...

Simple Patterns for Separation (Better Than Color Alone)

Posted on: No Comments
Color is pretty good for separating things. That's what your basic pie chart is, isn't it? You tell the slices apart by color. With enough color contrast, you might be OK, but you might be even better off (particularly where accessibility is concerned)...

How to Disable Links

Posted on: No Comments
The topic of disabling links popped up at my work the other day. Somehow, a "disabled" anchor style was added to our typography styles last year when I wasn't looking. There is a problem though: there is no real way to disable an <a> link (with a...

Accessible Web Apps with React, TypeScript, and AllyJS

Posted on: No Comments
Accessibility is an aspect of web development that is often overlooked. I would argue that it is as vital as overall performance and code reusability. We justify our endless pursuit of better performance and responsive design by citing the users, but u...

ARIA is Spackle, Not Rebar

Posted on: No Comments
Much like their physical counterparts, the materials we use to build websites have purpose. To use them without understanding their strengths and limitations is irresponsible. Nobody wants to live in an poorly-built house. So why are poorly-built websi...

Best Way to Programmatically Zoom a Web Application

Posted on: No Comments
Website accessibility has always been important, but nowadays, when we have clear standards and regulations from governments in most countries, it's become even more crucial to support those standards and make our projects as accessible as they can be....

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