User:Dodoïste/Accessibility

List of widely used templates that should be improved to produce accessible content

Data tables

• Template:Infobox weather
• Template:MIinttop (see M-28 (Michigan highway))
• Template:Year3
• Template:VG series reviews
• Emiel Puttemans and the like

Infoboxes

• Template:Infobox ship characteristics
• Template:Infobox artist discography

Spans wrongly used to carry information

• In {{Navbar}} <span title="edit this template">e</span> is not accessible and will not be read by assistive technologies. It should be replaced by <abbr title="edit this template">e</abbr>. Sadly ABBR color is changed to black in a global style sheet, should be fixed first.

Links moved over an image

• Template:Conservation status, Template:IUCN 3.1 navmap/full: imagemap is used correctly and is accessible. See also H24: Providing text alternatives for the area elements of image maps.

Examples of content that is not accessible

• Lists with long textual content (whole paragraphs!) used for layout
  • Semantically incorrect, not a list;
  • Often, a return is introduced between each element in the list in order to make a somewhat margin-bottom (enhances readability). The margin is actually caused by the ending of the list and the beginning of a new, which makes the whole list semantically useless;
  • Often, a return is introduced between each element in the list in order to make the source code easier to read.
  • definition description ":" used for layout, in "see also" at the top of pages of sections. Should be replaced by a template like {{
    seealso
    }}
• Various needs for lists;
• Wikipedia:HiddenStructure
• Maps with content added on it with position:absolute (pseudo-CSS content), or span title:
  • Postal_codes_in_Canada#Forward_sortation_areas
• Genealogy:
  • Jaime,_Duke_of_Madrid#Ancestry
  • {{Userboxtop}} and Albertosaurus#Classification and systematics
• Layout tables:
  • Ediacara biota
• Data tables:
  • Issues with rowspans
    • Utilisateur:Ascaron/couveuse: "example" section is under correct row headers, but has nothing to do with column headers. This table mixes data with layout.
    • Row headers spanning several rows (without more precise sub row headers), example with an issue on the date
    • More than tow level of headings makes it confusing for screen readers (see WebAIM article)
    • Several column headers placed inside the tables to separate visually the table, see 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), example
  • Collapsible function in tables needs an incorrect header in order to work properly.
  • Bad structure and visual order, with icons and couloured example, partial correction.
  • row headers not marked as such
  • Data conveyed by color alone:
    Fiscal calendar#Chart of Different Fiscal Years
    .
  • Armand Parmentier and the likes
  • Yvonne van Gennip, several column headers in the middle of the table

Example of templates that were fixed

• Template:Cards/core after discussion at Wikipedia_talk:Manual_of_Style_(accessibility)

Resources

• Web Accessibility Checker, WCAG 2.0 (Level A)

Web usability reviews

Reviews in progress

See User:Dodoïste/Sandbox.

Web accessibility reviews

Reviews to come

Template:taxobox and colour contrast

Past reviews

1. Wikipedia talk:Colours, about
   West Rail Line
   , 12:03, 20 August 2009 (UTC)

References

Books about usability

1. Ergonomie web, pour des sites web efficaces, Amélie Boucher

About colour contrast

1. Faciliter la lecture d’informations sur le web, 15 November 2003, Ergolab
2. Accessibilité visuelle des interfaces web, 24 January 2004, Ergolab
3. From Wikipédia:Atelier accessibilité/Bonnes pratiques#Choix de couleurs et contrastes

Le niveau de contraste des couleurs d'avant-plan et d'arrière-plan peut également être une source de difficulté pour les utilisateurs handicapés visuels, daltoniens, etc. Il est recommandé de conserver un ratio de contraste de couleurs d'avant-plan et d'arrière-plan au moins supérieur à 4.5, tel qu'il peut être mesuré avec le Colour Contrast Analyser. Ceci ne s'applique pas aux éléments purement décoratifs (bordures, images ne portant pas à elles seules une information nécessaire à la compréhension de la page, etc.)^{[WCAG-TECH 1]}

• Tool to mesure color contrast

La société <span style="color: #FCB415">Renault</span>

La société Renault

<div style="color: #fff;background:#ff8080;font-weight:bold;text-align: center;">
Pokemon
</div>

<div style="text-align: center;">
'''Pokemon'''
</div>

About home page

1. Ergonomie de la page d'accueil, 28 June 2004

Cite error: There are <ref group=WCAG-TECH> tags on this page, but the references will not show without a {{reflist|group=WCAG-TECH}} template (see the help page).