Link to home
Create AccountLog in
Avatar of chantalcookware
chantalcookware

asked on

CSS To Make HTML Tables WCAG Compliant

Hello,
We are going thru the process of making our website friendly for visually impaired users. I have seen that the best way to accomodate existing html tables is to add CSS code and not to change the code directly on the html of each page. Does anyone know what code should be added to the CSS?
Thank you
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Sometimes (many times) we get lazy and just create a simple table like

<table>
   <tr>
         <td></td>
   <tr>
</table>

Open in new window

You want to make sure you follow the good HTML structure using table head and table body, not using the table for a funky layout and just for table data, using descriptive id's, perhaps a caption.  Overall, correct HTML structure for everything.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

Changing the code then is going to be dependent on how it stands now.  If you have it set up as a layout, consider using blocks (divs).  
Avatar of chantalcookware
chantalcookware

ASKER

Thank you. Ours is built in the lazy way. <table><tr><td> We use it to maintain format on the page, and within it is either plain text, image with alt text or embedded youtube video with alt text and title.
I had read that leaving it like that was best and to add css to 'translate' it for screen readers. Is that not the case. Would we need to recreate all of them using <div> like the below
<div role="rowgroup">
   <div role="row">
     <span role="cell">
       Data here
     </span>
     <span role="cell">
       More Data
     </span>
     <span role="cell">
       image or data.
     </span>
     <span role="cell">
       image or data
     </span>
   </div>

ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Scott Fell has covered things nicely and provided some awesome resources!

I second: the site needs a layout created with responsive CSS and not in tables.

It sounds like you have a site with layout built in tables and someone has suggested that you use CSS for layout. This is true. However, if you have a table structure in your HTML for layout, the CSS won't be able to do its job.
The HTML structure needs to be redone the proper way. The way Scott demonstrated. The tables need to go.

And I'd like to add:

There is no way to make tables that are creating your layout Accessible. This just won't make sense to a screen reader. Tables are meant for tabular data, not layout.

Setting your site up for those who are visually impaired is a great start! However, your site needs to be accessible to all, not just the sight impaired. Those who depend on a keyboard to navigate need an accessible site, too. Captions on any videos (or available transcripts) for those with hearing impairments. 

Accessibility is best implemented from the beginning of development and considered every step of the way.