Les plus populaires   :   7 jours   |   30 jours   |   365 jours
Publié par Francois le 06/12/2007 à 08H02 sous Accessibilité, ergonomie

Extrait du livre “Créer des sites Web accessibles à tous” d’Alexandre Afchain et Julien Lancereaux.

Un site Web accessible permet à n’importe quelle personne d’y accéder de façon équivalente, quels que soient :

  • le navigateur (explorer, firefox, safari…)
  • l’interface (clavier, souris…)
  • la plate-forme (Windows, Mac OS, Linux…)
  • Le périphérique d’affichage (écran 17 pouces, portable, cellulaire…)
  • L’aide technique (loupe d’écran, plage braille, synthèse vocale…)
Créer des sites Web accessibles à tous

Peu connue du grand public, l’accessibilité est souvent mal comprise. Démystifions les mythes :

L’accessibilité ne sert qu’à peu de personnes, elle est donc inutile.

Si l’on pense qu’elle est utile uniquement pour les personnes handicapées, il est évident que cela réduit le nombre de personnes concernées. Un site accessible est accessible à tous, personnes handicapées ou non! De plus, la mise en place de cette technique dans un site Web contribue à l’amélioration du référencement de celui-ci sur les moteurs de recherche.

L’accessibilité est difficile à mettre en place.

Peu connue, l’accessibilité effraie les entreprises Web qui imaginent devoir embaucher un super spécialiste qui coûte cher. En réalité, se sont des normes simples à intégrer en amont! Garantie! Pensez-y, personne n’oblige un développeur Web à rendre son site parfaitement accessible dès le premier jour… Les normes peuvent être mises en place graduellement et facilement.

Les personnes handicapées ne correspondent pas à mon marché. Ils ne visitent pas mon site.

Un site Web tend à être disponible à tous via les moteurs de recherche. Pourquoi alors limité celui-ci? Pourquoi ne pas augmenter son potentiel de clients? Saviez-vous que la mobilité réduite accroît l’acte d’achat en ligne? Choisir l’accessibilité, c’est de faire le choix technique d’un référencement optimisé.

L’accessiblité coûte cher.

Prenez par exemple un immeuble en construction. Si celui-ci prevoit avoir dans les années à suivres un ascenseur, le coût de cet ascenseur sera très relatif par rapport au coût global de la construction, simplement parce que l’accessibilité a été anticipée. En revanche, si vous décidez de placer cet ascenseur dans un vieil immeuble en rénovation, le coût de celui-ci sera beaucoup plus élevé.

Si l’accessibilité est prévue dès l’origine de la refonte du site Web, le coût est quasi nul, si votre choix de fournisseur s’est arrêté sur une entreprise qui inclut dans sa méthodologie de travail, la considération des normes d’accessibilité.

L’accessibilité limite la création graphique.

En tant que designer Web, je peux vous affirmez que jamais je n’ai été limité dans mes créations graphiques à cause de la mise en place des normes d’accessibilité! Depuis l’utilisation des feuilles de style CSS, tout est possible!

L’accessibilité n’est pas obligatoire, pourquoi se presser?

Prendre un peu d’avance avant que la loi n’oblige à respecter des calendriers contraignants et intégrer en amot l’accessibilité de son site n’est pas incohérent pour un gestionnaire prévoyant.

De plus, la mise en application d’une méthodologie d’accessibilité Web touche plusieurs domaines :

  • Sociaux et éthiques
  • Techniques
  • Économiques
  • Politiques

Il est d’un intérêt moral et civique!

Initiative dans le domaine

Je tiens à profiter de l’occasion pour souligner l’initiative de la Coopérative Accessibilité Web qui a lancé lundi dernier les résultats de sa dernière étude sur l’accessibilité des 200 sites Web les plus consultés par les canadiens français. Forcé de constater qu’il reste beaucoup de travail à faire dans ce domaine puisque depuis la dernière étude, il y a de ça environ 4 ans, on peut noter une faible dégradation de la situation.

De son côté, le W3Québec a participé financièrement à la réalisation de l’étude. Les problèmes d’accessibilités étant souvent étroitement liés au non respect des bonnes pratiques du Web, ce qui correspond en partie à la bataille que mène le W3Québec : Améliorer le Web au Québec!

Pour en savoir plus

Source : Les mythes et réalités de l’accessibilité Web

Partager ce billet:
scoopeo:Les mythes et réalités de l'accessibilité Web fuzz:Les mythes et réalités de l'accessibilité Web tapemoi:Les mythes et réalités de l'accessibilité Web nuouz:Les mythes et réalités de l'accessibilité Web blogmemes:Les mythes et réalités de l'accessibilité Web pioche:Les mythes et réalités de l'accessibilité Web del.icio.us:Les mythes et réalités de l'accessibilité Web


Publié par Étienne le 28/06/2007 à 16H03 sous Accessibilité, ergonomie

Bien qu’il y ait plusieurs similarités entre le design de sites Web (sites marchands, sites de marque, sites de contenu, Intranet, etc) et celui d’applications Web, certaines attentions peuvent faire la différence entre une application médiocre et une de qualité.

