Quelles sont les étapes minimales à suivre pour que mon site Web soit accessible?

35

J'essaie de suivre une norme très importante que je dois admettre avoir ignorée jusqu'à récemment. Je veux m'assurer que mes pages sont accessibles à une grande partie des personnes handicapées. Je me concentre principalement sur les didacticiels qui utilisent beaucoup de texte et d'images, mais pas de vidéo / flash ni d'animations.

Qu'est-ce qu'une liste de contrôle que je peux suivre pour m'assurer que beaucoup de personnes handicapées puissent vivre une bonne expérience lors de l'utilisation de mon site Web et de quelles incapacités devrais-je être le plus conscient?

Je sais que je ne peux pas plaire à tout le monde. J'ai suivi les directives du W3C , mais je ne suis pas tout à fait sûr des normes qui s'appliquent à moi. Je ne construis pas d'applications Web, je construis principalement des wiki, comme des échanges d'informations, des blogs et des forums occasionnels.

Tim Post
la source
uxexchange.com?
Bobby Jack

Réponses:

18
  • Assurez-vous que chaque image a alt texte.
  • Assurez-vous que votre palette de couleurs convient aux daltoniens.
  • Offrez une mise en page à contraste élevé ou une mise en page de texte large pour les malvoyants.
  • Assurez-vous que vos liens ont un sens quand ils sont lus hors du contexte (c'est-à-dire, n'écrivez pas simplement "cliquez ici").
  • Assurez-vous que votre site offre toujours des fonctionnalités de base complètes si l'utilisateur ne prend pas en charge JavaScript.

Le W3 propose des conseils de base sur l'accessibilité via son site Web . Joe Clark propose une version en ligne de son livre "Building Accessible Websites" (Sites Web accessibles), qui contient de nombreuses informations utiles.

Wolfwyrd
la source
1
Il existe plusieurs mises en garde concernant la règle 'alt text'. Malheureusement, j'ai travaillé avec des personnes qui la traitent comme une règle absolue - c'est-à-dire que CHAQUE image DOIT avoir un attribut alt. Ensuite, ils ajoutent des éléments tels que "Le logo de notre société" à une image de logo et "Un grand '' en bleu" à une image liée à un compte Twitter.
Bobby Jack
Avec la balise alt, je crois que CHAQUE image devrait en avoir une. Lorsque vous travaillez avec un lecteur d'écran, vous devez lui dire quoi faire. Si votre image est simplement là pour attirer l’attention visuelle et n’a aucune autre valeur, utilisez alt = "" pour que le lecteur d’écran sache l’ignorer. Si votre image est un graphique, ou peut-être un en-tête, assurez-vous d'inclure les informations dans la balise alt afin que le lecteur d'écran, ainsi que les personnes qui désactivent les images, ne passent pas à côté.
ph33nyx le
8

Rendre votre balisage sémantique est un pas de géant vers l’accessibilité. Si vous pouvez naviguer sur votre site sans y appliquer de code CSS et si son contenu a un sens, tout le reste n’est que purement visuel!

Toby
la source
1
Et beaucoup plus de plaisir le jour de CSS nu :)
Tim Post
2
Haha, naturellement! Sérieusement, beaucoup de gens pensent que l’accessibilité est entièrement liée au design, c’est exactement le contraire: si vous pouvez créer votre contenu de manière à ce qu’il fonctionne sans aucune conception, une machine (et donc un humain) sera toujours en mesure d’accéder. il.
Toby
7

Premièrement, le «handicapé» ne veut rien dire!

Alors regardons quelques groupes de personnes que vous devez vérifier si vous êtes votre site web.

Un pauvre qui n'a qu'un cahier avec un petit écran

Vous avez juste besoin de vérifier que votre site Web peut être utilisé lorsque la fenêtre du navigateur est petite sans douleur égale.

Un daltonien

Quelqu'un peut-il utiliser votre site Web sans voir la couleur des icônes, etc., imaginé que vous y accédiez sur un moniteur N & B.

Une personne avec un site pauvre.

Lorsque vous modifiez la taille du texte dans le navigateur, tout le texte est agrandi sur votre site et la mise en page reste correcte. De plus, le site peut-il toujours être utilisé sur un petit moniteur?

Votre site utilise-t-il une mise en page à contraste élevé? Sinon, est-il facile pour l'utilisateur de passer à une mise en page à contraste élevé?

Une personne qui ne peut pas utiliser la souris

Une personne qui n’a jamais utilisé votre site Web peut-elle accéder à toutes les fonctions / informations au moyen du clavier? (La touche de tabulation fonctionne-t-elle de manière utile?)

Quelqu'un avec de faibles compétences en lecture

Vous utilisez un anglais simple autant que possible?

Quelqu'un qui n'est pas bon pour apprendre de nouvelles choses.

La conception de votre site est-elle basée sur un autre site que vos utilisateurs savent déjà utiliser?

Une personne aveugle.

