[ARCHIVED] How can I change my layout table to not flag up the accessibility checker?

[JamalKinsella]

Hello everyone, 

I have a few pages on Canvas that use tables in order to create specific layouts and colours, but I am aware that this can create accessibility issues, including for screen readers. 

My tables have been flagged up by my accessibility checker as not containing headers, and I wish there was a feature to tell Canvas "This is a 'decorative table'" similar to images! 

I'm aware that you can place table role="presentation" into the code in order to improve the experience for screen readers, but placing this code in my text does not cause the accessibility checker issues to disappear. 

Currently, I have 37(!) accessibility issues, all due to tables. An example of my code is this: 

---

<table style="background-color: #757477; padding: 30px; height: 1037px; width: 99.6078%;" role="presentation" border="0" width="100%" cellspacing="0">
<tbody>
<tr style="height: 206px;">
<td style="text-align: center; height: 206px; width: 100%;">
<span style="font-family: verdana, geneva;">
</span>
</td>
</tr>
</tbody>
</table>

---

Does anyone know how I can get the accessibility checker to ignore the table, and stop giving me messages like those below?

"Tables should include a caption describing the contents of the table." and "Tables should include a caption describing the contents of the table."

[Chris_Hofer]

Hello @JamalKinsella ...

I don't believe that HTML tables are designed to be "decorative".  (I also think that wanting the ability to have a table to be "decorative" may be beyond the scope of Instructure...because you'd be asking for an additional property to be added to tables created in HTML.)  Tables are usually inserted into webpages (or in your case, Canvas content pages) to hold/display data.  While I understand there may be design uses for using tables in your pages, it might not be beneficial to use them in your design...specifically for those accessibility concerns that you've already hinted at.  This website, HTML Tables, describes many of the properties you can apply to HTML tables.  If you use the <caption> </caption> tags, that would solve the issue of the Canvas accessibility checker from detecting an issue with your table.  This would add a caption direction above your table so that you could provide a brief description of the table.  The example about half-way down the page of the site I linked for you shows how that code might look on your page: HTML Table - Add a Caption.

I hope this will help a bit.  Sing out if you have any other questions about this...thanks!  Take care, stay safe, and be well.