wave accessibility testing tool tutorial
Tutorial de l'eina d'accessibilitat web WAVE: com utilitzar l'extensió WAVE Chrome i Firefox
Barra d'eines d'accessibilitat web es va explicar amb detall al nostre tutorial anterior. Aquest tutorial és una continuació del primer d’aquesta sèrie, consulteu-lo aquí - Proves d’accessibilitat web: primera part .
En aquest tutorial, vam examinar alguns conceptes fonamentals de què és l'accessibilitat i com es pot avaluar mitjançant eines de prova d'accessibilitat.
En aquest tutorial, veurem un parell d’eines d’accessibilitat més com la barra d’eines WAVE, l’eina d’accessibilitat de JAWS, les tècniques i els detalls.
(imatge font)
Què aprendreu:
ONADA(Eina d'avaluació de l'accessibilitat web)
L'eina WAVE és una eina d'avaluació de l'accessibilitat web, una barra d'eines per a Navegador Firefox.
És important tenir en compte que WAVE no us pot dir si el vostre contingut web és accessible; només un ésser humà pot determinar la veritable accessibilitat. Però, WAVE us pot ajudar a avaluar l’accessibilitat del vostre contingut web.
Tota l'avaluació es fa directament al navegador i no s'envia cap informació als servidors WAVE. D’aquesta manera es garanteixen informes d’accessibilitat 100% privats i segurs.
Per descarregar la barra d'eines d'accessibilitat web WAVE, aneu a http://wave.webaim.org/toolbar/ i descarregueu-lo a F navegador irefox . Assegureu-vos que obriu l'URL de baixada al navegador Firefox perquè la barra d'eines WAVE només admet Firefox.
Com s'utilitza la barra d'eines d'accessibilitat web WAVE
A continuació es mostren les funcions que podem utilitzar mentre treballem al navegador Firefox:
# 1) Seleccioneu el lloc web http://www.easports.com/ i feu clic a 'Errors, funcions i alertes', trobareu la pàgina amb alertes d'accessibilitat i errors en color groc. Passeu el ratolí per sobre de les imatges per veure els detalls de les alertes.
( Nota : feu clic a qualsevol imatge per ampliar-la)
la passarel·la predeterminada no està disponible Windows 10 continua succeint
# 2) Feu clic a “Visualització d’estructura / comanda” i obtindreu la pàgina amb els detalls del marc en línia.
# 3) Ara feu clic a 'Visualització només de text', el lloc es mostrarà sense imatges, estils ni dissenys.
com es crea un arbre de cerca binari a Java
# 4) Les icones 'Visualització de l'esquema' de la barra d'eines us indicaran si els encapçalaments estan en ordre o no.
# 5) La icona 'Restableix la pàgina' actualitzarà la pàgina.
# 6) En fer clic a 'Desactiva l'estil', s'eliminaran els estils CSS de la pàgina.
# 7) El botó 'Icones Key' mostrarà una llista de totes les icones WAVE amb detalls addicionals, informació i recomanacions.
També podeu avaluar l’accessibilitat del lloc web sense descarregar l’eina Wave i utilitzar-la directament en línia.
Passos per verificar l'accessibilitat del lloc web
Pas 1) Feu clic a URL: http://wave.webaim.org/
Pas 2) Introduïu el fitxer Adreça de la pàgina web al text Caixa i premeu Intro. Ho farem servir amb com un exemple. Per tant, introduïu el lloc www.facebook.com al quadre de text i feu clic al botó d'inici.
Pas 3) Trobareu detalls resumits a la part esquerra de la navegació.
- Els errors es mostraran en vermell amb un recompte. En el meu cas, es mostra com a 13.
- Les alertes es mostraran en groc amb un recompte 13.
- Les funcions estarien en verd amb un recompte de 10.
- Els elements estructurals serien 6 de color blau.
- HTML5 i ARIA serien 15 de color porpra.
- Els errors de contrast serien 14 en color negre.
En fer clic a cada icona, obtindreu més informació sobre els elements tal com es mostra a dalt per alerta (al centre de la pàgina).
Ara, vegem una categoria d’eines diferent:
Validadors d'accessibilitat de pàgines web gratuïts:
Poques més millors eines de verificació d'accessibilitat web:
- Eina d’avaluació de l’accessibilitat de codi obert AChecker
- PowerMapper
- Servei d’accessibilitat
- Accés Eval
- MAGENTA
Eines de discapacitat visual
La discapacitat visual es refereix a la pèrdua de visió. Hi ha diferents tipus de discapacitats visuals:
- Ceguesa
- Visió baixa o restringida
- Daltonisme
Els usuaris amb deficiències visuals utilitzen un programari de tecnologia d’assistència que llegeix el contingut en veu alta.Per exempleJAWS per als sistemes operatius de Windows, NVDA per als sistemes operatius de Windows, Voice Over per a Mac. Els usuaris de la UA amb visió feble també poden fer que el text sigui més gran amb una configuració del navegador o una configuració magnífica del sistema operatiu. Aprendrem aquestes característiques amb l'ajut de les eines de lupa i JAWS.
A) Lupa
1) Lupa de text de zoom amplia tot el contingut de la pantalla de l'ordinador i facilita la visualització i l'ús de l'aplicació. Podeu descarregar-lo des de aquest enllaç .
Per fer-vos una bona idea de com funciona, us recomanem que descarregueu una versió de prova gratuïta i que experimenteu.
2) Lupa de finestra també amplia les diferents parts de la pantalla. Podem obrir-lo fent clic al botó Inici des de l’escriptori i després escrivint lupa. Feu clic al programa Lupa. Quan passeu el ratolí per sobre de la pàgina web, aquesta eina amplia la mida de la pantalla i es mostra.
millor idea de Python gratuït per a Windows
3) Els usuaris cecs d’ordinadors, que no poden utilitzar un monitor d’ordinador normal, utilitzen una pantalla Braille refrescable o un terminal Braille per llegir la sortida de text.
D'acord amb Viquipèdia , una pantalla Braille refrescable o terminal Braille és un dispositiu electromecànic per mostrar caràcters en braille, generalment mitjançant passadors de punta rodona elevats a través de forats en una superfície plana.
B) JAWS- Accés al lloc de treball amb veu
JAWS és un lector de pantalla que s’utilitza per provar pàgines web al sistema operatiu Windows que permet als usuaris danyats visualment llegir la pantalla. JAWS admet totes les versions dels sistemes operatius, a més de proporcionar una pantalla Braille actualitzable.
A continuació es mostren les ordres del teclat per utilitzar JAWS:
Les funcions bàsiques que es posen a prova amb l'ajut de JAWS són:
- JAWS proporciona el nombre de pulsacions de tecles per navegar per pàgines web. Per exemple, les tecles de fletxa, les tecles de pàgina amunt i avall, Inici, Final i diverses tecles de navegació JAWS.
- Enllaços, imatges i mapes d'imatges: JAWS proporciona pulsacions de tecles per navegar d'un enllaç a un altre a la pàgina web.
- Camps i controls de formulari HTML : JAWS proporciona pulsacions de tecles per navegar entre els elements del formulari
- Marcs HTML : Navegueu pels marcs amb el teclat.
- Taules : Navegar per les cel·les de la taula
Es tracta d’una breu visió general de les diferents tècniques i eines que s’utilitzen per realitzar l’avaluació de l’accessibilitat.
Consells sobre proves d'accessibilitat per a desenvolupadors i verificadors
- Totes les imatges actives tenen text alternatiu que indica què fa l'enllaç o el botó?
- Totes les imatges decoratives i les imatges redundants tenen text alternatiu nul (alt = '')?
- Totes les imatges d'informació tenen text alternatiu que proporciona la mateixa informació que les imatges proporcionades?
- La pàgina està organitzada amb encapçalaments? Es marquen com a títols?
- Es pot accedir a tot amb el teclat?
- La vostra pàgina es llegirà en un ordre lògic en un lector de pantalla?
- Està clar quin element està enfocat mentre utilitzeu l'accés al teclat?
- Tota la informació important d’un vídeo està disponible a través d’àudio estàndard o mitjançant una audiodescripció afegida?
L’equip de desenvolupament pot assegurar-se que el seu producte compleix l'accessibilitat mitjançant la inspecció de codi i les proves d'unitats.
Casos de prova típics:
- Assegureu-vos que totes les funcions estiguin disponibles només mitjançant el teclat (no utilitzeu el ratolí)
- Assegureu-vos que la informació sigui visible quan es canvia la configuració de la pantalla als modes de contrast alt.
- Assegureu-vos que les eines de lectura de pantalla puguin llegir tot el text disponible i que cada imatge / imatge tingui el text alternatiu corresponent associat.
- Assegureu-vos que les accions de teclat definides pel producte no afectin les dreceres de teclat d’accessibilitat.
Conclusió
L'accessibilitat web ofereix moltes oportunitats per a usuaris amb discapacitat. Tot i això, hem de reconèixer el fet que és difícil proporcionar un accés complet a qualsevol tipus de discapacitat o dificultat que pugui impedir que un usuari arribi al contingut d’un lloc web.
Es poden fer passos, però pot ser que no sigui del 100%. Si seguim els estàndards descrits en aquest article des de la fase inicial del desenvolupament, podem crear fàcilment un lloc web accessible per a la majoria dels usuaris.
No dubteu a suggerir més eines de prova d’accessibilitat i consells en els comentaris següents.
PREV Tutorial | PRIMER Tutorial
Lectura recomanada
- Tutorial WAT (Barra d’eines d’accessibilitat web) per a proves d’accessibilitat
- Tutorial de proves d'accessibilitat (una guia completa pas a pas)
- Tutorials Eclipse en profunditat per a principiants
- Tutorial Geb: proves d'automatització del navegador mitjançant l'eina Geb
- Les millors eines de prova de programari 2021 (Eines d'automatització de proves de control de qualitat)
- Top 20 d'eines de proves d'accessibilitat per a aplicacions web
- Tutorial de proves destructives i proves no destructives
- Proves funcionals contra proves no funcionals