rubix_cube.jpg

Voici quelques points à considérer si jamais vous avez également à bâtir une application Web à usage commercial :

Simplifiez Oubliez les navigations atypiques ou navigations profondes; la navigation devrait être aussi linéaire que possible. L’utilisateur ne devrait jamais avoir à se demander où il se trouve, utilisez un fil d’Ariane.

Réduisez le nombre de clics La complexité de votre application ou des actions ne devrait jamais transparaître. Demandez-vous constamment si une action ne pourrait pas se faire avec moins de clics. Plus il y a de clics, plus il y a de possibilités d’erreurs et de perte de temps.

Facilitez la recherche Un champs de recherche complémentera bien votre navigation. Surtout si vous assignez des résultats aux mots-clefs les plus fréquemment recherchés (comme un FAQ).

Prévoyez les erreurs Qui sait comment les utilisateurs utiliseront votre application? Concevez votre système avec les erreurs en tête; prévoyez les avant qu’elles arrivent. Il ne sera pas facile de modifier votre application quand les utilisateurs auront commencé à apprendre à s’en servir.

Donnez des options Ne forcez pas vos utilisateurs à penser, donnez-leur toujours des manières simples de corriger leurs erreurs ou de compléter leurs actions.

Brisez le moule Oubliez la subtilité si vous voulez que vos utilisateurs remarquent un message ou une erreur. Changez le format de la page, l’affichage ou utilisez des couleurs vives pour attirer leur attention car l’habitude se développe très rapidement.

Utilisez le clavier Vous connaissez l’attribut tabindex? Il est essentiel quand vous concevez une application car il permet de contrôler la navigation clavier à l’intérieur des pages. Évitez les tendinites aux utilisateurs en excluant les éléments secondaires.

Utilisez des raccourcis claviers Observez comment vos utilisateurs utilisent réellement votre application. Surprenant? Simplifiez leur vie en créant des raccourcis claviers. Attention à ne pas interférer avec ceux du navigateur Internet.

Contrôlez le navigateur Évaluez la pertinence de permettre à vos utilisateurs de rafraîchir la page (F5), de faire Back ou Forward ou de voir l’URL. S’il n’y en a pas, débarassez-vous de ces options et sauvez de l’espace vertical.

Pensez accessibilité N’oubliez pas que des handicapés visuels et daltoniens travailleront probablement avec votre application. Assurez-vous que vos polices et liens soient conformes aux standards d’accessibilité. Ne forcez personne à cliquer sur un bouton radio, utilisez des labels.

Évitez la perte de temps Assurez-vous que vos utilisateurs savent toujours à quoi s’attendre quand ils cliquent sur un lien. Différenciez les liens externes, liens affichant / cachant du contenu, pdfs, boutons, actions, etc.

Enlevez les images Réduisez la pollution visuelle au minimum et accélérez votre application. Vos options principales devraient attirer toute l’attention de vos utilisateurs.

Dosez les couleurs Réduisez le stress de vos utilisateurs en utilisant des couleurs sobres, utilisez des couleurs vives pour attirer l’attention. Ne vous fiez jamais exclusivement à la couleur car les daltoniens auront de la difficulté à faire la différence.

Numérotez vos formulaires Réduisez la longueur des formulaires et numérotez-les. Vos pages seront plus ordonnées et paraîtront moins intimidantes.

Réduisez l’espacement Les applications nécessitent moins d’espacement que les sites commerciaux car les utilisateurs s’habituent rapidement aux éléments et à leur positionnement. Trop d’espacement réduira leur productivité en limitant la quantité d’information affichée par page.

Alignez votre contenu Le contenu d’une application devrait refléter la manière dont les utilisateurs parlent. L’apprentissage est plus difficile lorsqu’il faut apprendre de nouveaux termes pour des concepts déjà acquis.

Utilisez différents niveaux d’information Évitez de surcharger les écrans, séparez l’information en différents niveaux :

  • 1) Information essentielle, affichée directement sur la page.
  • 2) Information secondaire, accessible à 1 clic.
  • 3) Information supplémentaire, requiert une recherche active de l’utilisateur.

Bien que plusieurs des points mentionnés s’appliquent également à la conception de sites Web, ils deviennent rapidement essentiels quand l’efficacité prime. Ne faites pas l’erreur de croire que concevoir une application est la même chose que concevoir un site Web; il est beaucoup plus difficile de faire des modifications quand des milliers d’utilisateurs dépendent de votre application.

Partager ce billet:
scoopeo:17 conseils pour développer des applications Web fuzz:17 conseils pour développer des applications Web tapemoi:17 conseils pour développer des applications Web nuouz:17 conseils pour développer des applications Web blogmemes:17 conseils pour développer des applications Web pioche:17 conseils pour développer des applications Web del.icio.us:17 conseils pour développer des applications Web


Publié par Remi le 19/03/2007 à 09H36 sous Accessibilité, ergonomie

