Ergonomie & Accessibilité

Une solution CSS accessible pour remplacer du texte HTML par une image

Dans l’article remplacer du texte HTML par une image avec CSS, j’ai listé un certains nombre de techniques efficaces permettant d’avoir un titre de niveau `h1` (par exemple) qui disparait de l’affichage au profit d’un visuel plus «sexy». Le but étant d’améliorer l’apparence du site et le référencement dans les moteurs de recherche. Toutefois, les solutions présentées n’offrent pas toujours une expérience utilisateur satisfaisante pour tous. Les utilisateurs de lecteurs d’écran comme Jaws ou NVDA risquent de ne pas y trouver leur compte. Certaines solutions sont «accessibles» uniquement lorsque les CSS sont désactivées et il faudra penser aux cas où les images sont absentes. →

Le petit journal du web

Le petit journal du Web — Décembre 2010

Comme à son habitude, le petit journal du Web fait le point sur les sites et les services (re)découverts pendant les 30 derniers jours. Pour décembre, ce petit journal vous propose : à la Une, un site consacré à l’accessibilité Web ; dans la rubrique Graphisme et Ergonomie, un bookmarklet pour afficher les Wireframes ; dans la catégorie CSS, CSS3 et HTML5, une piqûre de rappel sur l’organisation des feuilles de styles CSS ; et nous terminons avec un rappel des éléments à prendre en compte lors de la migration d’un blog WordPress et une mine de ressources pour les chefs de projet Web ! →

Ergonomie & Accessibilité

Opquast : dites « bonjour » à M. Référent Accessibilité

Je m’étais inscrit il y a déjà ~~quelques temps~~ très longtemps pour suivre les contributions pour la nouvelle version du référent accessibilité pour les sites web édité par Opquast sous la houlette de Elie Sloïm de l’équipe Temesis. Si je connais Opquast depuis son lancement, je me rend compte que je l’ai peu consulté : j’ai l’impression de faire de l’accessibilité comme Jourdain faisait de la prose, mais la plupart du temps, lorsque je prends connaissance d’une bonne pratique, je me rends compte que les miennes sont perfectibles. Vous aussi ? Faites comme moi et commencez donc par télécharger une copie des 217 bonnes pratiques pour la conception de sites web de qualité. →

Design & Graphisme

Webdesign — Après le contenu, le contraste est roi !

Le contraste est la différence que l’oeil perçoit entre des couleurs qui sont à proximité les unes des autres. Le contraste est un élément indispensable pour rendre un site accessible au plus grand nombre. Le contraste ne se limite pas à l’utilisation du noir et blanc. Il est possible d’utiliser toute la gamme des couleurs disponibles à condition d’être vigilant sur les combinaisons des couleurs que l’on choisit. Pour cela, il existe un certain nombre d’outils pour convertir les couleurs de la page en niveaux de gris ou choisir des palettes de couleur en tenant compte des pathologies de la vision, par exemple. →

Revue de Web

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.

Bonnes pratiques

jARIA jQuery Plugin — Ajoutez ARIA dans vos applications web

jARIA jQuery Plugin est basé sur enable.js développé par IBM pour Mozilla. Il permet d’ajouter une couche ARIA dans votre site web sous la forme de méthodes pour la gestion des rôles : ariaRole(), par exemple, renvoie le rôle ARIA d’un élément donné. →

Plugin jQuery

jQuery UI Selectmenu — des menus « select » personnalisés à la sauce ARIA

L’élément select, comme la plupart des éléments de formulaires, sont difficilement personnalisables, surtout si l’on espère une relative homogénéité de rendu entre les navigateurs. jQuery UI Selectmenu fournit une alternative pour personnaliser et configurer ces satanées balises select. Vous pourrez adapter le comportement et l’apparence pour maximiser l’expérience utilisateur, tout en respectant une logique d’enrichissement progressif compatible avec les spécifications ARIA.

Applications autonomes

Sélecteur de date (Date-Picker) non-intrusif

Unobtrusive Date-Picker est un sélecteur de date qui affiche un mini calendrier pour afficher automatiquement une date formatée dans un ou plusieurs champs input. Parmi les plus de cette solution : l’accessibilité (navigation au clavier, ARIA, etc.) et l’internationalisation soignée. →