Cascading Style Sheets (CSS) are used to control the layout of your content, but CSS shouldn’t be used for structural elements.
This is a common issue when developers create tables. A CSS table may appear visually identical to an HTML (HyperText Markup Language) table, but screen readers and other assistive technologies may be unable to present the content to the user in a way that makes sense.
Here’s an example of an visual-only (and unsemantic) CSS table:
<div className="table">
<div className="tableHeading">
<div className="tableHead">Dogs</div>
<div className="tableHead">Cats</div>
</div>
<div className="tableBody">
<div className="tableRow">
<div className="tableCell">Golden Retriever</div>
<div className="tableCell">Persian</div>
</div>
</div>
</div>
This is a problem because the <div> element doesn’t convey semantic meaning. Screen readers may announce this table as “Dogs Cats Golden Retriever Persian.” The user can’t understand the relationship between the tabular entries, so the data is meaningless.
The “table" above violates the Web Content Accessibility Guidelines (WCAG) Success Criterion 1.3.1, “Info and Relationships.” That criterion requires that the information structure and relationships conveyed through presentation — in this case, a visual table — can be programmatically determined, or are available in text.
The solution is to use semantic HTML to identify the tables, then use CSS to adjust the visual presentation as needed. For detailed guidance, read: How To Build Accessible Tables.
However, while you shouldn’t use CSS to present tables, you can use CSS to make your HTML tables more accessible. Here are a few tips.
1. Make your tables more readable by alternating colors
As we’ve discussed in other articles, web accessibility isn’t just for people who are blind or Deaf.
CSS controls the visual presentation of your content, which is important for users with low vision, attention disorders, cognitive disabilities, and a wide range of other conditions. That’s especially important when you’re presenting large amounts of data, which is often the case when you’re creating tables.
You can make tables more readable (and more visually appealing) by alternating the color of each row. To do this, you’ll use the :nth-child(odd) and :nth-child(even), which applies different styles to elements based on their position. This tutorial from Mozilla Developer Network (MDN) provides an overview.
However, when adjusting the background color of your rows, remember: All text must maintain sufficient contrast with its background. Learn about the importance of color contrast.
Before applying any changes, make sure to test your color-pairs with the a11y® Color Contrast Accessibility Validator.
2. Use the :hover state to highlight active rows, then add padding to improve text readability
The CSS hover selector can be used to highlight rows as the user moves their cursor over the data. This can benefit a wide range of users with disabilities, and it’s often a nice visual accent for large tables that contain a lot of data.
To do this, simply apply a different background color for the :hover state. While you’re changing the style, you might also want to adjust the padding (spacing) between cells to refine the visual presentation. Learn more with this tutorial from W3 Schools.
Once again, if you’re changing the background color, you need to follow WCAG’s requirements for color contrast. This is a common issue when changing styles based on hover status — many developers choose a strong color (such as yellow) without considering the legibility of the text. If your user can’t read the content when they move their mouse over the cell, that’s an accessibility issue.
Another important note: Don’t confuse :hover (which is specific to cursors) with :focus (which controls the appearance of elements that can receive focus). The hover and focus styles have completely different purposes — generally, you shouldn’t change the default focus styles, which provide important functionality for keyboard users.
Related: Tips for Meeting WCAG 1.4.13: Content on Hover or Focus
3. Remember to test your work
Tables can create accessibility issues when developers ignore the best practices. However, if you use semantic HTML to define your table and make thoughtful decisions to improve the presentation with CSS, you’re on the right track.
Digital accessibility doesn’t make your content ugly, and it doesn’t restrict your capabilities as a developer. By testing your content against WCAG — and thinking about real users when designing your content — you can avoid common mistakes.
To start building your web accessibility strategy, download our eBook: The Ultimate Guide to Web Accessibility.
