CSS & Webdesign » Navigation

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

Bruno Bichet — Mon, 18 Apr 2011 08:48:44 +0000

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 :

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.

Articles sur le même sujet

Conventions de nommage pour les CSS — identifiants et classes — de votre site web

Bruno Bichet — Fri, 17 Sep 2010 12:04:08 +0000

Le nommage des identifiants et des classes est une question à laquelle l’intégrateur web est confronté chaque fois qu’il démarre un projet. Dans l’idéal il faut trouver des intitulés d’identifiants et de classes reflétant la signification des contenus qu’ils enveloppent. A cet égard, #publicite-principale est plus judicieux que #publicite-en-haut-a-droite dans la mesure où l’emplacement de la publicité — fut-elle principale — peut être placée à différentes endroits stratégiques. Pour nous aider à y voir plus clair, Andy Clarke (revisitant Eric Meyer) a eu la bonne idée de partager ses réflexions sur le sujet (dès 2004) sous la forme d’une proposition de convention de nommage pour les identifiants et les classes susceptibles de faire partie de la majorité des projets web.

Eléments communs

#container: Bloc pour l’ensemble de la page (généralement une balise `div`).

#branding

En-tête, bannière ou marque du site.

#branding-logo: Logo du site.

#branding-tagline: Accroche, slogan, sous-titre définissant le but du site.

#nav or #navigation

Contient les éléments pour la navigation dans le site.

#nav-main: Navigation principale.

#nav-section: Navigation vers les pages appartenant à la section en cours.

#nav-external: Navigation vers des pages externes au site.

#nav-supplementary or #nav-supp: Liste de liens supplémentaires (ex. dans le pied de page).

#nav-(whatever): Listes de liens à nommer en fonction des besoins.

#search

Contient les outils de recherche et l’affichage des résultats.

#search-input: Formulaire de recherche.

#search-output: Résultat de la recherche, dans une balise `div` ou dans une liste de définition `dl`.

#content

Zone de contenus ayant un autre but que la navigation.

#content-main: Zone de contenu principal.

#content-news: Contenu de type « News ».

#content-(whatever): Tout autre type de contenu, incluant #content-related, #content-quote, etc.

#siteinfo

Regroupe toute sorte d’information relatives au site.

#siteinfo-legal: Informations de copyright.

#siteinfo-credits: Crédits divers.

Eléments spécifiques au e-commerce

#content-products

Zone globale accueillant des produits.

.products: Produit individuel.

.products-prices: Prix, rabais, offres spéciales, etc.

.products-description: Résumé ou description détaillée d’un produit.

.products-review: Avis de consommateur.

.products-(whatever): Tout type de contenu lié au produit.

Articles sur le même sujet

WordPress — Menus «funky» avec wp_list_bookmarks()

Bruno Bichet — Wed, 24 Feb 2010 18:56:47 +0000

WordPress est un CMS formidable, ce qui ne l’empêche pas d’avoir des lacunes. L’une d’elle concerne la possibilité de construire des menus composés de liens vers des pages ou des articles publiés sur le blog, ce qui est courant avec des CMS comme Drupal ou Joomla. En général, je me contente de créer mon menu en HTML et ça fonctionne très bien. Toutefois, cette solution n’est pas toujours très évidente à maintenir. Voici la solution que j’ai retenue pour la mise en place des liens pointant vers les articles que je souhaitais mettre en avant sur ce blog.

La fonction wp_list_bookmarks()

La fonction wp_list_bookmarks() possède plusieurs arguments intéressants dont l’identifiant de la catégorie à afficher category=386 et before et after qui permettent de spécifier les balises HTML que vous voulez avant et après chaque élément de liste. Par défaut, il s’agit de la balise li. Toutefois, pour une bonne gestion des coins arrondis, j’ai ajouté une balise p (oui, un p dans le li, ça manque d’élégance… ), ce qui oblige à préciser explicitement les balises li.


    
        &after='); ?>

