HTML & CSS

Utiliser les rôles ARIA à la place des identifiants CSS

Les rôles ARIA sont des attributs que l’on ajoute aux balises HTML dans certaines zones du document pour préciser leur fonction. Ces attributs permettent aux différentes technologies d’assistance pour les personnes en situation de handicap de se repérer dans votre document. Dans cet article nous verrons comment nous pouvons remplacer l’attribut id par les rôles ARIA lorsqu’il s’agit d’accéder aux éléments pour les styler avec CSS.

Marquage HTML

Voici quelques exemples de balises auxquelles j’ai attribué des rôles ARIA :

<body role="document">
<header role="banner">
<nav role="navigation">
<ul role="menubar">
<div role="main">
<article role="article">

Exemple de CSS

Pour cibler les éléments vus plus haut, il suffit d’utiliser les sélecteurs d’attributs à la place des identifiants.

header[role="banner"] {
    background: #E5525C;
}

A la place de

#banner {
    background: #E5525C;
}

En bref

A première vue, et après quelques essais, il semble que cela fonctionne bien dans les navigateurs modernes et à partir de IE7 pour Internet Explorer. J’ai mis un exemple en ligne pour fixer un peu les idées ; il me sers également à tester les propriétés `display: table` et `display: table-cell` pour faire une mise en page web en attendant de développer cette technique dans un prochain article.

→ Voir l’exemple et la CSS associée

→ Lire cette excellente introduction à WAI-ARIA, De l’accessibilité dans HTML5 et la documentation officielle du W3C.

Publié le par Bruno Bichet