How to Improve HTML Table Accessibility

HTML tables are a great way to Improve HTML Table Accessibility. They help people understand information that would be hard to read otherwise. For example, users can see how the information in each cell relates to other information in the table by quickly scanning it. But this also makes it harder for blind people to understand how these cells fit together.

And if it’s hard for them to get to your tables, you’ll stop a lot of people from using your product. We can solve this problem by writing HTML code correctly so that screen readers can understand it. And to do that, you’ll need to know how to make HTML tables easier to use. You will learn more about HTML table accessibility and how to make tables that are accessible in this article.

How to Improve HTML Table Accessibility

Use alt attributes meaningfully

The person who wrote the content decided to use green check mark images to show when a plan feature is part of a certain plan, but they forgot to add alt attributes. Users of AT can’t tell when a feature is added because the images in the cells don’t tell them anything.

To fix this, make sure that images have alt text that tells the user what the image is about. Even though it looks right, an alt attribute of “check mark” wouldn’t mean anything. I used the phrase “feature included” instead. (Though I think it would be better to use an icon font than an image.)

Caption that table

This table looks like it has a caption that says “Choose a plan,” but that text is actually a heading level h3>. Moving it inside the table> element and marking it as a caption> lets assistive technologies, like a screen reader, know that the text is related to the table> programmatically.

Include header text for every column

In this case, the first cell in the table is empty. Row 1 Column 1 is read out by the screen reader. All done. But what about the rest of the information in these cells? A header that says what they are is needed.

The author of the content doesn’t want a header for column one from a visual standpoint, but AT users benefit when the name of the column is spoken before the contents of the next cells.

Check your (con)text

Screen readers don’t always work the way you’d expect them to with abbreviations and punctuation. This table showed me two interesting examples. First, the number of users for the Team plan looks like “2-50,” but it is announced as “250” because the hyphen is not shown. To make sure this is clear, we can add the word “to” as hidden helper text, and just to be safe, we can hide the hyphen from AT.

What is HTML table accessibility?

There are features that make software and websites easier for people with disabilities to use. Some of these features are shortcuts for the keyboard, text-to-speech, access for people who are colorblind, captions, mono audio, and more. So, what exactly is HTML table accessibility?

Screen readers are a type of accessibility tool that help blind people understand what’s on a website or app. These helpful tools read the information out loud from HTML tags. But how do screen readers make sense of HTML tables?

Screen readers go from left to right and top to bottom when reading HTML tables. Because of this, it’s often hard for them to figure out where a cell is or how it relates to another cell or the header. So, developers should write correct HTML code that can be read by technologies that help people with disabilities. In the next part, we’ll talk about how you can do this.