Une pincée de CSS3 pour épicer le menu

#featured-posts ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#featured-posts li {
    float: left;
    width: 102px;
    margin-right: 18px;
}
#featured-posts li:hover {
    background: #2F0615;
    color: #fff;
/*
* Coins arrondis
/
    -moz-border-radius: 5px 0 5px 0;
    -webkit-border-radius: 5px 0 5px 0;
    border-radius: 5px 0 5px 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 5px;
/
* Ombres portées
*/
    -webkit-box-shadow: #aaa 3px 3px 3px;
    -moz-box-shadow: #aaa 3px 3px 3px;
    box-shadow: #aaa 3px 3px 3px;
}

En fonction de la grille de mise en page que j’ai mise en place sur ce blog, j’ai opté pour l’affichage de 8 liens occupant chacun 2 colonnes sur les 16 disponibles. Si vous voulez disposer d’un deuxième menu comme celui que j’ai ajouté dans mon pied de page, il suffit de dupliquer la fonction wp_list_bookmarks, de changer l’id de la catégorie des liens et de remplacer #featured-posts par .featured-posts and the cat’s in the bag!

Note : si vous aviez déjà utilisé le Widget Liens dans votre barre latérale, cette catégorie est affichée deux fois. Pour la supprimer de votre blogroll faites glisser le Widget Liens, sélectionnez la catégorie dans le menu déroulant et répétez l’opération autant de fois que nécessaire.

Pour finir

Oui, toutes ces opérations sont un peu fastidieuses, mais je n’ai pas encore trouvé mieux à part attendre la sortie prochaine de WordPress 3.0. D’ailleurs, à ce propos, je vous propose de lire l’article Les menus, l’intégration de MU, et une course aux correctifs ! de Xavier Borderie sur WordPress Francophone qui parle notamment de l’intégration prochaine d’une fonctionnalités permettant de faire des menus en veux-tu en voilà !

Articles sur le même sujet

Que manque-t-il à WordPress ?

Bruno Bichet — Mon, 10 Aug 2009 18:00:50 +0000

A force de lire que WordPress est la Rolls des CMS spécialisée dans l’édition de blogs et qu’il se défend pas mal comme CMS tout court, j’ai cherché la petite bête pour mettre au jour les choses qui manquent ou qui restent perfectibles. Je sais que des plugins existent pour pallier quelques insuffisances, mais j’ai préféré me focaliser sur la version standard pour permettre d’éventuelles comparaisons avec d’autres outils de gestion de contenus.

Des catégories un peu laxistes

Dans WordPress, les articles s’organisent principalement en catégories et sous-catégories, ce qui semble suffisant dans la plupart des cas. Toutefois, le fait de pouvoir classer un article dans plusieurs catégories rend ce système peu fiable : un billet peut se retrouver dans la sous-catégorie Photoshop sans passer par la case Graphisme, par exemple… Au bout d’un moment, on en vient vite à se demander si l’abandon des catégories au profit des tags ne serait pas une bonne idée ;)

Manquerait pas un niveau ?

Par ailleurs, il manque certainement un niveau supplémentaire pour classer les articles, comme c’est le cas dans Joomla! qui propose les Sections pour regrouper les catégories. On peut ainsi ventiler les contenus de manière plus efficace, et surtout, on peut pratiquement tout classer de cette façon. Ce niveau est indispensable lorsqu’on présente des savoirs encyclopédiques ou, plus modestement, des tutoriels.

Trop de chemins tue le chemin

Dans WordPress (et les autres systèmes de blog), le fait que la même information soit accessible de plusieurs manières (catégories, tags, archives, etc.) ne signifie pas pour autant qu’elle sera trouvée facilement.

A cet égard, il suffit de consulter ses statistiques de fréquentation pour s’apercevoir que ces entrées sont assez peu utilisées par les internautes qui arrivent pour la plupart directement sur les articles via Google ou sur la page d’accueil ; le scroll vertical faisant alors office de navigation pifométrique…

