CSS is now an omnipotent language. What started out as a way to add basic styling to text and other design elements is now capable of much more.
We can use it to create almost any layout imaginable. Special effects and interactivity that previously required JavaScript or browser plugins are now natively supported. The language has gone from a basic tool to one of the fundamental technologies behind every website.
But like any powerful tool, CSS can also have unintended side effects. Accessibility is among the areas of greatest concern. Some implementations can 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. On with us!
Displaying Important Text Using the content Property
The SEC content property provides a slick way to add visual enhancements to an element. For example, you might use it in conjunction with a dummy element to add an icon before a text excerpt or list item. It can also display images or text strings.
But that last one can be particularly troublesome. Text added via the content a property is not included in the document object model (DOM). This means that assistive technology such as screen readers may not recognize it.
This is fine for decorative items only. However, it can lead to accessibility issues if the text provides critical context for a page. Users may miss important information.
Therefore, it is best to avoid using the content property to display text. That is unless you are confident that it will not affect a user’s ability to understand the page.
Creating Brilliantly Animated Sequences
Animation is an area where CSS has developed greatly. Effects that were once the preserve of third-party libraries can now be done with ease. And since they’re natively supported, they can take advantage of features like hardware acceleration to boost performance.
Basic transitions and transformations can do wonders to create a mood and grab a user’s attention. And it is also possible to build extremely realistic effects with the help of JavaScript.
But certain animation styles can have negative effects. For some users, too much movement can be distracting – or much worse. Intense exposure to a flash or strobe may cause seizures. This is possible on the web – just as it is in movies, TV shows, and video games.
The WCAG 2.0 provides research-backed guidance for creating animations that do not trigger seizures or other adverse reactions. For example, it is recommended to set a presentation to flash more than three times per second, as well as keep the size small and avoid the color red.
Fortunately, this does not limit our ability to apply movement to users. There are still plenty of opportunities to improve our work. But the types of animation used and their possible consequences must be examined.
Unintelligible :hover or :focus States of Interactive Elements
CSS is capable of styling interactive elements. Think of what everyday items like hyperlinks and form fields can do. They can be customized to the extent that they are unrecognizable compared to their default appearance.
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 offers no visual cues to confirm what happened. Or use a keyboard to tab through a menu that doesn’t highlight the current link.
They may be simple, but these micro-interactions help provide context to users. Confirming a button click or understanding which menu item your cursor is focused on are just two examples. And all of them give a feeling of trust when a visitor is browsing 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 is worth noting that these styles should be easily recognizable. In practice, that means more than just using color as an indicator. Adding animation, outlines, or icons can ensure that no one is left out.
Giving Donors the Basics of Accessible Design
We’ve all been there. A project deadline is fast approaching and you need to get things done. In the race to launch, some accessibility-related items may slip through the cracks.
Often the basics of accessible design are left behind. Those CSS practices that designers might take for granted are already in the standard.
Key examples include basics such as readable typography and acceptable color contrast ratios. Without considering and testing these items, a website may 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 “eye” inspection, go the extra mile to inspect. You might be surprised how many opportunities for subtle improvement you will find.
It’s about Using CSS Responsibly
Because CSS is so powerful, it’s easy to be tempted by its possibilities. Why settle for basic animation when you can create something cinematic? And how could we not love the convenience of using it to generate content?
It’s all about compassion and responsibility. Like any tool, CSS is capable of amazing things. But just about us can the implementation of a particular feature does not mean that it is correct for accessibility. We live in a world where people from all walks of life consume what we build. And it is our duty to ensure that they can do so without obstacles.
The bright side is that avoiding the above practices 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, the test provides the data we need to improve things further.
CSS exists to make accessibility easier. It’s all in how we choose to use it.