Bonjour je m’appelle Rémi Turcotte et c’est avec ce petit article que je fais mon entrée dans la merveilleuse équipe des bloggeurs de Go-Referencement (que je salue en passant) .

Pour mon premier article, je vais vous parler de Roboform : une application web qui permet l’organisation et la protection de mots de passe sur votre espace local, ainsi que le remplissage automatique de formulaires. Grosso modo, selon le site de RoboForm, en voici les grandes lignes :

  • Mémoriser les mots de passe et ouvrir une session automatiquement
  • Remplir les long formulaires d’enregistrement en un seul clic
  • Encrypter les mots de passe pour obtenir une sécurité complète
  • Génèrer des mots de passe aléatoires difficiles à “craquer
  • Compatibilité avec Internet Explorer et Firefox, Pocket PC et Palm.

Cela étant dit, voyons maintenant comment cet outil peut être utile tant d’un point de vue référenceur (SEO) que d’un point de vue utilisateur…


D’un point de vue utilisateur

Si vous saviez à quel point le web n’est pas un endroit sécure ! Vos noms d’utilisateurs, vos mots de passe (qui mènent parfois vers vos informations sensibles comme votre identification bancaires) ne sont pas à l’abri des dangers qui sillonnent les profondeurs du web. C’est après avoir téléchargé et installé Roboform que j’ai appris (photo ci-dessous) à quel point ces informations pouvaient être faciles d’accès !

screen1.gif

C’est assez troublant de voir ses propres mots de passe inscrits dans un formulaire noir sur blanc !

Bref, en installant l’application, tous vos accès sont sauvés et encryptés sur votre espace local, rendant impossible (sinon lourdement complexe) l’intrusion d’un pirate malicieux à vos informations personnelles. Hallelujah ! Devant cette menace encore méconnue (ou mal-évaluée) du commun des mortels, Roboform vient alors à la rescousse pour une navigation plaisante et agréable en toute sécurité.

Un extrait video (Youtube) d’un individu qui explique globalement comment les hackers s’y prennent pour dérober les informations d’un usager. Il mentionne également Roboform à titre d’application permettant de se protèger contre ces formes de hacking.

D’un point de vue référenceur
Tout référenceur sait que le remplissage de formulaire est une tâche lourde et pénible. Grâce à son système de remplissage de formulaire automatique et son système de gestion de mot de passe intégré sous IE et FF, Roboform devient, sans contredit, un outil important dans le travail du référenceur. Il permet de sauver un temps fou lorsqu’il vient le temps de poster des articles sur des blogs, de répondre sur des posts, de soumettre des candidatures, etc…

Pendant que les référenceurs et les internautes chantent main dans la main “Vive Roboform ! Vive roboform !”, les pirates eux… déchantent !

Edit de juin 2007: Je viens de lire un article qui passe en revue les meilleurs outils pour partager/diffuser/organiser un blog… A lire!

Partager ce billet:
scoopeo:Roboform : protection de vos données personnelles fuzz:Roboform : protection de vos données personnelles tapemoi:Roboform : protection de vos données personnelles nuouz:Roboform : protection de vos données personnelles blogmemes:Roboform : protection de vos données personnelles pioche:Roboform : protection de vos données personnelles del.icio.us:Roboform : protection de vos données personnelles


Publié par Sarah le 20/02/2007 à 19H09 sous Accessibilité, ergonomie
Rien de pire qu’une splash page ! Vous savez, la page d’entrée d’un site où généralement, vous avez le droit à une animation flash qui vous fait perdre du temps et ne vous informe en rien du tout sur le site que vous venez visiter… Ca vous dit quelque chose ?
Et bien, en général, comme le souligne Matt Inman dans son excellent article sur SEOmoz, les clients sont friands de cela ! Pourtant cette technique nuit tant au SEO qu’à l’accessibilité de votre site Internet. Voici les arguments de Matt pour convaincre tout client de ne pas utiliser de splash page :
view demo3.jpg
  • Les robots des moteurs de recherche ne peuvent indexer une page vide !

Les moteurs de recherche scannent le texte se trouvant sur la page pour determiner le thème de cette dernière. Donc si votre page est entièrement en Flash ou d’autres éléments multimédias non lisibles par les moteurs de recherche, il y a de fortes chances que les moteurs de recherche ignorent totalement votre page d’accueil ! Les conséquences de cette configuration est que vous ne vous placerez pas sur vos mots-clés mais plutôt sur un “Click to enter” ou un “Skip intro”… Bref le seul élement texte de votre contenu. Pour preuve vous n’avez qu’à effectuer une recherche sur ces termes-ci… Nombreux sites n’ont pas de textes à valeur ajoutée dans leur contenu et se placent donc sur ces termes là.

  • Et la balise keyword dans tout cela ?

Aucun des moteurs de recherche majeurs (voire mineurs) prennent en considération cette balise, suite aux nombreux abus ces dernières années. Aujourd’hui seuls la balise titre est le contenu de la page comptent votre optimisation SEO.

  • Très bien ! Cachons alors du texte sous l’animation Flash !