Maillage interne

Contrairement à Joomla! qui propose de créer des menus en veux-tu en voilà en ajoutant des liens à partir de la console d’administration, WordPress ne propose pas d’outils dédiés. Il existe bien une possibilité en détournant la blogoliste de son objectif premier, mais il faut de toutes manières mettre les mains dans le code pour jouer avec les paramètres optionnels de la fonction Liste de liens.

Par ailleurs, une fonction apparue avec la RC1 de Dotclear notamment, rend possible la création d’un lien vers un ancien billet sans quitter l’édition du billet pour rechercher l’URL du billet en question et sans faire de fastidieux copiés-collés d’un onglet ou d’une fenêtre à l’autre.

Ajouter des identifiants de classe CSS

Ce qui serait vraiment top, c’est de pouvoir ajouter une classe facilement lorsqu’on insère un élément HTML depuis l’éditeur visuel comme c’est le cas pour les images. En fait, ce qu’il faudrait, c’est que WordPress se comporte comme certains éditeur HTML WYSIWYG, afin d’élargir un peu la palette des balises HTML.

Splitter un article

WordPress permet de splitter un article en plusieurs parties, mais chacune d’entre elles ne reste accessible que par un identifiant numérique. Plume CMS quant à lui propose, dès l’édition de l’article, la création de chapitres qui deviendront autant de parties accessibles par un titre explicite donné lors de la rédaction.

Système de recherche interne

Je ne sais pas si vous êtes comme moi, mais j’utilise souvent mon blog pour rechercher des ressources. Or, le formulaire de recherche proposé par défaut retourne des résultats vraiment très large dès lors que de nombreux billets traitent du même sujet. Le pire étant que les résultats suivent eux-aussi l’ordre anté-chronologique, sans soucis de pertinence en terme de contenu. C’est peut-être même la pire fonction de recherche qu’il m’ait été donné d’utiliser ^^

En bref

Si WordPress est une plate-forme de blog très complète qui peut se prévaloir du titre de CMS pour une grande partie des projets de sites web professionnels, il reste de nombreux points bloquants dès lors que le projet nécessite une certaine rigueur dans l’organisation des données.

Note : J’ai commencé ce billet en août 2008 pour faire le point sur les petites ou grandes choses qui manquaient à WordPress, notamment par rapport à d’autres CMS. A l’époque j’avais lancé une chaine de blog pour recueillir le sentiment des utilisateurs de WordPress. Avec un peu de retard, voici la récolte :

Articles sur le même sujet

30 menus de navigation en CSS pour votre site web

Bruno Bichet — Fri, 26 Dec 2008 13:18:40 +0000

styledmenus propose une trentaine de menus de navigation compatibles avec les navigateurs IE6, IE7, Firefox, Opera, Safari, Chrome et conformes aux recommandations du W3C.

Le téléchargement de ces menus est gratuit ; toutefois, vous pouvez acheter les fichiers originaux au format .psd si vous voulez personnaliser davantage vos menus selon votre charte graphique.

Merci Thierry ;)

Articles sur le même sujet

Navigation web — donne-moi ce que je veux ! est en ligne gratuitement

Bruno Bichet — Sun, 21 Sep 2008 06:34:17 +0000

L’excellent guide sur les différentes systèmes de navigation Donne-moi ce que je veux ! » est désormais accessible gratuitement en ligne. Découvrez 60 modèles de navigation commentés des bonnes pratiques d’ergonomie, de référencement et d’accessibilité.

Via le blog Alsacréations.

Articles sur le même sujet

Menu à onglets (tabs) — idTabs ou domTab ?

Bruno Bichet — Wed, 27 Aug 2008 04:26:52 +0000

