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

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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-ARIADe l’accessibilité dans HTML5 et la documentation officielle du W3C.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



17 commentaires pour “Utiliser les rôles ARIA à la place des identifiants CSS”

  1. Félix P. dit :

    On peut dire que tu nous as gâté pour la démo ! ;)

  2. truffo dit :

    Très bonne pratique, il reste à voir les règles de précédence entre les classes et les roles. Ca peut vite devenir le bordel si on mixe les deux.

  3. br1o dit :

    Ok, vous avez gagné : j’ai changé les couleurs de l’exemple ^__^ : http://css4design.com/exemples/aria-display-table/

  4. websilone dit :

    A part alléger le code Html, je ne vois pas trop d’intérêt, non ? Comme le dit goetter, le sélecteur de classe reste plus « puissant » et en terme de performance, est ce que ça vaut le coup ?, le sélecteur d’ID étant le plus efficace a priori…. Et comme tu le dis, c’est pas compatible avec IE6…

    • br1o dit :

      Le sélecteur d’ID est effectivement le plus efficace en terme de performance. En revanche, dire que le sélecteur de classe est « plus puissant », n’a pas vraiment de signification, vu que c’est toi qui décide d’utiliser l’un ou l’autre. Ça va sans dire mais mieux en le disant : « il vaut toujours mieux avoir une feuille de style bien organisée, qu’en vrac » ;-) #proverbe_chinois

      • websilone dit :

        Tu as raison, on décide nous-même lequel utiliser mais je suis en plein dans des problématiques de « protection » de CSS dans le cadre de mon boulot (des partenaires affichent des blocs formatés en injectant le code Html et CSS dans leur page) du coup il faut qu’on veille à ne pas se faire « marcher dessus » par leur CSS déjà présente sur la page appelante… bref c’était une petite déformation professionnelle ;-)

    • br1o dit :

      A la base de cette idée, il y a le fait que j’étais un peu agaçé de voir des balises du genre

      <

      div id= »main » role= »main »> etc. Du coup, oui, d’une part ça allège le code (mais bon, c’est vraiment pas l’objectif) mais surtout ça rend le code un peu plus lisible. Et je trouve ça assez smart ;)

  5. sexyprout dit :

    Ça sert à rien est c’est super lent.

  6. Compatible IE7 et plus. Sémantiquement intéressant. J’adopte :)

  7. […] Par ailleurs, le fait de styler Basics, même rapidement, m’a permis de revoir totalement l’organisation du code HTML sous-jacent pour avoir une structure un peu plus homogène entre les différentes zones principales : le header, le contenu, les barres latérales et le footer. La cohérence du marquage HTML devrait faciliter l’accès éléments avec les sélecteurs CSS. Notamment en permettant de sélectionner les balises HTML en utilisant les rôles ARIA comme sélecteurs CSS. […]

  8. […] sur ce principe avec une version en ligne de cette  grille CSS (notez l’utilisation des rôles WAI-ARIA en action) […]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site