Très bonne idée pour se faire bannir :) Les principaux moteurs de recherche ne sont pas dupes et ont même donné un nom à cette pratique : le cloaking. Cette technique consiste à fournir une page différente pour les moteurs de recherche que celle présentée pour les visiteurs de votre site.

  • Le reste de votre site peut rester ignoré par les moteurs de recherche

En effet, si vous n’avez aucun lien de navigation en texte sur votre Splash page, les robots ne pourront accéder à vos pages à forte valeur ajoutée, et donc votre site restera totalement invisible aux yeux des moteurs de recherche… et des internautes !

  • Est-ce utile pour vos visiteurs ?

Pour imager ce propos, Matt Inman prend un exemple donné par Jared Spool de Macromedia, dans un article de MarketingSherpa : “Lorsque nous avons des clients qui souhaitent une Splash page en Flash, nous leur disons d’aller dans un supermarché des environs, accompagné d’un mime. Pour chaque client entrant dans le supermarché demandez à votre mime de faire un petit spectacle distrayant de 2 minutes tout en essayant d’expliquer que le pain se trouve dans l’allée 6 et le lait est en promotion !

  • La plupart des utilisateurs ne visionnent pas votre animation

Faites un petit sondage autour de vous… Nombre d’utilisateurs clique sur le lien “Skip intro”, et ne visionnent donc pas la splash page. NewFlangled, une web agency, a analysé leurs logs et en sont venus à cette conclusion : 25% des utilisateurs quittent la page dès qu’ils découvrent que cela est une splash page.

  • Les connexions à bas débit sont fortement pénalisées par le délai de chargement

Un utilisateur bas débit fermera tout de suite la page surtout si le lien “Skip intro” ou “Enter” n’est pas disponible faute de temps.

  • Le lien “Accéder au site” est redondant et allonge le processus !

En accédant à la splash page, les internautes sont déjà convaincus de vouloir visiter votre site ! Comme l’illustre Matt dans son article, c’est comme si vous ouvrez la porte de votre magasin à un client pour l’amener face à une autre porte à ouvrir ! Ca n’apporte aucune plusvalue, bien au contraire, plus vous allongez le processus, plus vous avez de chance de perdre vos clients potentiels le long du chemin de navigation.

  • Le contenu de la splash page peut être intègré dans la page d’accueil

Dans la plupart des cas, l’animation de la splash page peut souvent être intègrée dans la page d’accueil elle-même, soit en entête (header ou bandeau), ou dans le contenu. Ceci est le compromis idéal entre l’efficacité d’un site en terme de taux de conversion, et le souci d’un graphisme soigné. Il permet aussi d’uniformaliser la navigation en l’affichant directement dès la page d’entrée (ici la page d’accueil), ce qui est bénéfique pour l’usabilité et l’expérience utilisateur. Pour illustrer cette notion, je vous invite à faire un tour sur le site d’un éditeur en ligne (Virtual Paper).

  • Pensez à la navigation… et ergonomie !

Généralement, sur une splash page, vous n’avez aucun ou peu d’élements de navigation, en tout cas, pas ceux que vous allez retrouver sur les autres pages du site. Ceci peut être déroutant pour vos visiteurs qui peuvent se décourager rapidement et quitt er votre site.

Voilà ! Si vous avez d’autres arguments ou contre arguments ! Je les attends avec impatience ! Je suis très d’accord avec l’opinion de Matt (consultante SEO oblige) : mise à part pour le site d’un artiste ou d’un web designer, où la créativité et l’originalité doivent être privilègié, je le déconseille aux autres types de sites, surtout ceux d’entreprise.

Partager ce billet:
scoopeo:Convaincre un client de ne pas utiliser de Splash Page fuzz:Convaincre un client de ne pas utiliser de Splash Page tapemoi:Convaincre un client de ne pas utiliser de Splash Page nuouz:Convaincre un client de ne pas utiliser de Splash Page blogmemes:Convaincre un client de ne pas utiliser de Splash Page pioche:Convaincre un client de ne pas utiliser de Splash Page del.icio.us:Convaincre un client de ne pas utiliser de Splash Page


Publié par Marc-Antoine le 07/02/2007 à 18H15 sous Accessibilité, ergonomie

Je fais la promotion du XHTML depuis plus de 2 ans. En effet, la plupart de mes sites Web sont entièrement valides, mon entreprise est membre du W3Qc, je forme mes employés et partenaires afin qu’ils respectent les normes et je conseille mes clients en faveur de l’adoption de ces standards.

J’ai décidé de rédiger un guide du XHTML qui pourra servir d’argument de vente, de document de soutien à l’apprentissage du XHTML et d’aide mémoire.