Menu à onglets avec Javascript et CSS fait partie des articles les plus lus de ce blogzine. Mais la solution présentée n’est pas un modèle d’accessibilité car elle ne fonctionne plus correctement si Javascript est désactivé. Dans ce cas, le menu reste bloqué sur le premier onglet actif. Bien que certains trouvent qu’il s’agit d’une fonctionnalité et non d’un défaut, je préconise deux scripts bien plus accessibles et efficaces : idTabs de Sean Catchpole et domtab de Chris Heilmann.

Avant de choisir un système de menus à onglets, il est important de vérifier les trois points suivants :

Poids du script — généralement faible pour ce genre de script, il néanmoins penser à additionner les tailles de tous les petits scripts déjà installés.
- idTabs -> 10 ko + jQuery -> 31 ko = 41 ko. Si vous devez juste ajouter un menu à onglets sur votre site, ce poids est rédhibitoire.
- domtab -> 10 ko. C’est déjà beaucoup mieux, et par rapport à idTabs, vous pourrez encore installer plusieurs scripts intéressants avant d’arriver à 41 ko.
Ceci dit, l’appétit vient en mangeant et le nombre de scripts à tendance à s’allonger, de sorte que l’investissement en jQuery est très vite rentabilisé.
Comportement quand javascript n’est pas activé — Ces deux scripts se dégradent élégamment en l’absence de Javascript. Comme l’affichage des onglets est géré par la feuille de style CSS ils restent en place ; les éléments masqués au départ s’affichent simplement les uns sous les autres.
Balisage HTML, classes CSS et identifiants nécessaires — Le fonctionnement de ses deux scripts suit le même principe : il faut identifier les zones où le script va agir (identifiants, classes) et ajouter des ancres internes vers lesquelles les liens des onglets pointeront.

Commençons par idTabs »

Articles sur le même sujet

Supprimer une catégorie WordPress dans le flux RSS avec le plugin "Advanced Category Excluder"

Bruno Bichet — Tue, 08 Jan 2008 00:37:50 +0000

En participant au concours de référencement zobibi, je me suis attaché à ne pas trop polluer la Home de ce blog en masquant les billets de la catégorie zobibi avec un position: absolute;left: -50000px pour les visiteurs équipés d’un navigateur moderne. Les robots des moteurs de recherche comme GoogleBot de Google ne tiennent pas (encore) compte des feuilles de styles CSS et indexent allègrement ce contenu masqué aux êtres humains.

Cette technique s’apparente à ce que l’on appelle communément le cloaking : servir aux moteurs de recherche un contenu différent de ce que voit l’internaute, que ce soit pour induire en erreur les robots ou les visiteurs.

Toutefois, les techniques basées sur les CSS n’empêchent nullement le contenu en question d’apparaitre dans le flux RSS et j’imagine que les quelques 750 abonnés de ce blog ne sont pas forcément intéressés par mes détournements musicaux…

Pour remédier à cela j’ai fait appel à Twitter Land où MrMoins de Canal Moins m’a rapidement proposé Ultimate Category Excluder qui permet d’exclure une catégorie spécifique du flux RSS. Hélas, chez moi, ce plugin ne fonctionne pas (j’ai transmis mon rapport de bug à l’auteur et je vous tiens au courant).

En effectuant des recherches complémentaires, je suis tombé sur le plugin Advanced Category Excluder qui fonctionne avec WordPress 2.3.2.

Ce plugin propose d’exclure une ou plusieurs catégories dans les sections Archives, Page d’accueil, Flux RSS des billets et/ou des commentaires et Recherche ce qui permet de mieux granulariser l’information publiée.

Articles sur le même sujet

Optimiser et styler les catégories WordPress avec les CSS

Bruno Bichet — Mon, 15 Oct 2007 06:08:32 +0000

Suite à la migration de mon blog, j’en ai profité pour réorganiser les catégories en utilisant les sous-catégories qui me semblent un excellent moyen pour structurer l’information sur un blog. Curieusement, j’ai remarqué que les catégories sont souvent traitées par-dessus la jambe : soit il s’agit d’une longue liste tellement exhaustive qu’on ne sait plus de quoi parle le blog, soit les catégories sont placées à un endroit peu visible. Le pire étant évidemment le cumul des deux, ce qui n’est pas si rare…

