{"id":230,"date":"2020-12-22T15:33:42","date_gmt":"2020-12-22T15:33:42","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=230"},"modified":"2025-01-25T21:26:50","modified_gmt":"2025-01-25T21:26:50","slug":"the-return-of-tables-tequila-and-beer","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2020\/12\/22\/the-return-of-tables-tequila-and-beer\/","title":{"rendered":"(the return of) Tables, Tequila and Beer"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-231 aligncenter\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2020\/12\/29366001_10156089435300429_.gif\" alt=\"red tone pic of billy and I in coronarita land\" width=\"800\" height=\"477\" \/><\/p>\n<p class=\"note\">This article is republished here <strong>with updates<\/strong> as the <a href=\"https:\/\/codepen.io\/stevef\/post\/tables-tequila-and-beer\">source article<\/a> can no longer be updated \ud83d\ude41<\/p>\n<p>In a 2018 article <a href=\"https:\/\/www.24a11y.com\/2018\/tables-and-beers\/\"><em>tables and beers<\/em><\/a> I explained how browsers correctly represent table semantics of simple tables with either a row <strong>or<\/strong> column of headers. Thus alleviating the need to use the <code>scope<\/code> attribute to identify a <code>th<\/code> as a row or column header. In this article I take it a little further, <em>with<\/em> tequila and beer.<\/p>\n<h2>Table with header cells in the top row <strong>and<\/strong> first column<\/h2>\n<p class=\"codepen\" style=\"height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"600\" data-theme-id=\"5390\" data-default-tab=\"html,result\" data-user=\"stevef\" data-slug-hash=\"YRBpqR\" data-pen-title=\"Table with header cells in the top row and first column\">See the Pen <a href=\"https:\/\/codepen.io\/stevef\/pen\/YRBpqR\"><br \/>\nTable with header cells in the top row and first column<\/a> by steve faulkner (<a href=\"https:\/\/codepen.io\/stevef\">@stevef<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2>The WAI advice meets reality<\/h2>\n<blockquote><p>In this table, the row header cells are in the second rather than in the first column. The approach is similar to the examples above: The scope of the header cells in the top row is set to col. By using the row value for scope assigns the header cells in the second column to the data cells on the left and the right of the individual header cell.<\/p><\/blockquote>\n<p>The advice <em>and<\/em> common expert opinion is that in the case of the example table, <code>scope<\/code> is required on <code>th<\/code> elements to provide appropriate semantics. When looking at the information exposed in the accessibility tree in modern browsers it becomes clear that <code>scope<\/code> is not needed.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-235 size-full\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2020\/12\/rc1.png\" alt=\"Accessibility tree for example table 1 without scope attributes shows that the column and row headers are conveyed correctly.\" width=\"470\" height=\"304\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2020\/12\/rc1.png 470w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2020\/12\/rc1-300x194.png 300w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/p>\n<p class=\"note\"><a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=916491\">Chrome had a bug<\/a>, fixed in 2019&#8230;, that resulted in the <code>th<\/code> in column 2 being incorrectly exposed as <code>rowheader<\/code> if the preceding element is a <code>td<\/code><\/p>\n<h2>Conclusion<\/h2>\n<p>Modern browsers expose the correct semantics for <code>th<\/code> elements in both column and row headers in simple data tables. This information is used by screen readers to convey correct header and data cell relationships to users.<\/p>\n<h1>Music for Tables, Tequila and Beer<\/h1>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/5xqgMsqIrwA?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/uPJxVwImxF0?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article is republished here with updates as the source article can no longer be updated \ud83d\ude41 In a 2018 article tables and beers I explained how browsers correctly represent table semantics of simple tables with either a row or column of headers. Thus alleviating the need to use the scope attribute to identify a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-230","post","type-post","status-publish","format-standard","hentry","category-htmlaccessibility"],"_links":{"self":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/comments?post=230"}],"version-history":[{"count":10,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/230\/revisions"}],"predecessor-version":[{"id":1498,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/230\/revisions\/1498"}],"wp:attachment":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/media?parent=230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/categories?post=230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/tags?post=230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}