Coding for Beginners: Recap #80—Accessibility for Forms and Tables
Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: https://join.designerslearncode.com/w...
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
------
Sometimes you may want to hide label text to avoid redundancy if sighted users are able to determine the label through visual cues. In this case you can add css to create a class and hide the label element.
Another way of handling this would be to add an aria-label attribute to identify the input rather than a label element.
A third way is to use the aria-labelledby attribute. The value of the id attribute of the button element is used by the aria-labelledby attribute:
Using the title attribute as a replacement for the label element is not recommended. This method has inconsistent support by assistive technologies. This is likely because the title attribute for the input element can be used for non-essential information like a tooltip when hovering over a form field for sighted users.
Sometimes you need to enclose the input element within the label element as an implicit label because the id attribute of the form field may not be known if it is being generated by a script.
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 #codingforbeginners #accessibility #learntocode #formaccessibility #tableaccessibility #semanticmarkup #semanticmarkupfortables #thead #tbody #tfoot #arialabels #waiaria #webaccessibilityinitiative #accessiblerichinternetapplication #wai-aria #aria-label #aria-labelledby #titleattribute #forminput #htmltutorialforbeginners #csstutorialforbeginners #htmltutorial #csstutorial #htmlcssfullcourse #codinglife