Optimiser les catégories

La première chose à considérer, c’est de limiter le nombre de rubriques principales : une dizaine me semble un maximum pour permettre au visiteur de se faire rapidement une idée sur le contenu du blog. Maintenant, voyons concrètement comment afficher ces catégories et sous-catégories avec les CSS et les classes mises à notre disposition dans WordPress.

Pour commencer, j’ai créé la catégorie Développement web qui servira de catégorie parente pour les sous-catégories design-graphisme, ergonomie-accessibilité, javascript-php et bien sûr xhtml-css.

Pour afficher ces catégories, je me suis contenté d’utiliser le widget catégorie qui permet de modifier le nom de la rubrique, d’afficher la liste avec un menu déroulant, d’afficher la hiérarchie et enfin de préciser le nombre de billets présents dans une catégorie ou une sous-catégorie.

Les options disponibles dans le widget catégorie de WordPress devraient suffir à la majorité des utilisateurs !

Styler les catégories avec les CSS

Reste à styler ce menu avec les CSS. Pour celà, WordPress met à notre disposition une classe .current-cat lorsqu’une catégorie est sélectionnée et .current-cat-parent lorsqu’ils s’agit d’une catégorie parente. Notez q’une classe .children est associée aux sous-catégories, ce qui est bien utile ;)

Pour l’instant, je me suis contenté de mettre en gras les éléments sélectionnés par l’utilisateur en attendant mieux. Dans ce cas, il faut prendre garde à la cascade, car la règle :

.current-cat-parent {
    font-weight: bold;
}

agit également sur tous les items qui suivent, y compris ceux dont la classe est .current-cat. Pour y remédier, il ne faut pas oublier de remettre les éléments .children à leur valeur par défaut avec la règle :

.children {
    font-weight: normal;
}

et ensuite de spécifier pour .current-cat la règle :

.children .current-cat {
    font-weight: bold;
}

de manière à obtenir, lorsqu’on clique sur une sous-catégorie, du bold pour la catégorie mère et/ou la sous-catégorie en question uniquement.

N’oublions pas non plus de préciser comment doivent se comporter les catégories cliquées qui ne sont pas des catégories parentes :

.current-cat {
    font-weight: bold;
}

En l’occurrence, j’ai mis le même style partout, mais rien ne vous empêche de faire une distinction.

Voici l’exemple des catégories avec ci-contre, la sortie dans Firefox et plus bas, le code html vu par Firebug. Admirez donc les différentes classes disponibles pour vos CSS ;)

Quelques notes au sujet des catégories pour conclure

Le plus fastidieux quand on se lance dans la réorganisation des catégories est de déterminer le degré de granularité des informations qui doivent apparaitre. J’ai choisi des intitulés de rubriques parentes relativement génériques pour offrir une certaine souplesse à l’usage.

En revanche, pour les sous-catégories, j’ai essayé d’être le plus précis possible sans pour autant multiplier le nombre d’éléments. Si dans mon cas, je peux facilement regrouper Javascript et php, il en ira autrement pour un blog spécialisé dans la programmation : il sera sans doute judicieux de faire une distinction entre les langages côtés serveur et ceux côté client ;)

Articles sur le même sujet

Avec Spongestats 3.0, mes stats ont la patate !

Bruno Bichet — Sun, 23 Sep 2007 02:17:12 +0000

Pour mesurer vos statistiques, vous êtes plutôt moderne et web 2.0 ? Après des Release Candidate sorties au pas de course par l’équipe de développement, Spongestats 3.0 l’outil de mesure d’audience en temps réel pour votre site web ou votre blog vient de sortir en version stable. Le tout à la sauce web 2.0 dans ce qu’il a de meilleur : support des fils RSS, interface xhtml/css boostée avec jQuery, notamment pour la partie Ajax.

