Ashley Firth écrit sur la création du web site Internet Octopus aussi convivial que attainable …
Le House Workplace a récemment publié des conseils sur la façon dont les entreprises peuvent utiliser la conception et le développement Internet pour rendre les websites accessibles à tous. Ils ont décrit les règles pour aider les personnes ayant une faible imaginative and prescient, des handicaps physiques ou moteurs, une dyslexie, des utilisateurs du spectre autistique ou ceux qui utilisent des lecteurs d’écran (logiciel qui lit les pages Internet ou les affiche sur des lecteurs de braille).
Nous avons pris cela comme l’event idéale pour auditer notre web site Internet et voir si nous offrons à tous nos visiteurs et purchasers une expérience facile et agréable. Les résultats de cet audit étaient bons, mais pas parfaits, nous nous sommes donc mis au travail. Voici quelques-uns des contrôles que nous avons effectués et quelques domaines dans lesquels nous nous sommes améliorés – j’espère que nos progrès encouragent les autres à faire de même.
Texte alt
La première selected que nous avons vérifiée était que le texte assis derrière les photos de notre web site Internet a en fait décrit la signification de l’picture, plutôt que sa fonction sur la web page. Par exemple, le texte Alt pour notre bannière de web page «About Us» devrait être «une picture de l’équipe d’opérations énergétiques Octopus» et non «à propos de nous, picture de bannière».
Têtes
L’étape suivante consistait à examiner les en-têtes de web page. Nous devions nous assurer que les en-têtes organisaient la web page de la bonne manière, dans une construction logique et hiérarchique. Nous avons utilisé un programme de cartographie spécifique (en-têtes Carte Chrome Extension) qui nous a montré les positions des en-têtes et nous l’avons optimisé afin que les lecteurs d’écran aient donné à chaque part l’accent.
Html5
Ensuite, nous avons dû nous assurer que notre web page était correctement structurée dans HTML5 (le code qui décrit les pages Internet). En codant correctement le web site, chaque élément de la web page fonctionne en harmonie – rien n’est «marron» sans contexte. Cela signifie également que les utilisateurs peuvent générer une desk des matières en utilisant la technologie d’help, les aidant à naviguer sur le web site.
Index d’onglet
De nombreux utilisateurs préfèrent utiliser un seul clavier ou ne peuvent utiliser qu’un clavier pour naviguer sur un web site Internet. C’était donc probablement l’ajout le plus essential au web site tout au lengthy de l’audit. Pour des pages telles que des articles, cela est relativement facile automobile tout le contenu est là, mais pour les flux de base de notre web site, comme obtenir un devis, le décomposer et l’inscription, ce contenu existe sur plusieurs pages, dans les modales et les listes déroulantes, et nécessite une entrée utilisateur.
La plupart des navigateurs sont très bons pour permettre une interplay au clavier avec des éléments tels que des boutons, des liens et des entrées de formulaire. Cependant, parfois la conception et l’UX dicte des composants personnalisés qui s’éloignent de cela, et ils doivent être tout aussi accessibles. L’index d’onglet vous permet de définir une séquence que les utilisateurs suivent lorsqu’ils utilisent la touche Tab pour naviguer dans une web page. Avec cela, vous pouvez vous assurer que les utilisateurs ont accès à toutes les informations d’une web page dans une commande à la fois claire et logique. Une fois que nous avons terminé cela, nous avons parcouru quelques étapes supplémentaires en nous assurant qu’une fois que les éléments de la web page pourraient être concentrés, les utilisateurs pourraient également interagir avec eux.
Niveaux de contraste
C’est un problème délicat à repérer parfois, mais facile à tester. Les directives d’accessibilité du contenu Internet W3C indiquent que le niveau de contraste entre les couleurs de premier plan et d’arrière-plan devrait être d’au moins 7: 1 pour le texte régulierConforme AAA. Ceci est particulièrement essential pour les utilisateurs à faible imaginative and prescient, qui peuvent avoir du mal à se concentrer sur le texte coloré de la même manière que l’arrière-plan.
Comme il serait incroyablement difficile d’évaluer le contraste avec l’œil humain, il existe pas mal d’outils en ligne utiles. Le Outil de contraste Webaim est ce que nous avons utilisé (vous soumettez les deux codes hexadécimaux manuellement), mais il existe des outils qui peuvent évaluer une web page entière, comme Webaim wave. L’extension Google Accessibility Developer Instruments soulève également tout problème de contraste lorsque vous auditez une web page.
Et bien d’autres…
Quelques efforts minimaux «victoires rapides» qui aident vraiment les purchasers:
- Augmenter la taille de la police de base pour aider ceux à faible imaginative and prescient. Le web site Gov.uk a 19px comme taille de police la plus basse, garantissant que tout le monde peut facilement lire son contenu (nous utilisons 18px).
- Assurer que les boutons d’motion indiquent ce que vous êtes sur le level de faire, au lieu d’être obscure. Par exemple, un bouton d’inscription devrait dire «inscrire» et non «cliquez ici».
- Lorsque vous utilisez des icônes ou des couleurs pour transmettre le sens ou l’motion, soutenez-le toujours avec du texte. La couleur n’a qu’un affect sur ceux qui ont une faible imaginative and prescient ou une capacité de couleur, et l’utilisation de figures de parole, d’idiomes ou de visuels qui pourraient être mal interprétées peuvent affecter ceux sur le spectre autistique.
- Je n’ai pas de texte essential dans les étiquettes de paragraphe se faisant passer pour des en-têtes. Le sens visuel qui y est attribué ne sera jamais transmis through un lecteur d’écran.
Outils
Trouver les problèmes est parfois aussi difficile que de les réparer. Ce sont les meilleurs outils que nous avons trouvés au cours de l’audit:
Inspiration
Les excellentes affiches visuelles du bureau à domicile du Faire et faire de la conception avec l’accessibilité à l’esprit.
Remark les modifications ont-elles affecté nos purchasers?
Les utilisateurs peuvent maintenant:
- Obtenez un devis, interagissez avec lui et inscrivez-vous en utilisant uniquement le clavier ou un lecteur d’écran.
- Effectuez des tâches régulières dans la zone des membres telles que soumettre un compteur, voir leurs factures ou modifier leurs coordonnées en utilisant uniquement le clavier ou un lecteur d’écran.
- Utilisez des lecteurs d’écran avec plus de facilité, automobile toutes les pages suivent une construction d’data logique et de cap, avec des balises ALT descriptives pour les photos.
- Lisez facilement tout le contenu sur le web site Internet, automobile il a une cote de contraste AAA qui passe.
- Comprenez clairement l’objectif des liens et des boutons, avec du texte d’motion descriptif et aucun cas où seule l’imagerie est utilisée pour transmettre le sens.
Je suis fier des progrès que nous avons réalisés sur l’accessibilité du web site, mais aucun web site que nous avons vu n’est parfait tout le temps. Nous maintiendrons avec diligence les nouvelles normes que nous nous sommes fixées, dans le however que personne ne sera exclu en fonction de la façon dont ils interagissent avec notre web site.
Ashley Firth,
Chef des interfaces
