Select Page

Category: a11y

Focusing on Focus Styles

Not everyone uses a mouse to browse the internet. If you’re reading this post on a smartphone, this is obvious! What’s also worth pointing out is that there are other forms of input that people use to get things done. With these forms of input comes the need for focus styles. People People are complicated. We don’t necessarily perform the same behaviors consistently, nor do we always make decisions that make sense from an outsider’s perspective. Sometimes we even do something just to… do something. We get bored easily: tinkering, poking, and prodding things to customize them to better suit our needs, regardless of their original intent. People are also mortal. We can get sick and injured. Sometimes both at once. Sometimes it’s for a little while, sometimes it’s permanent. Regardless, it means that sometimes we’re unable to do things we want or need to do in the way we’re used to. People also live in the world. Sometimes we’re put into an environment where external factors conspire to prevent us from doing something the way that we’re accustomed to doing it. Ever been stuck at your parents’ house during the holidays and had to use their ancient-yet-still-serviceable desktop computer? It’s like that. Input Both mouse and touch input provide an indicator for interaction. For touch, it is obvious: Your finger acts as the bridge that connects your mind...

Read More

Keeping Parent Visible While Child in :focus

Say we have a . 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, so we’ll need: There is content in this div. Not just text, but links as well. This little piggy went to market. Go to market This is where it gets tricky. As soon as focus moves from the div to the anchor link inside it, the div is no longer in focus, which leads...

Read More

Simple Patterns for Separation (Better Than Color Alone)

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) using patterns, or a combination. Patrick Dillon tackled the Pie Chart thing Enhancing Charts With SVG Patterns: When one of the slices is filled with something more than color, it’s easier to figure out [who the Independents are]: See the Pen Political Party Affiliation – #2 by Patrick Dillon (@pdillon) on CodePen. Filling a pie slice...

Read More

How to Disable Links

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 link (with a valid href attribute) in HTML. Not to mention, why would you even want to? Links are the basis of the web. At a certain point, it looked like my co-workers were not going to accept this fact, so I started thinking of how this could be accomplished. Knowing that it would take a...

Read More

Accessible Web Apps with React, TypeScript, and AllyJS

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 ultimately these pursuits are done with the user’s device in mind, not the user themselves and their potential disabilities or restrictions. A responsive app should be one that delivers its content based on the needs of the user, not only their device. Luckily, there are tools to help alleviate the learning curve of accessibility-minded development. For example, GitHub...

Read More
  • 1
  • 2
000webhost logo