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. →
Archives des tags : Navigation
Coda Slider Effect — Navigation par onglets accessible avec effet de Slide
Coda Slider Effect est un des nombreux excellents tutoriels proposés par Remy Sharp sur jQuery for Designers. Au menu de Coda Slider Effect : un système de navigation par onglets accessible avec effet de Slide du plus bel effet composé de plusieurs plugins tels que scrollTo, localScroll et serialScroll. Dégradation grâcieuse en l’absence de Javascript, effet de slide respectueux de votre CPU et maintient de la navigation courante via les «hash».
Navigation à onglets avec jQuery & CSS
Simple Tabs w/ CSS & jQuery est un tutoriel expliquant de manière concise les différentes étapes pour réaliser un système de menu à onglets. Soh Tanaka détaille le balisage HTML, le script jQuery et la feuille de style CSS. →
SimpleTabs — Onglets Javascript non-intrusif
SimpleTabs est un script autonome écrit en Javascript par Fotis Evangelou. Il permet de mettre en place facilement un système de navigation à base d’onglets (tabs). J’aime bien le côté autonome du script qui ne dépend ainsi d’aucune bibliothèque tierce pour fonctionner. Pas besoin de jQuery ou de Mootools ! Le script se souvient du dernier onglet cliqué et se place sur celui-ci après un rechargement de page ou l’utilisation du bouton « Retour » du navigateur. SimpleTabs est simple à mettre en place, léger (2,4 Kio) et compatible avec tous les navigateurs. →
Conventions de nommage pour les CSS — identifiants et classes — de votre site web
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. →
SliderNav — Carnet d’adresses avec jQuery
WordPress — Menus «funky» avec wp_list_bookmarks()
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. →
Diaporama avec navigation au clavier (flèche droite et flèche gauche)
Adding Keyboard Navigation est un tutoriel expliquant pas à pas la mise en place d’un diaporama avec la possibilité d’utiliser le clavier (flèche droite et flèche gauche) pour passer à l’image suivante ou précédente. Chez Remy Sharp, les tutoriels sont vraiment très bien fait. On trouve le tutoriel proprement dit avec les explications de code, la démonstration pour juger sur pièce et le code prêt à être copié-collé, sans oublier les commentaires, souvent utiles.
Jquery Pagination System
Jquery Pagination System — Les systèmes de navigation sont généralement programmé côté serveur et sont relativement gourmands en requêtes MySQL et en preprocessing PHP. Cette pagination est entièrement réalisée avec jQuery, côté client, donc. Un exemple à copier-coller est disponible pour vous faire une idée.
Que manque-t-il à WordPress ?
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. →