3

In our web accessibility class, our teacher kept telling us that we should put the <tfoot> tag before the <tbody> one in a table. He did not explain why, but he said it would make the table more accessible. As none of the student was used to do that, we did some research but couldn't find any argument on why putting <tfoot> tag before the <tbody> makes a table more accessible. May it be because of the reading order for screen readers ?

Can someone please enlighten me with this ?

1
  • 2
    Great question! I really like the fact you are being taught about accessibility, where are you studying as it needs to be on the curriculum in more educational institutes. May 6, 2020 at 13:16

3 Answers 3

6

You are being taught the HTML 4 way of doing things and it is now wrong

In the old specs the <tfoot> used to come before the <tbody>.

You can see at the official HTML standard repository that nearly 5 years ago the HTML spec was changed due to the fact that placing elements in the order suggested causes problems for accessibility. I have highlighted the key sentence as to why the <tfoot> should come after the <tbody>

Disallow <tfoot> before <tbody> in the content model

In HTML4, tfoot had to appear before tbody, but HTML5 allowed either before or after. Placing it before causes problems for keyboard focus order and order of accessibility objects, so this changes the content model to no longer allow tfoot before tbody.

The reason for this is DOM order, one of the key elements of accessibility. By placing the <tfoot> before the <tbody> it will get read first, meaning when you reach the end of the table there is no <tfoot> element as would be expected.

Additionally you will find the following quote from the W3C HTML recommendation supports tfoot at the end.

Content model: In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element, optionally intermixed with one or more script-supporting elements.

2

It's worth noting that thead, tfoot, and tbody are stylistic elements and effectively have no impact on accessibility.

The thead and tfoot elements define header and footer rows for tables. They provide no accessibility functionality and are generally only of use when a long table is printed - the head and/or foot rows will repeat at the top or bottom of each printed page. Similarly, the tbody element defines the body content of a data table (meaning anything that's not a thead or tfoot). Again, this element does not provide any additional accessibility benefit, but there is no harm in using it for table styling or other reasons. https://webaim.org/techniques/tables/data

To the best of my knowledge, these elements are not required in any way by WCAG. You can use them, if you want, but it won't make the table any more or less accessible to screen readers.

1

Others have pointed out, that the current html standard actually demands that the tfoot element comes last.

Even on informal terms, I highly doubt your instructor is correct. Any assistive accessibility tech can trivially prioritize output of tfoot content when processing a html table while the natural order for authoring is tfoot coming last.

Your teacher's view may origin with times when network bandwidths were several magnitudes lower than today. Large tables would take a considerable time to load and if a screen reader decided to present column summaries first for improved accessibility, it would have fallen silent for that considerable time due to lack of data.

However, today this is not an issue anymore. To be more precise, in case it was an issue, accessibility would suffer in many other places of the web presence too (disruptive network service) or content structure would violate accessibility guidelines (giant amount of data in table).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.