Coding for Beginners: Web Accessibility #21— Making Tables Accessible with Semantic Markup

Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: join.designerslearncode.com/webaccesspro

The Daily Code Snippet is part of our "Coding for Beginners" video series for designers to learn the basics of HTML and CSS coding. We teach a single, easy to understand concept in each video so that you can learn to code even if you have a busy schedule. Subscribe here:    / @designerslearncode  

------

We touched upon some issues of accessibility with forms. What about tables?

There are semantic elements we can add to our tables to help identify the roles of the content of our table: thead, tbody, and tfoot. This is important especially when you have a long, complicated table with a lot of information.

In addition to using the th element to identify a heading in a table column or row, we can use the thead element to further indicate the first row as a header row in a table.

This is useful to those accessing your table data using an assistive device. It differentiates the header section from the body or main content which would be enclosed in a tbody element.

Any footer information would be enclosed in a tfoot element. The footer of a table should contain ancillary information that puts the table data in context or may provide additional information to clarify the data presented.

#HTML #CSS #coding #webdesign #web #designerslearncode #dailycodesnippet #accessibility #thead #tbody #tfoot #semanticmarkupfortables #webaccessibility #accessibilityfortables #tablehead #tablebody #tablefoot #webdevelopment #learntocode #learntocodeforfree #htmltutorialforbeginners #cssfullcourse #csstutorialforbeginners #htmltutorial #csstutorial #webdevelopmentfullcourse #learntocodeforbeginners #codingforbeginners #accessibilitymatters