Pourquoi valider
Respecter les normes parce qu’il faut respecter les normes n’est pas le meilleur argument. Nous ne respectons pas (tous) les limites de vitesse, pourquoi respecter les normes lors de la conception d’un site Web. Voici quelques arguments pour appuyer votre discours :

  • Un site utilisant les derniers standards est fait pour durer tout au long de l’évolution des navigateurs et des divers langages
  • Votre site sera compatible avec tous les navigateurs respectant la norme que vous aurez choisie. Adieu les sites optimisés pour IE sous Windows et qui sont donc incompatibles avec d’autres navigateurs populaires ou systèmes d’exploitation.
  • Accélération du développement et de la maintenance. Le XHTML permet une lecture facile du code et une mise à jour simplifié du design, des feuilles de style et de la mise en forme puisqu’ils sont séparés du contenu.
  • Une page XHTML a beaucoup plus de chance d’être accessible à tous les utilisateurs puisqu’il respectera automatiquement certains critères requis par les normes d’accessibilité. De plus, vous serez probablement tenté de respecter d’autres normes par la même occasion.
  • Les pages XHTML strict sont généralement plus légères ce qui a pour avantage d’accélérer le temps de chargement des pages. Les feuilles de styles étant externalisées, elles sont gardées en mémoire sur l’ordinateur (cache) ce qui a pour effet d’accélérer la vitesse d’affichage des pages.
  • En XHTML, il est possible d’organiser stratégiquement les éléments afin de mettre l’emphase sur le contenu unique de chaque page plutôt que sur les divers menus répétés sur le site entier. Ceci aura pour but de donner plus d’importance au contenu lors de l’indexation d’un site par le robot d’un moteur de recherche.

Je pense que certains moteurs de recherche vont même donner un avantage aux sites respectant les normes telles le XHTML.

Comment valider
Il existe plusieurs outils pour valider un site, en voici une liste :

C’est à ce moment que j’ai l’honneur de vous présenter un de mes produits. Mon équipe a développé un Validateur XHTML Multipage. Ce validateur utilise aussi notre robot pour indexer votre site puis le moteur de validation du W3C pour valider le code des pages. D’un seul clic, grâce à la technologie AJAX, vous pouvez donc valider toutes les pages de votre site Web et voir les résultats apparaître sur le rapport qui vous est présenté dynamiquement. Vous pourrez par la suite valider à nouveau une page en cliquant sur « go » et afficher plus d’information sur les erreurs spécifiques à une page en cliquant sur le nombre d’erreurs dans la colonne « erreurs ». Cet outil est très pratique pendant le développement de votre site Internet, lors de la mise en production mais aussi pendant toute la durée de vie du site afin de vérifier la validité des pages, possiblement altérée par le contenu généré par vos utilisateurs, tels les commentaires.

Grâce à Go-Référencement, qui sponsorise maintenant le Validateur Multipage, je suis en phase d’analyse et commencerai bientôt la charte du projet pour la version 2. L’outil sera migré sur le serveur de Go-Référencement qui fournira aussi un effort de développement. Laissez-moi un commentaire avec toutes vos suggestions et recommandations, je les prendrai très certainement en considération!

Oui mais je n’y arrive pas!
Pas de panique, voici comment s’en sortir.

  1. Validez une page et regardez la liste des erreurs. Tentez de corriger les erreurs simples en premier. Une fois la liste écourtée, le projet vous semblera plus réalisable
  2. Si le message d’erreur ne vous dit rien, ou que vous ne savez pas comment corriger le code, il est souvent utile de chercher dans Google/Yahoo/MSN le message d’erreur, entre guillemets doubles, en excluant le numéro de ligne. Vous trouverez sans doute des discussions qui traitent de cette erreur sur plusieurs forums et la solution y sera, je l’espère, fournie.
  3. Consultez ces sites références :
    1. FAQ Développez
    2. XHTML 1.0: The Extensible HyperText Markup Language (Second Edition)
    3. XHTML - Wikipédia
    4. XHTML Tutorial par W3Schools (en anglais)
    5. Tutoriels AlsaCréations
    6. XHTML en une heure par OpenWeb
    7. W3Qc
  4. Si vous ne trouvez rien, vous pouvez vous-même rédiger votre question sur l’un des forums suivants :
    1. AlsaCréations
    2. Développez
    3. Le site du ZérO
  5. Contactez-moi et priez ;)

Vous voulez contribuer à ce guide ou proposer des améliorations au le Validateur Multipage? Laissez-moi vos commentaires !

Partager ce billet:
scoopeo:Le guide du XHTML fuzz:Le guide du XHTML tapemoi:Le guide du XHTML nuouz:Le guide du XHTML blogmemes:Le guide du XHTML pioche:Le guide du XHTML del.icio.us:Le guide du XHTML


Publié par Francois le 06/02/2007 à 12H02 sous Accessibilité, ergonomie

Il y a quelques années, les propriétaires de site Web se préoccupaient d’avantage d’avoir un site qui accroche l’oeil soit par un design très illustré ou par l’utilisation d’animation Flash. De nos jours, ceux-ci se préoccupent d’avantage de la question de référencement dans les moteurs de recherche. Bientôt, ils seront également sensibles aux questions d’accessibilité. Pourquoi? À quoi bon faire un site pouvant être consulté par les personnes ayant des difficultés visuelles? C’est simple! Les robots des différents moteurs de recherche sont des visiteurs aveugles. Ils ne considèrent pas vos couleurs ni vos images ni vos animations. Ils sont là sur votre site pour l’information. Est-ce qu’ils ont accès à votre information? C’est ce que nous allons voir!

