Accessibilité d’Angular Material : l’attribut color et le RGAA

Attribut color et le RGAA

L’attribut HTML color définit la couleur d’un texte :

• soit avec le nom d’une couleur choisie parmi des valeurs normées ;
• soit sur la base d’un code hexadécimal ou RGB.

Dans le RGAA, l’attribut color fait partie des attributs de présentation qu’il ne faut pas utiliser, conformément au critère 10.1 ^[1] :

« Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ? »

Le RGAA interdit l’utilisation des balises et attributs de mise en forme parce qu’ils peuvent interférer avec les styles personnalisés. En effet, certaines personnes adaptent les présentations des pages web à leurs propres besoins : couleur des textes, alignement, espacement, etc.

Il est donc nécessaire d’utiliser exclusivement CSS pour mettre en forme le texte.

Dans le cas contraire, la présence d’un attribut color dans une page web constituerait une non-conformité au regard du RGAA.

Attribut color dans Angular Material

Cependant, Angular Material détourne l’usage de l’attribut HTML color et s’appuie dessus en tant que variable pour créer un thème.

À noter : Angular Material propose de base trois valeurs pour l’attribut color dans son système de thème. Ce sont les valeurs primary, accent et warn. ^[2]

Ainsi, à partir du code suivant :

<button>Primary</button>

Angular Material génère le code suivant :

<button class="mat-focus-indicator mat-raised-button mat-button-base mat-primary">Primary</button>

L’attribut color est toujours présent dans le code généré, mais une valeur de class CSS mat-primary a aussi été ajoutée dans l’attribut class sur la base de la valeur définie dans l’attribut color ^[3].

Toutefois, l’attribut HTML color n’est interprété par les navigateurs que sur les éléments font, basefont (dont l’utilisation est aussi interdite par le RGAA) et hr. ^[4]

Défini partout ailleurs, par exemple sur une balise div ou p, l’attribut color n’aura aucun effet : les surcharges de styles effectuées par des personnes handicapées fonctionneront donc comme prévu !

Conclusion

Si vous rencontrez l’attribut color lors d’un audit d’accessibilité et que l’attribut est présent sur un autre élément que font, basefont ou hr :

• ces cas d’usages n’entraînent aucun impact utilisateur. Ils ne nuisent donc pas à l’accessibilité de la page ;
• dans ce cas précis, il est inutile de relever une non-conformité pour le critère 10.1 du RGAA 4 pour l’attribut color.