[ARCHIVED] Are tables accessible in Canvas?

[stephanie_johns]

I was recently told by an instructional designer on campus that tables are not "accessible" in Canvas, meaning that screenreaders cannot parse and read them.

My understanding from reading Canvas documents (see below) is that a properly formatted/coded is accessible, although this is more implied than explicitly stated. I also am familiar with other recommendations, for example, that we should avoid using tables for design, that tables should be simple and not nested, and that large and complex tables should be broken down into simpler ones.

I would like to be able to respond to this person definitively, with whatever caveats the community is finding in practice.

General Accessibility Design Guidelines​ -- In particular, see the posting by  @raynev 

Accessibility within Canvas​

[mworden]

Stephanie,

There is no reason why a table in Canvas would not be accessible, assuming it was created properly. All of the elements are available to make it accessible so I'm not sure why you would be told that.

[stephanie_johns]

Mark,

Thanks for responding to my query and providing the confirmation that I wanted! I'll have to find out what the person's reservations are; they might be related to a specific browser or the fact that few people know how to set up the tables properly.

--Stephanie

[mworden]

Stephanie,

I am constantly pushing training out on how to properly format tables. It's right up there with using headings properly.

[astirling]

I agree with Mark; this is a continual conversation.  I think the key here is understanding what a "properly formatted table" actually means.  The information provided in the Canvas General Accessibility Design Guidelines for tables is important information (excerpt included below). I've found that many faculty have reservations about using tables because headings for columns and rows must be formatted in HTML.  If you have the skills to edit the HTML, it shouldn't be a problem. However, as mentioned, using tables for layout should be avoided as all tables should have headers for easy navigation using keyboard controls and screenreading assistive technology; however, when using tables for layout headers are often omitted or may not make sense.  I would recommend using DIVs for layout (which also requires HTML knowledge and editing).

Excerpt from Canvas General Accessibility Design Guidelines about tables:

Tables

Tables should be used for data display, not layout. Headings should always be included for columns and rows.

In Canvas, headings for table columns and rows can only be changed in the HTML editor.

Example Table

HTML Code:

• Column
  • <th scope="col">Questions</th>
  • <th scope="col">Percentage of Total</th>
• Row
  • <th scope="row">Website</th>
  • <th scope="row">Website URL</th>

[stephanie_johns]

Thanks, Anna, for your references--I do have the Canvas accessibility guide bookmarked and refer to it. I think as @Mark Worden said, it's a training issue. However, with all the other concerns facing faculty, I don't see many of them trying to use the table menu in Canvas (I don't know what many of the options mean--on my list to research) let alone the HTML editor.

[tom_gibbons]

Hi Stephanie--

This may be a misapprehension or miscommunication of an issue with Canvas when it was first implemented at Bellevue. At that time the table editor in the RCE did not allow you to create accessible tables. You had to edit the HTML. When I was at Bellevue and doing faculty training, I know I told people that, in general, if they needed a table, they should make it somewhere else (either an online table creator, Dreamweaver, something that produced clean table code) and paste in the code. The RCE underwent a pretty big overhaul 12-18 months ago, and the table editor now works like it should, and accessible tables are possible for non-coders (though you do have to know what the settings mean).

The other difficulty with tables, generally, is that they require people to shift their thinking about the way that they arrange the data within the table, which turns out to be a fairly significant shift in schema for most people. It's not just training them about the tags and labels. People want to make tables that look something like the screenshot, below, because that's what they put in their printed documents. But because the data is read left-to-right, top-to-bottom, this table is non-functional in its basic construction, even if it's tagged correctly. Because it duplicates the columns, left to right, it's going to be a frustrating maze for someone relying on machine reading. People still conceive documents (understandably and without even realizing it) based on the constrained 8.5"x11" page, and make space economizing choices based on that scope. It's a hard row to hoe, to convince someone that all that horizontal white space is irrelevant when making a table.

And trying to explain to someone when a simple table might actually be okay for layout and when it might not--it's really something that you have to learn with experience and testing. It's sort of like teaching someone when it's okay to compose a sentence fragment or start a sentence with a conjunction and when it isn't.

[stephanie_johns]

Hi Tom . . . Thanks so much for taking the time to provide this background!  I forwarded your posting to my team, with links to General Accessibility Design Guidelines and Accessibility within Canvas. Your example was especially illuminating because I ran into this very table construction in a syllabus I was editing last week. I hope in the future that Canvas will make accessible tables easier to create for the non-HTML users.

[szw151]

An accessible table is a simple data table with a caption and headers (row, column, or both) specified. The Canvas guidelines do not mention needing a caption. Also while you can make an accessible table in Canvas, it's a frustrating authoring experience (better than it used to be, but not as good as Dreamweaver or some other tool), so it is a good idea to create the table somewhere else and paste the code into Canvas.

[stephanie_johns]

Hi Sonya,

Thank you for your follow-up, especially on adding the caption; although I usually add one, I was unaware that this was also an accessibility requirement. I will try using the HTML editor I have for the tables and see if I can create a properly-coded template that I can reuse. (I use Microsoft Expression Web4, which is available as a free download.)

Although somewhat redundant, I also "sign post" the tables in narrative before they appear. For example, stating "the table below..." or "the following table shows..."

[tom_gibbons]

If you wanted to use Dreamweaver, you should have access to it (and to FrontPage, for that matter), through Bellevue's institutional license for those applications. Check with IT about it, if you want something more robust.

Also, Kompozer is kind of nice as a freeware editor. The code was pretty clean the last time I used it.

[stephanie_johns]

Thanks,  @tom_gibbons ! Good tip — I'll see if I can access Dreamweaver at BC; I've used it in the past. My goal is to create an accessible table template or templates that faculty can copy-and-paste and adapt without having to use the HTML editor.

[canvas-admins]

I'd like to recommend this extremely useful website: WebAIM: Articles. For tables: WebAIM: Creating Accessible Tables - Layout Tables 

[lsmith129]

In Canvas, headings for table columns and rows can only be changed in the HTML editor.

Is this changing anytime soon? Why can't we make columns in the rich content editor?

[szw151]

You can use the Accessibility checker to add table captions and headers easily. It is a nice hack until or if Instructure updates the RCE to make the table tool easier to use.

[lsmith129]

I have used headings for tables as the accessibility checker suggested, and I could be doing it wrong, but essentially it looks like I’ve titled my tables twice, if that makes sense. The columns would make the data accessible without the extra labels. Does anyone have any information on when this might be available?

[szw151]

Lisa,

I am not sure what you mean. The accessibility checker provides a nice place to type in your table caption (the title). And then you can specify the scope of the table headers (row, column, or both) and that will give you the essential elements of an accessible table. If you have title for your table outside the table code, I might look like you have two titles. Not sure what you mean by extra labels.

In the HTML view, column or row headers should have <th> tags with scope="col" or scope="row"

and the table title or caption is in a caption tag <caption> table title</caption>. You do not need headings (<h2>heading</h2>) for a table. If you create the table and add the data and then run the checker to fill in the caption and headers, your code will be correct. Let me know if I have misunderstood your question.

[lsmith129]

Yes, "two titles" is what I meant. This is what seems a bit cumbersome to non-screen readers. Any timeline for when data can be presented in non-tabular columns using the RCE?