Easier Accessible Tables in HTML from Microsoft Word

There is an easy way to help non-technical staff adding tables to Web pages in your content management system to make them more accessible.  It involves Microsoft Word.  This may seem counter-intuitive if you have ever tried to create a Web page from a Microsoft Office product.  However, by using Microsoft Word and designating a table row as a header, you can convert a standard table from:

<table><tbody>…</tbody></table>

to

<table><thead>…</thead><tbody>…</tbody></table>

I was looking at this because we have staff who don’t use HTML regularly wanting to update content in a content management system.  Normally, when we show them how to paste in content from Microsoft Word, we ask them to paste it in without any Word coding.  Otherwise you get all of Word’s bizarre style information embedded in the HTML.

It got me thinking that, if Word is likely to bring its code over, perhaps it would designate something like a table header as well.  To test it, I created a table in Microsoft Word, selected the top row, and right clicked on it.  I chose Table Properties from the menu that popped up and toggled to the Row tab.

Select the checkbox on the Row tab of Table Properties that would cause the row to repeat as a header in a Microsoft Word document.

Select the checkbox on the Row tab of Table Properties that would cause the row to repeat as a header in a Microsoft Word document.

If you check the box next to Repeat as header row … and then click OK, you’re done.  You can then select the table and paste it into your content management system editor and it will have a <thead>… </thead> section designated.

However.

Many content management systems will see that you’re pasting from Microsoft – even Microsoft’s own SharePoint – and strip out the extra code.  You will need to look at your CMS to figure out the best method in yours.  For example, in the Ektron CMS we use for our public Web site, you can choose the Paste from Word button and it will paste in cleanly and keep the <thead> codes.

I’d expected that SharePoint would have a smoother handling of Word cut and paste but it doesn’t.  No trust, I suppose.  In any event, if you just paste a table in, while it looks fine, it will adopt the look and feel of an HTML page in SharePoint and lose the <thead>…</thead> elements.  Instead, select the Clipboard button that pops up next to your newly pasted-in table (this is the same button that appears any time you paste content into a Microsoft Office product) and choose the first Paste Options button.

Choose the first paste option when adding a table to SharePoint to keep the  tags.

Choose the first paste option when adding a table to SharePoint to keep the tags.

This will keep the formatting that you brought the table over with.  You may need to clean up the font or table lines now, but the average non-coder can handle that more easily than toggling over to the HTML and adding or otherwise tweaking the code.

This one thing isn’t enough to make a table accessible.  But if you’ve got non-technical people adding content to a site and you’re trying to make it more accessible, this may be a way that they can improve their content without having to recode the tables every time.

 

Leave a Reply

Your email address will not be published. Required fields are marked *