170 KB - Web Para Todos

WEB PARA TODOS
PAGINA AUDITADA: WWW.EJEMPLO.COM
METODOLOGÍA
La auditoría web realizada se basa en las pautas de accesibilidad al
contenido web 2.0 (Web Content Accessibility Guidelines, en inglés o WCAG
2.0) desarrolladas por el grupo “Iniciativa para una web accesible” (Web
Accessibility Initiative en inglés o WAI) y publicadas por la W3C como
recomendación oficial.
El compromiso asumido se resume en 3 puntos específicos:
 Se verifican manualmente los criterios de aceptación de las pautas.
25 Criterios para un Nivel de Accesibilidad A.
38 Criterios para un Nivel de Accesibilidad AA.
61 Criterios para un Nivel de Accesibilidad AAA.
 Se verificara mediante 3 lectores de pantalla la navegabilidad del
sitio.
 Se elabora un informe identificando los criterios que no se están
cumpliendo según el nivel, describiendo los motivos y posibles
soluciones.
[email protected]
http://webparatodos.com.ar
ANALISIS – NIVEL A
Pauta 1.1: Alternativas Textuales
Proporcionar alternativas textuales para todo el contenido no textual
de modo que se pueda convertir a otros formatos que las personas
necesiten, tales como textos ampliados, braille, voz, símbolos o en un
lenguaje más simple.
Criterio de Conformidad 1.1.1: Contenido no textual
Todo el contenido no textual que se presenta al usuario tiene una
alternativa textual que cumple el mismo propósito, excepto los siguientes casos:
 Controles o mecanismos para que el usuario introduzca datos: Tiene
un nombre que describe su propósito.
 Presentaciones multimedia con desarrollo temporal: Las alternativas
textuales proporcionan al menos una identificación descriptiva del
contenido no textual.
 Pruebas o ejecuciones que no serían validos si se presentara en forma
de texto: Las alternativas textuales proporcionan al menos una
identificación descriptiva del contenido no textual.
 Contenido cuyo objetivo principal es ofrecer una experiencia
sensorial específica: Las alternativas textuales proporcionan al menos
una identificación descriptiva del contenido no textual.
 CAPTCHA: Proporcionar alternativas textuales que identifican y
describen el propósito del contenido no textual y proporcionar
formas alternativas de verificación mediante distintos tipos de
percepciones sensoriales.
 Contenido decorativo, contenido utilizado para dar formato a la
página o que no se presenta a los usuarios: Implementar de manera
que pueda ser ignorado por los productos de apoyo.
DESCRIPCION:
El objetivo del criterio es asegurar el acceso a la información que
transmite una imagen (contenido no textual más habitual). Aunque es uno de
los requerimiento más conocidos relacionado con la accesibilidad, es fácil
encontrar textos alternativos inadecuados porque no se ha tenido en cuenta el
tipo de imagen, su función, el contexto en el que se inserta o porque se ha
perdido la objetividad.
[email protected]
http://webparatodos.com.ar
Algunos escenarios en los que los usuarios se benefician del texto
alternativo de las imágenes:
 Usuarios con conexiones lentas y navegadores con las imágenes
deshabilitadas.
 Usuarios con poca o nula visión que utilizan lectores de pantalla.
 Usuarios con deterioro cognitivo que utilizan lectores de pantalla.
 Usuarios que utilizan navegadores de solo texto.
 Usuario que prefieren no bajar las imágenes para mejorar la
velocidad.
 Páginas con problemas para cargar las imágenes o códigos con
errores.
PROBLEMAS
Para entender cuál es el texto alternativo correcto es importante entender
porque está la imagen en nuestra página web. Cuál es el propósito. Esto nos
hará pensar que es lo importante de la imagen.
Ilustración 1 - Añadir al Carro
En la página web de ejemplo.com podemos ver el mal uso del texto
alternativo. No es correcto el atributo alt del elemento imagen con el texto
“Añadir al carro” que se visualiza en la Ilustración 1 - “Anadir al carro”.
Basados en la documentación de la W3C, para una imagen mediante la
cual se va llevar a cabo una acción, el texto alternativo debería representar esta
acción. PayPal por defecto propone como texto alternativo una especie de
eslogan que es el que se está utilizando actualmente:
<input type="image"
src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif"
border="0" name="submit" alt=" PayPal – La manera más fácil y segura de
pagar en internet!">
[email protected]
http://webparatodos.com.ar
Si bien el enlace funciona correctamente y se puede completar la compra,
un usuario que ingresa con lector de pantalla puede interpretar esto como una
marca o un anuncio.
Consejo: Revise las herramientas propuestas por terceros antes
de utilizarlas!.
SOLUCIÓN:
Modifique el texto alternativo (el atributo alt de la imagen) por uno que
represente la accion que el usuario llevaria a cabo al presionar sobre el enlase.
El Por ejemplo el codigo deberia quedar asi:
<input type="image"
src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif"
border="0" name="submit" alt="Anadir al Carro los botines">
La página cuanta con un solo botín como producto, en el caso de no
continuar así, se debe reemplazar el atributo por algo más específico que logro
detallar al usuario de que botín se trata.
Cuidado: Todos los textos alternativos deberán ser diferentes, ya
que cada botón agregaría a la compra final un producto
diferente.
Solicite un informe completo
http://www.webparatodos.com.ar
[email protected]
http://webparatodos.com.ar