-
Notifications
You must be signed in to change notification settings - Fork 1
Associate HTML elements
The objective of this technique is to associate each data cell (in a data table) with the appropriate headers. This technique adds a headers attribute to each data cell (td element). It also adds an id attribute to any cell used as a header for other cells. The headers attribute of a cell contains a list of the id attributes of the associated header cells. If there is more than one id, they are separated by spaces. This technique is used when data cells are associated with more than one row and/or one column header. This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the th element alone or the th element with the scope attribute. Using this technique also makes these complex relationships perceivable when the presentation format changes. This technique is not recommended for layout tables since its use implies a relationship between cells that is not meaningful when tables are used for layout. Retrieved from (H43: Using id and headers attributes to associate data cells with header cells in data tables - Techniques for WCAG 2.0)[https://www.w3.org/TR/WCAG-TECHS/H43.html]
The objective of this technique is to associate header cells with data cells in complex tables using the scope attribute. The scope attribute may be used to clarify the scope of any cell used as a header. The scope identifies whether the cell is a header for a row, column, or group of rows or columns. The values row, col, rowgroup, and colgroup identify these possible scopes respectively. For simple data tables where the header is not in the first row or column, like the one in Example 1, this technique can be used. Based on screen reader support today, its use is suggested in two situations both relating to simple tables:
- data cells marked up with td that also function as row header or column header
- header cells marked up with td instead of th. Sometimes, authors use this to avoid the display characteristics associated with th and also do not choose to use CSS to control the display for th. Retrieved from (H63: Using the scope attribute to associate header cells and data cells in data tables - Techniques for WCAG 2.0)[https://www.w3.org/TR/WCAG-TECHS/H63.html]
The objective of this technique is to use the label element to explicitly associate a form control with a label. A label is attached to a specific form control through the use of the for attribute. The value of the for attribute must be the same as the value of the id attribute of the form control. The id attribute may have the same value as the name attribute, but both must be provided, and the id must be unique in the Web page. This technique is sufficient for Success Criteria 1.1.1, 1.3.1 and 4.1.2 whether or not the label element is visible. That is, it may be hidden using CSS. However, for Success Criterion 3.3.2, the label element must be visible since it provides assistance to all users who need help understanding the purpose of the field. An additional benefit of this technique is a larger clickable area for the control, since clicking on the label or the control will activate the control. This can be helpful for users with impaired motor control.
Retrieved from (H44: Using label elements to associate text labels with form controls - Techniques for WCAG 2.0)[https://www.w3.org/TR/WCAG-TECHS/H44.html]