The CSS Practices That Can Hurt Accessibility

CSS has become an all-powerful language. What started as a means to add basic styling to text and other design elements is now capable of much more.

We can use it to craft virtually any layout imaginable. Special effects and interactivity that used to require JavaScript or browser plugins are now supported natively. The language has gone from a basic tool to one of the foundational technologies behind every website.

But like any powerful tool, CSS can also have unintended side effects. Accessibility is among the biggest areas of concern. Some implementations can indeed do more harm than good.

With that in mind, let’s look at a few CSS practices that can hurt accessibility. They include common features that require careful consideration before you start writing code. Let’s get started!

Displaying Important Text Using the content Property

The CSS content property offers a slick way to add visual enhancements to an element. For example, you might use it in combination with a pseudo-element to add an icon before a passage of text or list item. It can also display images or strings of text.

But that last one can be particularly troublesome. Text added via the content property is not included in the document object model (DOM). That means assistive technology such as screen readers may not recognize it.

This is fine for purely decorative items. However, it could lead to accessibility issues if the text provides vital context to a page. Users may miss out on important information.

Therefore, it’s best to avoid using the content property for displaying text. That is unless you’re confident that it won’t interfere with a user’s ability to comprehend the page.

Creating Intense Flashing Animated Sequences

Animation is an area where CSS has seen a major evolution. Effects that were once the territory of third-party libraries can now be crafted with relative ease. And since they’re natively supported, they can take advantage of features such as hardware acceleration to boost performance.

Basic transitions and transforms can do wonders to create a mood and grab a user’s attention. And it’s also possible to construct incredibly realistic effects with the help of JavaScript.

But certain animation styles can have negative effects. For some users, too much movement can be disorienting – or much worse. Intense flashing or strobe effects can lead to seizures. This is possible on the web – just as it is in movies, television programming, and video games.

The WCAG 2.0 offers some research-backed guidance for creating animations that won’t trigger seizures or other adverse reactions. For instance, it’s recommended that a presentation is set to flash no more than three times per second, along with keeping sizing small and avoiding the color red.

Thankfully, this doesn’t limit our ability to impress users with movement. There are still plenty of opportunities to enhance our work. But the types of animation used and their potential impacts must be scrutinized.

Unintuitive :hover or :focus States on Interactive Elements

CSS is adept at styling interactive elements. Consider what’s possible with everyday items such as hyperlinks and form fields. They can be customized to the point of being unrecognizable when compared to their default look.

That’s all well and good. But it’s also important to think about what happens when a user interacts with an element. Imagine clicking a button that doesn’t offer any visual cues to confirm what has happened. Or using a keyboard to tab through a menu that doesn’t highlight the current link.

They may be simple, but these micro-interactions help provide users with context. Confirming a button click or understanding what menu item your cursor is focused on are just two examples. And each brings a sense of confidence as a visitor browses a website.

The initial styling of an interactive element is only half the battle. Offering intuitive styles for the :hover and :focus pseudo-classes complete the user experience.

It’s worth noting that these styles should be easily perceptible. In practice, that means using more than just color as an indicator. Adding animations, outlines, or icons can help ensure that no one is left out.

Taking the Basics of Accessible Design for Granted

We’ve all been there. A project deadline is rapidly approaching and you need to get things done. In the race to launch, some accessibility-related items might slip through the cracks.

Quite often it’s the basics of accessible design that get left behind. Those CSS practices that designers might take for granted and assume are already up to standard.

Prime examples include fundamentals such as legible typography and acceptable color contrast ratios. Without considering and testing these items, a website might not be as accessible as you think.

That’s why it’s worth taking some extra time to review the broader aspects of your site’s styles. Even if an item passes the “eyeball” inspection, go the extra mile to perform an audit. You might be surprised at how many opportunities for subtle improvement you’ll find.

It’s about Using CSS Responsibly

Because CSS is so powerful, it’s easy to be tempted by the possibilities it has to offer. Why settle for a basic animation when you can create something cinematic? And how could we not love the convenience of using it to generate content?

It all comes down to empathy and responsibility. Like any tool, CSS is capable of great things. But just because we can implement a specific feature doesn’t mean it’s right for accessibility. We live in a world where people from all walks of life will consume what we build. And it’s our job to ensure they can do so without obstacles.

The bright side is that avoiding the practices above is within everyone’s reach. For the most part, it’s a matter of thinking about the potential impact of what we do. From there, testing provides us with the data we need to refine things further.

CSS is there to make accessibility easier. It’s all in how we choose to use it.