Premièrement, définissons « accessibilité ». La définition de Wikipédia est la suivante :

«Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales.»

Source : Wikipédia - Accessibilité du Web

Maintenant, comment savoir rapidement si son site est accessible ou non? Il existe une multitude d’outils permettant l’analyse d’un site. Pour ma part, la première étape est de valider une page de son site avec le validateur d’accessibilité francophone d’Accessibilité pour tous disponible à l’adresse suivante : http://validateur-accessibilite.apinc.org/

Le validateur vous permet rapidement de valider plusieurs bonnes pratiques d’accessibilité automatiquement en vous présentant les résultats sur 3 niveaux de priorité définis par le WCAG (Web Content Accessibility Guidelines). Voici la version originale anglaise des trois niveaux de priorité :

[Priority 1]

A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents.

[Priority 2]

A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents.

[Priority 3]

A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.

Source : Web Content Accessibility Guidelines - Priorities

La validation automatique est intéressante mais elle n’est pas suffisante. Voici un top 10 dans le désordre des bonnes pratiques pour l’accessibilité Web :

  • Assurez-vous que tous vos élements non-textuels présentent un texte alternatif. Si votre description est longue, inscrivez celle-ci dans l’attribut LONGDESC et résumé dans l’attribut ALT.
  • Évitez les liens de type « Cliquez ici ». Le texte sur le lien devrait toujours être représentatif de la cible vers lequel il pointe. De plus, dans le cas d’un menu présenté avec des images ou tout autre lien sur une image, utilisez l’attribut TITLE dans votre élément A pour indiquer une valeur textuelle de la cible et ce même si l’image contient un texte alternatif. Si votre lien pointe vers une page dans une autre langue, utilisez l’attribut HREFLANG.
  • Spécifiez vos tailles de polices de façon variable. Évitez les PX et les PT, utilisez plutôt EM ou %.
  • Tentez de naviguer sur votre site en utilisant seulement le clavier. Vous devriez avoir accès à l’ensemble du contenu.
  • Évitez l’utilisation des FRAMES. Du même coup, vous aurez la certitude qu’aucun résultat de recherche pointera vers une page qui ne présente pas votre entête et/ou navigation.
  • Si votre site utilise des tableaux pour la présentation du contenu, assurez-vous que ceux-ci utilisent l’attribut SUMMARY pour permettre aux visiteurs non-voyants d’avoir une idée d’ensemble du tableau.
  • Utilisez l’élément LABEL avec l’attribut FOR lors de la conception de vos formulaires. Ceci permettra à un visiteur non voyant d’associer plus facilement l’intitulé de la case avec la case elle-même. L’élément LABEL permet également de cliquer sur le texte pour activer une case à cocher plutôt que d’avoir à cliquer directement sur la case.
  • Testez votre site avec plusieurs navigateurs, versions et systèmes d’exploitation. Testez également avec un navigateur spécialisé pour personne non-voyante : MozBraille ou JAWS.
  • Faites des cas d’utilisation et demandez à un inconnu dans la rue d’utiliser votre site pour trouver certaines informations. Donnez-lui une petite récompense…
  • Tentez toujours d’utiliser le bon élément pour représenter l’information. S’il ne s’agit pas d’information “tabulaire”, n’utilisez pas de tableau. Mettez vos titres dans les éléments H1 à H6. Vos paragraphes dans l’élément P. Vous menus dans une liste UL LI. Ensuite, utilisez le CSS pour définir la présentation de tous ces éléments.

Si le sujet de l’accessibilité Web vous intéresse, un forum se tiendra à Longueuil le 12 février 2007. L’inscription est gratuite mais obligatoire et peut se faire en ligne sur le site d’Accessibilité Web avant demain…!

Pour plus d’information sur le sujet voici une liste de ressources intéressantes :

Partager ce billet:
scoopeo:Est-ce que votre site Web est accessible? fuzz:Est-ce que votre site Web est accessible? tapemoi:Est-ce que votre site Web est accessible? nuouz:Est-ce que votre site Web est accessible? blogmemes:Est-ce que votre site Web est accessible? pioche:Est-ce que votre site Web est accessible? del.icio.us:Est-ce que votre site Web est accessible?


Publié par Marc-Antoine le 27/01/2007 à 13H57 sous Accessibilité, ergonomie

Web 2.0 par-ci, Web 2.0 par là … Il paraît que le Web 2.0 est l’avénement du “look and feel” donc de l’usabilité enfin tournée pour tout internaute !

