Content Editors entering content is the bane of all developers lives, as the Editors will add in the most ill-systematic mark-up through the Content Management System (CMS). These make the pages look wrong sometimes, they put unordered lists in paragraphs, they put as many top header in as they can to stress it’s importance and many more annoyances. However they are not developer and do not know what they are doing, that’s why I build an Accessible Table Generator for the Editors at my work.
Tables are a big issue with accessibility because of how they are used. Back in the day this element was the god father of elements, as it was used everywhere to structure content. It was the best and the most simple method to make sure everything stayed in a format required for displaying on webpages and even e-shots. In most cases you could breakdown a website to fit a grid system, especially in older websites, so the only way to make this grid without using a lot of CSS and spans was the ‘table’ element. However times have moved on and standards have improved with the technology. Now developer are using the ‘division’ element (div) to structure pages. They have a lot of flexibility, there is less default styling to them, it take less elements to replicate structures and they are easier to work with, compared to the ‘table’ element. That’s why us developers use them instead, but Content Editors do not know of these or how to use these for their content. It is not their job to know this and that is why when they want to structure anything they use the WYSIWYG table generator. This then for them, puts the content in the structure they want and its easy as hell.
This however is not always the best method for what they truly need, not that the Editor would know. Straight off a table should not be used to structure content because of the difficulty them. Tables are hard to style as they have a lot of default CSS that needs to be overridden before you can even start on your own styles. With the hard styling and the standards compliant way you use the tables, it can be hard to format the contents in the way that it is required, as example below:
This may look like a great idea to have in a table format for the layout, as you have a top cell full width with content in then two other cells. One with an image and another with some more content. However if you look closely at this then a table would be very hard to use because not only first would you need to fight the built in styles, but the bottom content you would put in cells are not evenly sized. Trying to make some of the cells 50% of the full width and some 20/80 split is impossible without nesting more tables within more tables. As well as this, if you was to change the content and add more in, it would not flow. As you add content to this idea above, you would need to decide which block the content goes in to. These are just some of the problems you would come across with then simplest of design, but with the more systematic mark-up approach you can fullfill this with less HTML and some CSS. As you can see from the code below, I have got a container for all the content, so if it was to grow then it would retain the structure and styling. The image tag is place in where I want the content to flow round and then with CSS is floated left.
Ut lacus orci, aliquam a lacus sit amet, aliquet pulvinar odio. Integer quis ex et nulla vestibulum consecte
quis et quam. Donec eleifend felis non ultrices pharetra. Vivamus non dolor aliquet, suscipit nisi si amet, vehicula nisl.
Ut lacus orci, aliquam a lacus sit amet, aliquet pulvinar odio. Integer quis ex et nulla vestibulum consectetur quis et quam. Donec eleifend felis non ultrices pharetra. Vivamus non dolor aliquet, suscipit nisi sit amet, vehicula nisl. In nec pretium mi. Aenean sit amet arcu maximus, gravida orci non, dictum odio. Curabitur a nunc ipsum. Nunc sit amet leo urna. Donec in sollicitudin mi. Proin ac lectus orci. Sed scelerisque gravida est, at posuere orci malesuada vel.
Not only is it harder on the developer to use tables, but it is not what they are intended for. The World Wide Web Consortium (W3C) say in the Web Accessibility Initiative (WAI) that ‘tables are used to organize data with a logical relationship in grids’ (https://www.w3.org/WAI/tutorials/tables/). This means you should only use the tables when the content is made to be in a grid format and not only that but for the ‘table’ element it should only be tabular data. For non-tabular data you can replicate the table with division elements and CSS to structure it like a table.
When to use ‘tables’ or ‘divs’ then?
Use the table element when the content that will be entered is tabular. This can be content that you would normally put in a spreadsheet or a record of data.
Use the ‘div’ element when the content needs to be placed in a strict grid format, but is not tabular data. There is some discuss if this is ever required as you can always use CSS to format the content in that fashion.
Some people decide over the ‘table’ element for all data due to the difficulties with the element compared to the ‘div’, and also to the responsive issue on mobile devices. However there are plenty ways you can work with tables to make them easy and responsive. One way is to fully override the tables default instinct at a media size point and make them perform like division’s with the proper use of a table, as shown by CSS-Tricks.
The Accessibility Table Generator!!! This nifty little tool that I have built generates the table or division structure you need with all the accessibility required. Use the User Interface to mark out the table size or use the form fields. You can then decide on what kind table you need for your data. It could be one where the top row is your heading data, where the first column is your heading data or where both of them are. Next you decide type of mark-up you need and finally add a caption for the table. The caption will describe the data in the table.
Once you click the ‘Generate Table’ button below a grid of text area’s will appear. These represent the table with the grey fields being the heading fields in the table. You can now enter all the content you are going to add in the table before it generates the code.
When you are happy you can click the ‘Generate Accessible Table Mark-up’ button, which will generate the desired mark-up for you to copy and use.
Here are some resources that also could be useful:
- Accessible Table Generator Git Repo – https://github.com/PureRandom/AccessibleTableGenerator
- Accessible Table Generator Example – https://prfrank.azurewebsites.net/Experiment/AccessibleTableGenerator
- CSS-Tricks – https://css-tricks.com/responsive-data-tables/
- W3C WAI – https://www.w3.org/WAI/tutorials/tables/
- W3C – https://www.w3.org/TR/html401/struct/tables.html