C'est le plus difficile et la plupart de ce que vous lisez n'est pas d'utilisation équivalente!
Court-circuitez d’abord tous nos autres problèmes d’accès, car il y a beaucoup plus de personnes malvoyantes ou qui ne peuvent pas utiliser la souris que de personnes liées.

Après avoir compris vos objectifs , par exemple, si votre site est un site de réservation d’hôtel, il peut être préférable de fournir un numéro de téléphone payant pour effectuer les réservations, puis de simplement rendre les informations sur l’hôtel accessibles.

La plupart des aveugles ont beaucoup de difficulté à utiliser un site Web interactif qu’ils n’ont jamais utilisé auparavant, aussi bien que le site soit conçu.

Alors, devriez-vous fournir une option non web? (Téléphone? Une personne qui leur rend visite pour aider à remplir le formulaire, etc.?)

Tout d'abord, votre site peut-il être utilisé sans aucune image? (Le texte alternatif est un moyen de le faire)

Étant donné que le logiciel de reconnaissance vocale lit le site de haut en bas, votre site peut-il être compris de cette manière?

Il est très difficile de rendre un site avec une navigation complexe facile à utiliser par une personne liée, de plus une personne liée ne peut absolument pas savoir qu'une partie de la page a été mise à jour par JavaScript et doit être relue.

Changer la couleur des éléments pour les changements d'état n'est également pas une bonne option.

La seule façon d'apprendre à bien faire fonctionner un site Web pour lier des personnes est de voir comment une personne liée utilise un lecteur d'écran sur certains sites Web. Aucune des normes n'est suffisante, elles vous indiquent simplement ce que vous ne devez pas faire, mais ne vous y tenez pas (à moins que vous ne receviez qu'un texte statique comme un site de journal).

Ian Ringrose
la source
1
J'aime la première phrase de cette réponse! (et bien sûr les autres phrases aussi)
Tim Post
5

Vous pouvez utiliser ce site pour obtenir un aperçu rapide de la conformité: http://wave.webaim.org/

Il effectue un travail similaire à l'ancien système "Bobby" qui a été fermé il y a quelques années.

Mark Hatton
la source
3

Le gouvernement néerlandais utilise ce site pour tester ses sites sur l'accessibilité. jetez un coup d'oeil ... vous pouvez également entrer sur votre site pour tester son statut actuel en matière d'accessibilité ...

http://www.webrichtlijnen.nl/english/

Rickjaah
la source
2

Le livre Dive into Accessibility de Mark Pilgrim, téléchargeable gratuitement, est un point de référence utile sur ce thème. C'est à partir de 2002 mais toujours très pertinent. Des conseils comme "utiliser la dégradation gracieuse" ne vieillissent pas.

Ian Mackinnon
la source
1

Je pense que vous devez utiliser ce site http://www.totalvalidator.com ou le plugin firefox disponible. Il comporte plusieurs validations d'invalidité et signalera tout ce qui manque.

utilisateur1270
la source
1

La réponse n ° 1 est simple: écrivez du code HTML / CSS valide et correct !!! Toutes les suggestions ci-dessus sont bonnes. Voici une liste de contrôle que j'ai écrite il y a quelques années et qui présente quelques éléments à vérifier sur tous les sites: https://forge.iowa.gov/wiki/index.php/Web_Checklist . Cela suppose que vous avez la barre d’outils Web Developer sur FF, mais elle est gratuite et facile à obtenir.

Quelques choses simples qui, à mon avis, peuvent faire une réelle différence:

Pour les formulaires, veillez à utiliser la balise LABEL. Il crée une zone cliquable plus grande pour des éléments tels que les boutons radio et lie également des éléments aux lecteurs d'écran.

Une autre chose qui me semble souvent mal utilisée est les balises h1, h2, h3 .... S'ils sont utilisés correctement, ils peuvent aider quelqu'un à naviguer facilement dans votre page. Si nous les stylons et les utilisons bon gré mal gré, il est très trompeur de laisser des lecteurs d’écran et d’autres périphériques d’entrée / sortie sans souris.

Il est également agréable de permettre à une personne qui navigue sur votre page sans tous vos beaux CSS et vos images de passer du code répétitif au contenu. Ceci est généralement réalisé en utilisant un lien SKIP caché dans le CSS. Par exemple, <a href="#skipnav" class="noshow">Skip past navigation to content.</a>pour permettre de passer au-delà d’une navigation longue.

Comme l'a déclaré Tony, l'un des meilleurs tests consiste à supprimer toutes les fonctions de votre page pour voir si cela a encore un sens.

ph33nyx
la source
À propos des balises ALT ... chaque image devrait avoir une balise ALT. Si l'image est un contenu, la balise ALT doit contenir un élément descriptif. S'il s'agit simplement d'une décoration, utilisez des guillemets vides alt=""pour indiquer que les lecteurs d'écran tels que JAWS peuvent simplement les ignorer.
ph33nyx