Du bon, du beau du bobe ! (et du Samy aussi)

Vous voulez un outil rapide, beau et fiable ? C’est Spongestats qu’il vous faut. Et pour le prix en moins en plus on a quoi ? Parmi les fonctionnalités nous trouvons principalement :

les statistiques quotidiennes, mensuelles et annuelles présentées sous forme de diagramme
le détail des statistiques pour un jour donné (nombre de visiteurs, plages horaires, mots clés, pages d’entrée, sites et pages référents, etc…)
le classement mensuel des pages les plus vues
le classement des IP et des noms d’hôtes des visiteurs
la classement des pages et des domaines ayant des liens vers le site
la liste des plateformes clientes : systèmes d’exploitation, navigateurs web et agrégateurs
la liste des mots clés utilisés pour arriver sur le site
la liste et le détails des derniers visiteurs ayant parcouru le site
l’historique des visiteurs (première et dernières visites, site referent pour chacune de ses visites, etc…)
les statistiques des fils RSS ainsi que les agrégateurs utilisés pour les consulter

L’installation, c’est pas trop galère ?

Non, absolument pas : il suffit de télécharger la dernière version, de dézipper le fichier et de copier le dossier spongestats ainsi obtenu à la racine de votre site. Il ne reste plus qu’à vous rendre à l’url idoine http://www.votresite.com/spongestats pour être dirigé vers la page d’installation. Le script vous demandera alors de saisir les paramètres liés à votre base de données, puis cliquez sur le bouton pour créer la base. C’est Presque fini. La dernière chose à faire est évidemment d’insérer le script dans toutes les pages à mesurer : un include_once et c’est parti ;)

Ouais… mais là, je suis sûr que tu as paraphrasé la documentation de spongestats, non ?

Oui, c’est vrai. Pour me faire pardonner, je faire reprendre sous vos yeux l’installation pas à pas, d’accord ?

Je télécharge la dernière version de Spongestats sur Sourceforge Tout va bieng ! Je dézippe le fichier SpongeStats-3.0.zip pour obtenir le dossier spongestats
Je tranfère le dossier spongestatsà la racine de mon blog sur mon serveur avec FileZilla et pendant ce temps, je vérifie que j’ai toutes les informations nécessaires pour établir le dialogue avec la base de données (Serveur MySQL, Nom d’utilisateur, Mot de passe et Nom de la base).
Je me rends à l’adresse http://www.mon-site.com/spongestats/ et je remplis les champs requis. En plus des éléments relatifs à la connexion avec la base de données, vous devrez préciser deux choses : le Préfixe des tables pour identifier les tables spécifiques à Spongestats si vous l’installez sur la même base que votre blog et le Mot de passe administrateur pour vous loguer dans l’espace d’administration. Cerise sur le gâteau, vous pourrez tester les paramètres pour vous assurer que tout fonctionne. Vite, je clique sur le bouton Installer Spongestats Pour la création des 4 tables nécessaires au bon fonctionnement de l’application : sps_archives, sps_config, sps_statistiques du mois et sps_stats_2007_09 pour le mois en cours, d’autres tables seront créées pour les mois suivants.
Je supprime le dossier install pour plus de sécurité.
Je place la ligne de code dans mon template
Je commence à regarder mes statistiques de la journée sans que l’ombre d’une pétouille ne vienne gâcher mon plaisir !

The La Lène Touch!

Quand on a pris l’habitude de l’interface de phpMyVisites pour prendre son bol d’air de stats bien frais, le thème par défaut de Spongestats est vivifiant : vos visiteurs sont tout de suite plus beaux ;) Bref, je suis conquis. Merci à Hélène d’avoir pris du temps entre Au joli popotin, Arthur et Bastien pour nous offrir le thème Citron-vert.

Je vous laisse car j’ai d’autres installations à faire, notamment pour Notorious Blog.

Stay tuned, I’ll be back!