Wikipedia:Manual of Style/Accessibility/Data tables tutorial: Difference between revisions
Content deleted Content added
No edit summary |
No edit summary |
||
Line 1:
== Providing abbreviations for long headers ==▼
*Priority: ... (... accessibility level)▼
*Difficulty: ...▼
*Priority: high (A accessibility level)▼
Voice browsers might read aloud this data table in the following order:<ref>http://www.w3.org/TR/WCAG10-HTML-TECHS/#identifying-table-rows-columns</ref>▼
▲*Difficulty: ... (not yet rated)
{{Quote |▼
''Caption: [caption text]''<br />▼
''[column header 1]: [row header 1], [column header 2]: [cell 1,2], [column header 3]: [cell 1,3]''<br />▼
''[column header 1]: [row header 2], [column header 2]: [cell 2,2], [column header 3]: [cell 2,3]''<br />▼
...}}▼
Several column headers placed inside the tables to separate visually the table, see [[:fr:Wikipédia:Atelier_accessibilité/Bonnes_pratiques#Tableaux_complexes|the example on the best practices]]. Split the table in several tables.▼
Note that each column header is repeated when reading every row, so an abbreviation could be added to long headers using the <code>abbr="..."</code> attribute<ref>[http://www.w3.org/TR/html401/struct/tables.html#h-11.4.1 Associating header information with data cells], W3C</ref>, for example:▼
<pre>▼
{|▼
|+ [caption text]▼
|-▼
! scope="col" abbr="Wikipedian" | Wikipedia editor▼
! scope="col" abbr="Edits" | Number of edits▼
! scope="col" | Last edit▼
! scope="col" abbr="Donations" | Donations (US$)▼
|-▼
...▼
</pre>▼
Row header not relevant as a header (date is chosen instead of the album title), [http://en.wikipedia.org/w/index.php?title=Wikipedia_talk:Manual_of_Style_(accessibility)&oldid=379786633#How_to_make_accessible_tables example]▼
In this example all column headers have an abbreviation except the column with the date of the last edit, which is short enough.▼
[http://fr.wikipedia.org/w/index.php?title=Utilisateur:Ascaron/couveuse&oldid=56297056 Utilisateur:Ascaron/couveuse]: "example" section is under correct row headers, but has nothing to do with column headers. This table mixes data with layout.
Bad structure and visual order, with icons and couloured [http://en.wikipedia.org/w/index.php?title=S.M.A.R.T.&oldid=377897571#Known_ATA_S.M.A.R.T._attributes example], [http://en.wikipedia.org/w/index.php?title=S.M.A.R.T.&diff=prev&oldid=380387962 partial correction].
== Images and color ==
Line 32 ⟶ 19:
=== Images ===
*Priority: ... (... accessibility level)
*Difficulty: ... (not yet rated)
Images used in tables are usually decorative icons so they need either:
Line 46 ⟶ 33:
*Difficulty: ... (not yet rated)
Data conveyed by color alone: [[Fiscal calendar#Chart of Different Fiscal Years]].
▲=== Correct headers structure ===
Bad structure and visual order, with icons and couloured [http://en.wikipedia.org/w/index.php?title=S.M.A.R.T.&oldid=377897571#Known_ATA_S.M.A.R.T._attributes example], [http://en.wikipedia.org/w/index.php?title=S.M.A.R.T.&diff=prev&oldid=380387962 partial correction].
▲*Priority: high (A accessibility level)
*Difficulty: ...▼
▲Several column headers placed inside the tables to separate visually the table, see [[:fr:Wikipédia:Atelier_accessibilité/Bonnes_pratiques#Tableaux_complexes|the example on the best practices]]. Split the table in several tables.
▲Row header not relevant as a header (date is chosen instead of the album title), [http://en.wikipedia.org/w/index.php?title=Wikipedia_talk:Manual_of_Style_(accessibility)&oldid=379786633#How_to_make_accessible_tables example]
▲=== Couldn't think of a title ===
*Priority: ... (... accessibility level)
*Difficulty: ...
▲== Providing abbreviations for long headers ==
▲*Difficulty: ... (not yet rated)
▲Voice browsers might read aloud this data table in the following order:<ref>http://www.w3.org/TR/WCAG10-HTML-TECHS/#identifying-table-rows-columns</ref>
▲{{Quote |
▲''Caption: [caption text]''<br />
▲''[column header 1]: [row header 1], [column header 2]: [cell 1,2], [column header 3]: [cell 1,3]''<br />
▲''[column header 1]: [row header 2], [column header 2]: [cell 2,2], [column header 3]: [cell 2,3]''<br />
▲...}}
▲Note that each column header is repeated when reading every row, so an abbreviation could be added to long headers using the <code>abbr="..."</code> attribute<ref>[http://www.w3.org/TR/html401/struct/tables.html#h-11.4.1 Associating header information with data cells], W3C</ref>, for example:
▲<pre>
▲{|
▲|+ [caption text]
▲|-
▲! scope="col" abbr="Wikipedian" | Wikipedia editor
▲! scope="col" abbr="Edits" | Number of edits
▲! scope="col" | Last edit
▲! scope="col" abbr="Donations" | Donations (US$)
▲|-
▲...
▲</pre>
▲In this example all column headers have an abbreviation except the column with the date of the last edit, which is short enough.
== Bonus guidelines ==
Line 71 ⟶ 78:
Row or column headers should not use colspan/rowspan to span several rows or columns without providing sub-headers.
Row headers spanning several rows (without more precise sub row headers), [http://en.wikipedia.org/w/index.php?title=Wikipedia_talk:Manual_of_Style_(accessibility)&oldid=379786633#How_to_make_accessible_tables example with an issue on the date], see http://webaim.org/techniques/tables/data#spanned
== Avoiding more than two levels of headers ==
*Priority: unknown (recommended by [[WebAIM]] techniques)
*Difficulty: ... (not yet rated)
Tables should not contain more than two levels of headers (which means 1) headers 2) sub-headers; but no 3) sub-sub headers)<ref>[http://webaim.org/techniques/tables/data#twolevels Avoid Tables with More than Two Levels of Row and/or Column Headers], Creating Accessible Tables, 2. Data Tables, WebAiM</ref>.
Line 84 ⟶ 91:
*Priority: bonus (this criterion is not part of any accessibility referential and has limited impact)
*Difficulty: very high (users like those attributes for presentation and are reluctant to remove them)
Some old screen readers and some user agents that does not conform to [[UAAG]] do not handle rowspan / colspan efficiently. The result can be very confusing for users of these technologies.
However, most widely used assistive technologies do support these attributes. For example, [[JAWS]] support it since JAWS 6.0 (march 2005).
=== Couldn't think of a title ===
| |||