My previous article and video covered how you can make accessible components when developing in the progressive enhancement mindset. In particular, it discussed how you do that when writing out the HTML for a component, and in this case, an accordion. This article and video will walk through the steps of making an accessible component while adding styles to the accordion.
Step 2: CSS
If you are interested in making sure your site or component is accessible before you even start coding, you can follow the tips from this article, Accessible by Design. I’m using the BEM naming convention in this example. Having used it on a lot of projects, I appreciate the readability of BEM when using Sass. There’s a lot of small things we can do with CSS to make a component and even a whole website accessible.
Use Colors That Pass the Contrast Ratio
Pick colors that pass the WCAG AA contrast ratio. Good contrast enables users who are color blind, have low vision, blurry vision, etc. to see our content well.
Make Sure Those Colors Aren’t the Only Indication of Information
Make sure the content is distinguishable by verifying that colors aren’t the only way information is conveyed. One way to do that is by adding icons or more detailed hover animations. For example, our accordion component has an arrow icon on each of the accordion sections that indicates whether the content is expanded or not.
Add a Custom Focus Style
Add focus styles to every HTML element that has a focus state (buttons, links, form elements). Then you don’t have to worry about adding focus style to every new component. I chose to use one that has a box shadow instead of an outline. I like it because it allows two borders (a white inner border and a black outer border), that way it looks clean and is a good compromise with designers. You still have to test that the focus styles are working, though, so don’t skip keyboard testing at the end!
*:focus {
outline: none;
box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #000 !important;
}
Add Hover Styles
Add hover styles, which should include at least one indicator that is not a change in color to any buttons and links.
Multiple hover styles are important for the same reason color contrast is important. We want to make sure that any user knows they can interact with our links and buttons.
Add Styles to Show and Hide Content (if needed)
Add the styles for what the content will look like once we add the functionality to toggle the
aria-expandedvalues of the button. Instead of toggling a class to show the content, I like to toggle thearia-expandedvalue. This way the component’s functionality is directly dependent on being accessible, and I don’t have to go back and do extra work to make it accessible.
.accordion__content[aria-hidden='false'] {
display: block;
}
.accordion__content[aria-hidden='true'] {
display: none;
}
Our component looks like an accordion now! To view all of the styles that I added to the component, you can take a look at the CSS CodePen. While it doesn’t have any functionality yet, it will in step three of this progressive enhancement and accessibility series, when we go over how to add JavaScript to the accordion. Check The Foundry again soon for the next article and video! And sign up for Sparkbox Newsletters to be sure you don’t miss a thing.
