Faire un site web accessible

Formation

En Semi-présenciel Paris

Prix sur demande

Appeler le centre

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Description

  • Typologie

    Formation

  • Méthodologie

    En semi-présentiel

  • Lieu

    Paris

Grâce à cette formation vous pourrez acquérir les connaissances nécessaires qui vous permettrons d’ajouter des compétences à votre profil et obtenir de solides aptitude qui vous offriront de nombreuses opportunités professionnelles.

Les sites et dates disponibles

Lieu

Date de début

Paris ((75) Paris)
Voir plan
7 Cité Paradis, 75010

Date de début

Consulter

Questions / Réponses

Ajoutez votre question

Nos conseillers et autres utilisateurs pourront vous répondre

À qui souhaitez-vous addresser votre question?

Saisissez vos coordonnées pour recevoir une réponse

Nous ne publierons que votre nom et votre question

Les Avis

Le programme

Introduction du cours

Inévitablement, un webmaster entend un jour ou l'autre parler d'accessibilité.

L'accessibilité, c'est celle de son site Internet bien sûr, mais qu'est-ce que c'est que ce truc ? A quoi ça sert ? Et puis pourquoi faut-il qu'un site soit accessible ?

Ce sont ces questions qui seront abordées dans ce tuto. Il est à la fois une introduction à l'accessibilité mais aussi une aide pour rendre son site accessible. Les développeurs les plus avancés trouveront peut-être un conseil ou deux auquel(s) ils n'auraient pas pensé.

Quoiqu'il en soit, j'espère que ce tuto vous aidera enfin à comprendre l'importance que prend l'accessibilité et surtout ses enjeux !

L'accessibilité : quoi et pourquoi ?C'est quoi, un site accessible ?

Comme on peut s'en douter, un site web accessible, c'est un site qui peut être consulté par tous. Tous, c'est aussi bien un handicapé (visuel, moteur, auditif ou tout simplement dyslexique) que quelqu'un qui a du mal à s'habituer à la nouvelle technologie qu'est Internet (personne âgée, parents ou bien les débutants du web, tout simplement !).

Il va donc falloir concevoir votre site en vous posant la question suivante : est-ce que tous les visiteurs vont pouvoir voir mon site de la même façon ?

Pour cela, plusieurs points sont à considérer en plus des questions classiques, comme :

  • mon site s'affiche-t-il correctement sur les écrans à petite résolution (800 * 600) ?

  • est-ce que mon site est compatible avec tous les navigateurs et tous les systèmes d'exploitation ?

Certes, il faut que votre site réponde à ces critères mais il faut aller plus loin, beaucoup plus loin ; car ce n'est pas suffisant pour que tous vos visiteurs puissent naviguer correctement sur votre site.

Ah bon ? Il y a d'autres problèmes ?