J’ai donc décidé de m’y pencher… Pour ce faire, j’ai décidé d’analyser le point crucial et commun à de nombreux sites : le formulaire de contact ou d’enregistrement. Et pour choisir les sites à décortiquer quoi de mieux que de les piocher dans le fameux Web 2.0 Awards de SEOmoz.
La plupart des formulaires étaient très décevants. Voici les constatations, parfois effarantes, qui en sont tirées :

  • Certains offraient une validation lors de la soumission/envoi (submit) du formulaire, mais délivraient un message inexistant ou peu clair lorsqu’une erreur se produisait.
  • Certains ressemblait plus à un formulaire administratif provenant du FBI qu’à autre chose (i.e Yahoo!)
  • D’autres affichaient le mot de passe sans cryptage ! Cet élement est pourtant à la base de la conception d’un formulaire.
  • La plupart de ces formulaires n’utilisent pas de validation en JavaScript ou Ajax. Pour des sites Web 2.0, c’est un scandale :)

Mes humbles recommandations :

  • Ce qui peut être validé via le JavaScript devrait être fait. Ce point concerne surtout l’étape d’envoi/confirmation du formulaire ou lors de changements/réactualisations des informations.
  • Ce qui peut être validé en Ajax peut être une plus-value en ergonomie. Je pense notamment à la disponibilité d’un “username” ou d’une adresse e-mail lors de l’inscription.
  • Lors de l’envoi des informations, toutes les erreurs devraient être renvoyées en une fois, avec tout les champs invalides concernés (plutôt que de rapporter une erreur à la fois … Quoi de plus frustrant que de s’y reprendre à plusieurs fois avant de remplir correctement un formulaire).
  • Concernant ces mêmes erreurs, une emphase graphique devrait aider l’utilisateur à retrouver rapidement ces dernières.
  • Les intitulés des champs à remplir devraient être placés au plus proche du champ de saisie.
  • Les termes devraient toujours être “Inscription” et “Connexion”, selon les standards d’utilisation et les habitudes des internautes. Des termes comme “Mon espace” ou “Mon profil” peuvent porter à confusion.

