wat tutorial
Tutorial de la barra d'eines WAT o d'accessibilitat web per a proves d'accessibilitat:
Eines de proves d'accessibilitat es van explicar detalladament en el nostre anterior tutorial a Sèries de proves d’accessibilitat .
WAT (barra d'eines d'accessibilitat web) - és una barra d'eines per a Navegador Internet Explorer i altres navegadors - Pot ajudar a avaluar la conformitat d'una pàgina web amb les pautes d'accessibilitat al contingut web versió 2 (WCAG 2.0).
Com s'utilitza l'eina WAT?
Si us plau descarregueu-lo i instal·leu-lo des d’aquí .
Després d’instal·lar-la amb èxit, veureu una eina d’accessibilitat web addicional just a sota de la barra d’adreces.
Aprendrem això amb l'ajuda del lloc web EAsports: http://www.easports.com.
# 1) Títol de la pàgina - Podem verificar la barra de títol de la pàgina a la barra de títol de la finestra o a la barra de títol de la pestanya dels navegadors. Si passeu el ratolí per sobre de la pestanya, obtindreu la informació del títol de la pàgina.
Introduïu l'URL http://www.easports.com i verifiqueu el títol de la pàgina a la barra de títol de la pestanya passant el ratolí per sobre.
# 2) Color - El color del lloc web hauria de passar a Color Contrast Analyzer.
Hi ha 3 nivells de conformitat diferents per determinar la proporció de color, és a dir, els nivells A, AA i AAA.
Ha d’obtenir una passada en AA o AAA .
'A' representa un baix nivell d'accessibilitat, 'AA' representa un nivell mitjà d'accessibilitat i 'AAA' representa el nivell més alt d'accessibilitat.
Introduïu l'URL http://www.easports.com i A la barra d'eines, feu clic a la pestanya Color i seleccioneu Analitzador de contrast i verifiqueu-ho.
# 3) Encapçalaments - Els encapçalaments proporcionen una visió general eficaç del contingut de la pàgina. Totes les pàgines haurien de començar amb els encapçalaments H1 o H2. El text del títol ha de ser més gran, en negreta i estar marcat a les pàgines web. I la pàgina hauria de començar per 'h1' i a cada pàgina hi hauria d'haver almenys un encapçalament.
Per verificar l'estructura de l'encapçalament, feu clic a http://www.easports.com i seleccioneu la pestanya Estructura i feu clic a l'estructura de capçalera i verifiqueu-la. Us proporcionarà tots els detalls del títol de l’encapçalament. També examinarà si els encapçalaments estan niats correctament o no.
# 4) Text alternatiu per a imatges - L'atribut alt és compatible amb tots els navegadors principals. Totes les imatges haurien de tenir associat text alternatiu. Mostra el valor de l'atribut alt com a descripció quan passem el cursor per sobre de la imatge. Això proporciona informació alternativa sobre una imatge si la imatge no es pot mostrar.
Introduïu l'URL http://www.easports.com, feu clic a Mostra imatges i verifiqueu si hi ha text alternatiu disponible per a les imatges.
Veureu a continuació una finestra emergent:
Obtindreu els detalls esmentats anteriorment.
# 5) Ordre de tabulació - L'ordre de seqüència de pestanyes s'ha de mostrar de forma lògica i correcta. Podeu anar als diferents enllaços fent clic a la tecla de tabulació. Després de seleccionar l'indicador d'ordre de tabulació, podeu veure el recompte de números a prop dels enllaços, que mostra quantes vegades heu de fer clic a la tecla de tabulació per accedir a aquest enllaç concret.
Per verificar l'ordre de pestanyes, feu clic a l'URL http://www.easports.com i feu clic a Estructura i seleccioneu l'indicador d'ordre de tabulació.
# 6) Llistes - La llista s'ha de mostrar en l'estructura adequada. Les llistes sempre s’han de comprovar per assegurar-se que els elements de la llista estiguin realment inclosos en una llista. La llista pot ser de dues formes: ordenat llista i sense ordenar llista . Les llistes no ordenades utilitzen el fitxer l'element i les llistes ordenades utilitzen el fitxer
element.
Introduïu l'URL http://www.easports.com i A la barra d'eines, feu clic a l'estructura i seleccioneu Elements de llista i verifiqueu l'ordre de la llista.
Exemple de llista no ordenada:
Exemple de llista ordenada:
# 7) Contrast relació - Ha de tenir un contrast mínim per defecte. Els navegadors web haurien de permetre a la gent canviar el color del text i del fons, si cal.
Introduïu l'URL de Google https://www.google.co.in/ i feu clic a les imatges i seleccioneu Juicy Studio Luminosity Analyzer.
S'obrirà una nova finestra amb el titulat Analitzador de contrast de color amb la taula de resultats. L’última columna és la relació de contrast de lluminositat.
Preguntes i respostes per a entrevistes de desenvolupadors de Java per a estudiants de primer any
# 8) Etiquetes - Les etiquetes s’han de mostrar correctament.
Introduïu l'URL https://www.google.co.in/ i a la barra d'eines feu clic a Estructura i seleccioneu el conjunt de camps / etiquetes com a opció. Veureu el conjunt de camps i els detalls de l’etiqueta.
# 9) Bàsica Estructura Comprovar - En aquesta comprovació verificem pàgines web sense imatges, estils i disseny.
A la barra d'eines, feu clic a Imatges i, a continuació, Suprimeix imatges.
Ara seleccioneu CSS i feu clic a Desactiva CSS.
Finalment, feu clic a Taules i seleccioneu Linearitzar.
Temps per practicar:
Ara ens oferim una mostra de tasca de prova d’accessibilitat, per descomptat, es proporciona la solució. Però us recomanem que proveu això mateix abans d’anar a la resposta.
Verifiqueu els encapçalaments, les imatges amb text alternatiu, l’indicador d’ordre de tabulació i el contrast de color a http://www.cbssports.com
Solució: Feu clic a l'URL http://www.cbssports.com a Internet Explorer.
Per verificar els encapçalaments, feu clic a Estructura i seleccioneu Estructura de capçalera per verificar l’encapçalament.
Els encapçalaments no es troben a H1. Tots els titulars es mostren a H2.
Per verificar el text alternatiu, feu clic a Imatges i seleccioneu Mostra imatges per verificar si hi ha text alternatiu a les imatges o no.
Trobareu poques imatges amb text alternatiu i poques sense atribut alt. Els detalls de la imatge sense text alternatiu es mostren a la finestra emergent i els detalls de les imatges amb text alternatiu es mostren a prop de les imatges.
Per exempletext alt = 'Cerca a CBS Sports.com' que apareix a prop de la icona de cerca i text alt = 'CBSSports.com' que apareix a prop del logotip de Fantasy.
Per verificar l’indicador d’ordre de tabulació, feu clic a Estructura i seleccioneu Indicador d’ordre de tabulació .
El recompte es mostrarà a prop dels enllaços, que mostra en quin intent podreu fer clic en aquest enllaç en particular. Per exemple, per fer clic a la majoria de l'enllaç NFL, haureu de prémer el botó de tabulació des del teclat 13 vegades.
Ara l'últim per verificar el contrast de color, feu clic a color i seleccioneu Analitzador de contrast.
El text passa amb el doble A, és a dir, AA.
Allà, aquesta és la manera d’avaluar l’accessibilitat del lloc web.
Lectura recomanada
- Tutorial de l'eina de proves d'accessibilitat WAVE
- Tutorials Eclipse en profunditat per a principiants
- Tutorial de proves d'accessibilitat (una guia completa pas a pas)
- Top 20 d'eines de proves d'accessibilitat per a aplicacions web
- Les millors eines de prova de programari 2021 (Eines d'automatització de proves de control de qualitat)
- Tutorial de proves destructives i proves no destructives
- Proves funcionals contra proves no funcionals
- Tutorial de proves SOA: metodologia de proves per a un model d’arquitectura SOA