Oui. Être accessible, c'est répondre aux besoins de ces personnes :

  • ceux qui ne sont pas capables de voir, entendre, bouger ou qui ne peuvent pas accéder à l'information de manière classique ;

  • ceux qui ont des difficultés pour lire ou comprendre un texte (on parlait tout à l'heure des dyslexiques par exemple) ;

  • ceux qui ne peuvent pas utiliser de clavier ou de souris ;

  • ceux qui utilisent un lecteur d'écran, un petit écran à faible résolution ou une connexion Internet lente ;

  • ceux qui ne parlent pas la langue dans laquelle le document est écrit ;

  • ceux qui sont dans des situations où leurs yeux, leurs oreilles ou leurs mains sont occupés (par exemple en conduisant ou en travaillant sur des chantiers bruyants) ;

  • ceux qui ont un navigateur différent du vôtre, un navigateur audio par exemple, ou un système d'exploitation différent.

Traduction du guide à l'accessibilité (en) du W3C.

Toutes ces personnes ont elles aussi besoin d'accéder aux services que propose Internet et doivent donc pouvoir avoir accès à toutes les parties de votre site et y remplir les formulaires.

Ce qu'il faut donc comprendre, c'est que l'accessibilité ne concerne pas seulement les personnes handicapées comme on l'entend souvent, mais aussi toutes les personnes non habituées à cette nouvelle technologie, ou tout simplement une personne qui ne dispose pas d'un matériel classique (connexion ADSL, paramétrage du moniteur, absence de souris, etc.). Par ailleurs, les robots des moteurs de recherche sont aussi aveugles... Eh oui ! Google est aveugle. :-°

Finalement, quand on parle d'accessibilité pour les personnes handicapées, c'est incomplet : l'accessibilité, ça concerne (et ça concernera de plus en plus) tout le monde. :)

Pour résumer, voici une citation de Roger Johansson :

Citation : Roger Johansson

L'accessibilité, c'est construire des sites web qui fonctionnent quelques soient le navigateur et le système d'exploitation que vous utilisez, et quel que soit le handicap que vous pourriez avoir. Il s'agit de respecter les besoins et préférences personnelles différents de personnes différentes. Tout le monde n'utilise pas le web de la même manière, ni avec le même équipement.

traduction par Marie Alhomme

Pourquoi faire un site accessible ?

Un des moyens mis en place par le W3C (World Wide Web Consortium) est le groupe de travail WAI (Web Accessibility Initiative), en charge de proposer des solutions techniques pour rendre accessible le web aux handicapés.

Dans leur présentation sur l'accessibilité du web (en), le WAI explique qu'il est important de créer des sites accessibles à tous pour que chacun puisse comprendre, naviguer et interagir avec le web. Car le web devient incontournable. On le retrouve ainsi présent dans l'éducation (inscription dans des écoles post-BAC, consulter ses notes, ...), l'emploi (recherche d'emploi, dépôt de CV, contacter une entreprise, ...), le gouvernement (déclarer ses revenus, voter, ...), le commerce (acheter des cadeaux, consulter son compte bancaire, acheter du matériel sur eBay, ...), la société (rencontrer des gens, apprendre, se cultiver, ...).

Pourquoi donc tout le monde ne pourrait-il pas profiter du web comme vous et moi ?
Pourquoi chacun n'aurait-il pas les mêmes possibilités d'accès à Internet que son voisin ?

Rendre son site accessible

Nous avons vu précédemment pourquoi il est nécessaire de rendre son site accessible, voyons donc maintenant comment le faire.

Pour cela, je vous propose de vous poser quelques questions (certaines questions proviennent de pompage.net (fr).)

Le langage est-il facile à comprendre ?

Rendre son site accessible, c'est commencer par le normer pour qu'il puisse être interprété de manière similaire par tous les logiciels qui exécuteront vos pages (comme par exemple les nouveaux appareils connectés au web qui ne sont pas des PC). En effet, si vos scripts ne respectent pas ces normes, les navigateurs auront du mal à réorganiser votre site de la même façon que vous pensiez l'avoir fait. Au mieux, cela change l'affichage de votre page mais au pire, cela peut omettre certaines informations du site.

Pour cela, outre la nécessité de respecter la normalisation du langage utilisé, il est recommandé par le W3C de séparer la structure de la présentation (le HTML4 et (X)HTML strictes du CSS). Cette séparation a beaucoup d'avantages pour le développeur (clarté du code, modifications plus faciles du design, proposer plusieurs design pour un même site, etc.) et permet donc aux logiciels en question de distinguer les deux. De plus, le CSS a de nombreux avantages comme le support des écrans des navigateurs, celui de l'impression ou encore le support des écrans de télévisions (cf. la liste complète des propriétés CSS (en)).

Votre site est valide ? Vérifiez le grâce au validateur du W3C (en). Vérifiez aussi si votre feuille de style est valide : valider sa feuille de style (fr).

La page a-t-elle un sens sans la feuille de style ?

En séparant la structure de la présentation, on permet donc aux navigateurs de traiter indépendamment l'un de l'autre. Un bon test pour savoir si la structure de votre site est bien réalisée est de désactiver le CSS.

En procédant ainsi, vous devriez voir votre site hiérarchisé, cohérent et lisible.

Hiérarchisé, ça veut dire que les éléments les plus importants apparaissent en premier (lien vers le menu, lien vers le contenu, titre), puis les éléments secondaires (menu) suivi du contenu (articles, news, etc.) et pour finir, le pied de page (copyright, lien vers le haut de la page, etc.).

Cohérent, ça signifie que plus on va vers le bas de la page, plus la hiérarchie diminue ; donc, il serait par exemple incohérent de trouver un titre <h1> en fin de page.

Lisible enfin, ça se traduit par le positionnement du texte avec une absence totale de présentation (pas de tableau pour positionner le menu et le contenu, pas d'alignement à droite ou à gauche, etc.).

Les liens de la page sont-ils logiques ?

Dans une page web, les liens abondent. Vous êtes-vous seulement posé la question suivante : qu'est-ce qu'un lien ?

Un lien, comme son nom l'indique, c'est ce qui lie deux pages entre elles. Quand on clique dessus, c'est pour se rendre sur la page vers laquelle il pointe.

Concrètement, ça veut dire qu'il est inutile de faire un lien qui pointe vers la page actuelle (un exemple courant, c'est un lien qui envoie à la page d'accueil sur la page d'accueil !), à l'exception des ancres qui permettent quant à elles d'accéder directement à une partie de la page (menu, contenu, etc.).

Il faut aussi penser à montrer au visiteur où il est et où il a été. Un bon exemple : les liens de Google qui deviennent violets quand vous avez déjà visité le site. C'est pratique, non ? Alors pourquoi vous n'aidez pas vos visiteurs à naviguer plus efficacement sur votre site ?

Ce sont des conseils simples mais très utiles pour améliorer la navigation sur un site. N'avez-vous jamais été perdus sur un site abondant de liens menant tous à des endroits différents, finalement liés entre eux, et impossibles à retrouver lors de votre seconde visite ? Alors ne faites pas la même chose chez vous. :D

Nota Bene : plus généralement, votre site sera navigable si vous arrivez à répondre aux 3 questions suivantes sans vous déplacer à l'ouverture de la page :

  • où suis-je ? (Présent)

  • où est-ce que je peux aller ? (Futur)

  • où suis-je déjà allé ? (Passé)

Ces 3 questions font l'objet d'un article traduit sur pompage.net : lire l'article de Derek Powazek (fr).

Utilisez-vous le texte alternatif ?

Longtemps je me suis demandé à quoi servait le texte alternatif. Peut-être vous aussi. En fait, son utilité est très importante pour les navigateurs, les robots des moteurs de recherche et les visiteurs. Autant dire que ça devrait être obligatoire de mettre un texte alternatif pour chaque image de votre site !

Ce texte est une alternative à l'image. Il est utile lorsque l'image ne s'affiche pas bien entendu, mais aussi quand le navigateur (ou le visiteur) désactive volontairement les images (connexion lente, logiciel de revue d'écran, robots...).

Donc à partir de maintenant, toute image doit avoir un attribut alt. ^^

Pour savoir comment bien utiliser le texte alternatif, je vous propose la traduction d'un article de WebAIM (en) sur pompage.net : Bien utiliser le texte alternatif (fr).

Nota Bene : le texte alternatif ne s'applique pas qu'aux images. En fait, il doit être présent sur tous les supports différents du texte (images, scripts, sons, vidéos).

Persiste-t-il des tableaux ?

Il faut bien comprendre qu'initialement, les tableaux ont été conçus pour présenter des données tabulaires.

Est-ce que, lorsque vous écrivez des messages ou des tutos sur le Site du Zéro, vous utilisez les tableaux pour positionner votre texte ? Ça vous paraît peut-être absurde, mais c'est ce que certains font pour leur site web ! J'avoue d'ailleurs l'avoir déjà fait. ^^

Bref, maintenant c'est terminé et cela pour plusieurs raisons.

  • Les tableaux ralentissent le chargement de la page, et utilisent donc plus la bande passante (qui est payante, soit dit en passant :-° )

  • Les tableaux ne sont pas pratiques pour gérer un design, comparé à ce qui est proposé par le CSS : c'est normal car ils ne sont pas faits pour ça : pourquoi faut-il utiliser des attributs comme colspan ou border="0" ? C'est dénaturer un tableau, alors autant prendre les bons outils !

  • Ne plus utiliser les tableaux, c'est aussi garder une cohérence entre les différentes pages du site puisqu'elles seront gérées par une même feuille de style, au lieu de copier-coller des attributs de tableaux...

  • Avez-vous déjà essayé d'imprimer une page web réalisée à coups de tableaux ? Eh bien pour éviter les dégâts, utilisez un langage qui supporte l'impression... le CSS, bien sûr !

  • Pour finir, les tableaux ne sont pas considérés de la même façon par un moteur de recherche qui pense qu'il s'agit de tableaux de données tabulaires (grille des horaires des trains par exemple, ou prix d'un fromage dans différents supermarchés), et il a tout à fait raison ! Autrement dit, si le titre principal de votre site se trouve dans une cellule d'un tableau, les robots ne le considéreront pas comme un titre principal puisqu'il n'est pas à sa place. Sa place serait entre les balises <h1> et </h1>.

Alors qu'attendez-vous ? Le CSS vous tend les bras. Voici des tutos pour faire une mise en page sans tableaux (fr), pour vous aider à démarrer !

Reste-t-il des cadres (frames) ?

Les frames, ce n'est pas terrible. Pas terrible car même s'ils permettent au navigateur de ne pas avoir à recharger une partie de la page à chaque fois que le visiteur clique sur un lien interne, ils provoquent un mauvais accès à la page.

En effet, les frames ont pour conséquence que chaque page du site est représentée par une seule et même URL. C'est peut-être beau mais ce n'est pas accessible du tout. :colere:

De plus, les moteurs de recherche supportent mal les frames : ils ne peuvent donc pas référencer tout le site, et donc cela a plusieurs conséquences : une description du site non complète, non mise à jour et un mauvais lien vers le site puisque le moteur de recherche pointera vers une partie seulement de votre site (généralement la page d'accueil, celle par défaut) et non pas directement vers la recherche demandée par le visiteur.

Plus d'infos sur les frames (en).

Proposez-vous une navigation au clavier efficace ?

Proposer une navigation au clavier, c'est important pour ceux qui n'ont pas de souris, mais encore faut-il bien le faire.

Les deux moyens principaux sont l'accesskey (touches de raccourcis pour atteindre un lien sur votre site) ou le tabindex (ordonner les liens à sélectionner lorsqu'un visiteur se déplace avec la touche tab du clavier).

Le problème de tabindex c'est que même si ça parait accessible, ça ne l'est pas dans le sens où vous devriez concevoir ce problème sans avoir recours à cette astuce. Et voici un petit tuto sur l'histoire de tabindex(fr), pour expliquer tout ça !

Concernant l'accesskey, il s'agit tout simplement d'un échec car les combinaisons de raccourcis les plus simples sont déjà utilisées par le système d'exploitation. Voici un autre tuto expliquant l'échec de l'accesskey(fr).

La sémantique

Être plus accessible, c'est donc être plus compréhensible. La sémantique est là pour ça : donner au contenu de votre site un sens.

L'exemple-type, c'est lorsque vous mettez en gras...

Appeler le centre

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Faire un site web accessible

Prix sur demande