Pour illustrer mes propos, je vous offre une liste de formulaire d’enregistrement qui me semblent bien faits et bien pensés :

  • Simples et efficaces :
  • Validation des champs lors des modifications et suggestions d’amélioration/erreurs :
  • Design et informations pertinentes pour guider l’utilisateur
  • Agencement des intitulés face aux champs de saisie
  • Je suis toujours à la recherche du formulaire d’enregistrement ou de contact parfait :) Si vous le connaissez, faites-moi signe !

    Partager ce billet:
    scoopeo:Audit des formulaires Web 2.0 fuzz:Audit des formulaires Web 2.0 tapemoi:Audit des formulaires Web 2.0 nuouz:Audit des formulaires Web 2.0 blogmemes:Audit des formulaires Web 2.0 pioche:Audit des formulaires Web 2.0 del.icio.us:Audit des formulaires Web 2.0


    Publié par Sarah le 24/11/2006 à 11H13 sous Accessibilité, ergonomie

    En surfant sur le web, j’ai trouvé une petit programme sympathique pour visualiser l’architecture de son site en 3D. Cette application appelée WebTracer fut créée par Nullpointer et offre une carte moléculaire style “fractal” de votre site.
    WebTracer offre donc une vision de l’architecture de votre site et revelant sa structure selon les liens qui charpentent vos pages. Voici un exemple avec notre blog go-referencement.org :

    Mapping go-referencement.org

    Les atomes sont les pages qui constituent le site. Ces atomes s’étalent sur plusieurs “étages” en fonction de leur importance. Concrètement, l’atome au centre de la spirale est la page index, et celles qui gravitent autour sont les pages principales. Les pages secondaires se superposent au-dessus et ainsi de suite !
    Les connexions entre les atomes sont les liens internes de votre site. La longueur de ses connexions serait proportionnelle à l’importance du lien qui joind une page à une autre. Je ne sais pas comment cette proportion est quantifiée, mais je pense qu’elle mesure l’importance des liens selon son emplacement dans la page (ex : liens dans le footer, liens-menus, etc. …).

    Je sais … Ca n’a pas grande utilité pour le référencement ou le marketing Internet … C’est juste original ! Ca peut quand même vous aider à visualiser la structure de navigation de votre site et imaginer le cauchemar des robots-spiders de Google et autres lorsqu’ils viennent visiter votre site !
    Essayez donc WebTracer sur votre site Internet et laissez nous vos commentaires !

    Partager ce billet:
    scoopeo:L’architecture de son site en 3D ! fuzz:L’architecture de son site en 3D ! tapemoi:L’architecture de son site en 3D ! nuouz:L’architecture de son site en 3D ! blogmemes:L’architecture de son site en 3D ! pioche:L’architecture de son site en 3D ! del.icio.us:L’architecture de son site en 3D !


    Publié par Guillaume le 16/11/2006 à 18H56 sous Accessibilité, ergonomie

    Il y a quelques jours, Rand Fishkin de SEOmoz a publié un billet sur l’ergonomie et l’efficacité que doit offrir un formulaire en ligne.

    D’après une étude entreprise par UXMatters, certains types de formulaires sont plus ergonomiques et efficaces que d’autres. En effet, UXMatters a fournit une étude agrementée de tests d’utilisateurs couplés avec le “Eye tracking”, technique qui permet d’étudier le parcours visuel des utilisateurs face à une page web.

    L’étude est assez complète et nous offre de précieux conseils pour construire un formulaire efficace et donc augmenter le taux de conversion (le taux de formulaires completés étant souvent l’agrégateur principal pour calculer le taux de conversion d’un site).

    Ainsi, il apparait que le formulaire le plus ergonomique est celui qui présente les intitulés au dessus des champs de saisie (voir image).

    Eyetracking fill form

    Les chiffres indiquent, par ordre chronologique, à quels endroits les yeux des utilisateurs se sont attardés. Mise à part le bouton d’action (ici submit), nos yeux sont inconsciemment attirés par les champs de saisie. Il est donc plus judiciable de positionner au plus près des intitulés.

    Certaines règles sont fortement déconseillées :

    • L’utilisation du gras pour mettre en valeur les intitulés : il est plus difficile et plus fatiguant de lire en gras
    • L’agencement où les intitulés se trouvent à gauche des champs de saisie : La séparation franche entre l’intitulé et son champ de saisie entraîne une plus grande difficulté pour la compréhension de l’utilisateur. En effet, d’après le Eye Tracking, les utilisateurs ne visualise pas le formulaire dans son ensemble en un coup d’oeil.
    • Les listes sont à utiliser avec précaution : les listes déroulantes sont très/trop attractives pour les yeux. Donc, il faut les utiliser dans un but précis.

    Si vous voulez lire l’étude au complet, visitez le site de UXMatters. Et pour pousser votre analyse je vous invite à lire les commentaires sur le site de SEOmoz, qui amorce le débat “Utilité versus Design” sur le sujet.

    Partager ce billet:
    scoopeo:Construire un formulaire efficace ! fuzz:Construire un formulaire efficace ! tapemoi:Construire un formulaire efficace ! nuouz:Construire un formulaire efficace ! blogmemes:Construire un formulaire efficace ! pioche:Construire un formulaire efficace ! del.icio.us:Construire un formulaire efficace !


    Publié par Sarah le 26/04/2006 à 16H08 sous Accessibilité, ergonomie

    Dans un précèdent article, nous avions souligné le véritable enjeu que constitue l’accessibilité d’un site internet. L’accessibilité fait face à deux principaux obstacles que sont les handicaps physiques et techniques.

    Qu’entend-on par handicaps techniques ? Ce sont les handicaps que peuvent représenter le matériel utilisé pour accéder à un site web. Mon site est-il accessible pour tous types de connexion ? tous les navigateurs ? tous les systèmes d’exploitation ?
    A voir certains sites, ce sont des interrogations qui ne se sont jamais posées ! Pourtant, ces questions sont essentielles dans la réussite de votre projet web, surtout si vous vous placez en B2C (Business to Consumer).

    En effet, l’engouement des ménages pour l’informatique et l’évolution fulgurante du web au niveau technologique, ont poussé les constructeurs et les éditeurs de logiciels à renouveller/adapter leurs offres. Souvenez-vous il y a 5 ans, lorque vous aviez acheté votre ordinateur … Au bout de 3 mois, il devenait déjà obsolète …

    Il en est de même pour les logiciels et les systèmes d’exploitation … Qui a réellement les moyens d’acheter chaque nouvelles versions de Microsoft Windows ? Quant bien même auriez-vous les moyens … Pensez-vous vraiment que Windows XP fonctionnera sur votre vieux Pentium II ?

    Les navigateurs web peuvent aussi modifier l’accessibilité de votre site. De nombreux paramètres d’affichage sont différemment pris en compte, que vous utilisiez Firefox ou Internet Explorer (voir article sur Eolas). En effet, certaines commandes au niveau du CSS ou de la structure du site sont plus ou moins bien interprètés, selon votre navigateur.

    Ainsi le concepteur web doit absolument organiser une étape de validation, et tester son site sur les différentes plateformes. Voici quelques points à vérifier lors de la validation :

    • Utilisez un outil de vérification automatique pour l’accessibilité
    • Vérifiez la syntaxe (par exemple : HTML, XML, etc.)
    • Vérifiez les feuilles de style (par exemple : CSS)
    • Utilisez un navigateur ou un émulateur texte
    • Utilisez plusieurs navigateurs graphiques
    • Utilisez plusieurs navigateurs, anciens et récents
    • Utilisez des navigateurs lisant le contenu des pages,
    • Utilisez des lecteurs d’écran, des logiciels de grossissement, etc. …
    • Vérifiez la visibilité de votre site selon la résolution.

    Cette liste est non-exhaustive, mais nous avons peut-être oublié certains points, qui mériteraient d’être soulignés … Venez nous le dire et laissez nous vos commentaires !

    Partager ce billet:
    scoopeo:L’accessibilité et les handicaps techniques fuzz:L’accessibilité et les handicaps techniques tapemoi:L’accessibilité et les handicaps techniques nuouz:L’accessibilité et les handicaps techniques blogmemes:L’accessibilité et les handicaps techniques pioche:L’accessibilité et les handicaps techniques del.icio.us:L’accessibilité et les handicaps techniques


    Page 1 de 212»
     ‏