ESCUELA POLITÉCNICA NACIONAL

FACULTAD DE INGENIERÍA DE SISTEMAS

INGENIERÍA DE SISTEMAS INFORMÁTICOS Y DE COMPUTACIÓN

Laboratorio de: Calidad de Software

Práctica No.: 3

Tema: Pruebas de Accesibilidad Web

con la Herramienta AChecker
1. Objetivos:

1.1. Objetivo General

 Analizar las características de accesibilidad de páginas web mediante el
uso de la herramienta AChecker.

1.2. Objetivos Específicos

 Conocer el funcionamiento de la herramienta AChecker mediante la
realización de pruebas de accesibilidad de páginas web.

 Obtener resultados de las pruebas de accesibilidad de páginas web en base

a métricas propias de AChecker.

 Analizar los problemas obtenidos después de realizar las pruebas de

accesibilidad de una página determinada.

2. Marco teórico:

¿Qué es la Accesibilidad Web?

La accesibilidad Web significa que personas con algún tipo de discapacidad van a poder
hacer uso de la Web. En concreto, al hablar de accesibilidad Web se está haciendo
referencia a un diseño Web que va a permitir que estas personas puedan percibir,
entender, navegar e interactuar con la Web, aportando a su vez contenidos. La
accesibilidad Web también beneficia a otras personas, incluyendo personas de edad
avanzada que han visto mermadas sus habilidades a consecuencia de la edad.

Existen millones de personas con discapacidad que no pueden utilizar la Web.

Actualmente, la mayoría de los sitios Web y los software Web presentan barreras de
accesibilidad, lo que dificulta o imposibilita la utilización de la Web para muchas personas
con discapacidad. Cuanto más software y sitios Web accesibles estén disponibles, más
personas con discapacidad podrán utilizar la Web y contribuir de forma más eficiente. [1]

Página 1 de 19
¿Por qué la Accesibilidad Web es importante?

La Web es un recurso muy importante para diferentes aspectos de la vida: educación,

empleo, gobierno, comercio, sanidad, entretenimiento y muchos otros. Es muy importante
que la Web sea accesible para así proporcionar un acceso equitativo e igualdad de
oportunidades a las personas con discapacidad. Una página Web accesible puede ayudar a
personas con discapacidad a que participen más activamente en la sociedad.

La Web ofrece a aquellas personas con discapacidad una oportunidad de acceder a la

información y de interactuar. [1]

1. Pautas de Accesibilidad de Contenido Web (WCAG) 2.0

Las Pautas de Accesibilidad de Contenido Web 2.0 cubren un amplio espectro de
recomendaciones para hacer el contenido web más accesible. Seguir estas pautas hará el
contenido accesible para el mayor rango de personas con discapacidades, las que incluyen
ceguera o visión deficiente, sordera y pérdida de audición, deficiencias de aprendizaje,
limitaciones cognitivas, movilidad reducida, deficiencias del lenguaje, fotosensitividad y
las combinaciones de todas estas. Seguir estas pautas además puede hacer que el
contenido web sea más usable para los usuarios en general. [2]

Niveles de guía de las Pautas 2.0

Principios: En el nivel más alto se sitúan los cuatro principios que proporcionan los
fundamentos de la accesibilidad web: perceptibilidad, operabilidad, comprensibilidad y
robustez. [2]

Pautas: Por debajo de los principios están las pautas. Las doce pautas proporcionan los
objetivos básicos que los autores deben lograr con el objetivo de crear un contenido más
accesible para los usuarios con discapacidades. Estas pautas no son verificables, pero
proporcionan el marco y los objetivos generales que ayudan a los autores a comprender
los criterios de éxito y a lograr una mejor implementación de las técnicas. [2]

Criterios de éxito: Para cada pauta se proporcionan los criterios de éxito verificables que
permiten emplear las Pautas 2.0 en aquellas situaciones en las que existan requisitos y
necesidad de comprobación de conformidad de cara a la especificación de un diseño,
compra, regulación o acuerdo contractual. Con el fin de cumplir con los requisitos de los
diferentes grupos y situaciones, se definen tres niveles de conformidad: A (el más bajo),
AA y AAA (el más alto). [2]

Técnicas suficientes y aconsejables: Las técnicas son informativas y se agrupan en dos

categorías: aquellas que son suficientes para cumplir con los criterios de éxito, y aquellas
que son aconsejables y que van más allá de los requisitos de cada criterio de éxito
individual y que permite a los autores cumplir mejor con las pautas. Algunas de las
técnicas aconsejables tratan sobre barreras de accesibilidad que no han sido cubiertas por
los criterios de éxito verificables. Donde se conocen los errores comunes, estos también
han sido documentados. Véase también Comprender las técnicas suficientes y
aconsejables de las Pautas 2.0. [2]

Pautas 2.0

Página 2 de 19
 ESCUELA POLITÉCNICA NACIONAL
FACULTAD DE INGENIERÍA DE SISTEMAS
INGENIERÍA DE SISTEMAS INFORMÁTICOS Y DE COMPUTACIÓN

Principio 1: Perceptibilidad – La información y los componentes de la interfaz de

usuario deben presentarse a los usuarios de la manera en que puedan percibirlos. [2]

 Pauta 1.1 Alternativas textuales: Proporcione alternativas textuales para todo

contenido no textual, de manera que pueda modificarse para ajustarse a las
necesidades de las personas, como por ejemplo en una letra mayor, braille, voz,
símbolos o un lenguaje más simple.
 Pauta 1.2 Contenido multimedia dependiente del tiempo: Proporcione
alternativas sincronizadas para contenidos multimedia sincronizados
dependientes del tiempo.
 Pauta 1.3 Adaptabilidad: Cree contenidos que puedan presentarse de diversas
maneras (como por ejemplo una composición más simple) sin perder la
información ni su estructura.
 Pauta 1.4 Distinguible: Haga más fácil para los usuarios ver y oír el contenido,
incluyendo la separación entre primer plano y fondo.
Principio 2: Operabilidad - Los componentes de la interfaz de usuario y la navegación
deben ser operables. [2]

 Pauta 2.1 Accesible a través del teclado: Haga que toda funcionalidad esté
disponible a través del teclado.
 Pauta 2.2 Tiempo suficiente: Proporcione a los usuarios el tiempo suficiente
para leer y usar un contenido.
 Pauta 2.3 Ataques: No diseñe un contenido de manera que se sepa que puede
causar ataques.
 Pauta 2.4 Navegable: Proporcione medios que sirvan de ayuda a los usuarios a la
hora de navegar, localizar contenido y determinar dónde se encuentran.

Principio 3: Comprensibilidad - La información y el manejo de la interfaz de usuario

deben ser comprensibles. [2]

 Pauta 3.1 Legible: Haga el contenido textual legible y comprensible.

 Pauta 3.2 Predecible: Cree páginas web cuya apariencia y operabilidad sean
predecibles.
 Pauta 3.3 Ayuda a la entrada de datos: Ayude a los usuarios a evitar y corregir
errores.

Principio 4: Robustez - El contenido debe ser lo suficientemente robusto como para

confiarse en su interpretación por parte de una amplia variedad de agentes de usuario,
incluidas las tecnologías asistivas. [2]

Página 3 de 19
  Pauta 4.1 Compatible: Maximice la compatibilidad con agentes de usuario
actuales y futuros, incluyendo tecnologías asistivas.

Herramienta de Accesibilidad Web AChecker:

AChecker es una herramienta desarrollada por ATRC (Adaptive Technology Resource Centre),
que permite evaluar el contenido de una página Web conforme a diversos estándares de
accesibilidad, entre ellos se encuentran las Pautas de Accesibilidad al Contenido Web (WCAG
1.0 y 2.0) del WAI-W3C [3].

Figura 1 Achecker [4]

AChecker se utiliza para evaluar el contenido HTML en busca de problemas de

accesibilidad ingresando la ubicación de una página web, cargando un archivo html o
pegando el código fuente HTML completo de una página web. Achecker produce un
informe de accesibilidad para las pautas seleccionadas en el que identifica 3 tipos de
problemas:

 Problemas conocidos: estos son problemas que se han identificado con certeza
como barreras de accesibilidad. Debe modificar su página para solucionar estos
problemas. [4]

Página 4 de 19
 ESCUELA POLITÉCNICA NACIONAL
FACULTAD DE INGENIERÍA DE SISTEMAS
INGENIERÍA DE SISTEMAS INFORMÁTICOS Y DE COMPUTACIÓN

 Problemas probables: estos son problemas que se han identificado como

barreras probables, pero requieren que un ser humano tome una decisión. Es
probable que necesite modificar su página para solucionar estos problemas. [4]

 Problemas potenciales: estos son problemas que AChecker no puede identificar y

que requieren una decisión humana. Es posible que tenga que modificar su página
para estos problemas, pero en muchos casos solo tendrá que confirmar que el
problema descrito no está presente. [4]

No es necesario registrarse en Achecker pero el registrarse permite obtener ciertos

beneficios al iniciar sesión, los cuales son acceso para crear, editar y usar pautas de
validación personalizadas, además de guardar los resultados de las evaluaciones de
accesibilidad completadas.

Requisitos

 Versión de escritorio

PHP 7+

MySQL 4.1.13+

Composer

 Versión web
Conexión a internet

Opciones de Achecker

 Habilitar validador de HTML

Cuando esta opción está activada, AChecker envía el contenido HTML al Servicio de
Validación de Marca W3C (http://validator.w3.org/) que identifica los errores de marca
HTML y muestra los resultados de la validación en la sección "Resultados de Validación de
Marca HTML". [4]

 Habilitar el validador de CSS

Cuando esta opción esté habilitada, AChecker enviará el contenido HTML, junto con sus
estilos en línea, los estilos definidos en el área de encabezado del HTML y las hojas de
estilo externas vinculadas, al Validador de CSS de Jigsaw del W3C (http: //jigsaw.w3. org /
css-validator /), que identificará cualquier error en el CSS y mostrará los resultados en la
pestaña Validación de CSS de la Revisión de Accesibilidad. [4]

 Mostrar fuente

Página 5 de 19
Imprime el HTML de la página que se está revisando y vincula los errores de accesibilidad
enumerados directamente a las líneas donde ocurren. [4]

 Pautas para verificar

Se puede activar\desactivar las casillas de verificación para seleccionar las pautas de
accesibilidad con las que AChecker validará, las cuales son [5]:

BITV 1.0 (Level 2) Section 508 Stanca Act

WCAG 1.0 (Level A) WCAG 1.0 (Level AA) WCAG 1.0 (Level AAA)

WCAG 2.0 (Level A) WCAG 2.0 (Level AA) WCAG 2.0 (Level AAA) [4]

 Ver por Guía:

Presente el informe con todos los errores agrupados según los criterios de éxito de la guía.
[4]

 Ver por número de línea:

Presente el informe con una lista de todos los errores que se producen en el HTML que se
está evaluando, línea por línea. [4]

Ventajas

 Fácil de usar
 Permite crear pautas personalizadas
 Cuenta con una API
 Cuenta con 2 versiones escritorio y web
Limitaciones

• La versión de escritorio necesita software adicional para funcionar [6].

3. Desarrollo de la práctica:

3.1. CONFIGURACIÓN DEL AMBIENTE DE PRUEBAS

Nombre y Versión Características

1 Página Web de AChecker Página Web para pruebas de
https://achecker.ca/checker/index.php accesibilidad web.
2 Navegador web Se requiere tener una conexión a
Internet.
3 Página web de prueba Página web de prueba para realizar
https://saew.epn.edu.ec//login.aspx la prueba de accesibilidad.

3.2. ESQUEMAS DE FUNCIONAMIENTO DE LA HERRAMIENTA

A continuación, se muestra un esquema de funcionamiento de la herramienta AChecker.

Página 6 de 19
 ESCUELA POLITÉCNICA NACIONAL
FACULTAD DE INGENIERÍA DE SISTEMAS
INGENIERÍA DE SISTEMAS INFORMÁTICOS Y DE COMPUTACIÓN

3.3. PROCEDIMIENTO CON CAPTURAS DE PANTALLAS

La herramienta AChecker permite realizar pruebas de accesibilidad de páginas web
mediante su URL, archivo o código HTML. Para ver el funcionamiento de la herramienta en
la realización de pruebas de accesibilidad se siguieron los pasos mostrados a continuación:

Paso 1: Abrir la página web de AChecker.

Como primer paso, se debe ingresar a la página web
https://achecker.ca/checker/index.php como se muestra en la figura 1.

Página 7 de 19
 Figura 1.

Paso 2: Elegir una página web para realizar las pruebas de accesibilidad.
Una vez que se ha ingresado a la página web de AChecker, se debe seleccionar la página
web para las realizar las pruebas de accesibilidad. Para esto es necesario tener la URL de la
página, su archivo o código HTML. En esta práctica se ha seleccionado la página web
https://saew.epn.edu.ec//login.aspx de la cual se van a analizar los problemas encontrados
después de ejecutar la herramienta AChecker.

Figura 2.
Paso 3: Ejecutar AChecker.
Para realizar las pruebas de accesibilidad, se ingresa la dirección URL de la página a
probar en el campo Address de AChecker.

Página 8 de 19
 ESCUELA POLITÉCNICA NACIONAL
FACULTAD DE INGENIERÍA DE SISTEMAS
INGENIERÍA DE SISTEMAS INFORMÁTICOS Y DE COMPUTACIÓN

Figura 3.
En el caso de que se quiera cargar un archivo HTML en lugar de ingresar la dirección URL
de la página a probar se debe seleccionar la pestaña HTML File Upload como se muestra en
la figura 4.

Figura 4.

Página 9 de 19
A continuación, escoger el archivo HTML que se quiere probar presionando el botón
Choose File (Figura 5 y 6).

Figura 5.

Figura 6.
En la figura 7 se muestra el archivo HTML cargado.

Página 10 de 19
 ESCUELA POLITÉCNICA NACIONAL
FACULTAD DE INGENIERÍA DE SISTEMAS
INGENIERÍA DE SISTEMAS INFORMÁTICOS Y DE COMPUTACIÓN

Figura 7.

De la misma manera si se quiere copiar el código HTML, se debe seleccionar la pestaña

Paste HTML Markup y pegar el código como se muestra en la figura 8.

Figura 8.
Finalmente, una vez cargada la página web que se quiere probar se presiona el botón
Check it (Figura 9).

Página 11 de 19
 Figura 9.

Paso 4: Revisar la sección Accesibility Review.

En la figura 10 se muestran los resultados de la prueba de accesibilidad web ejecutando la
herramienta AChecker. Se muestra una revisión de los problemas de accesibilidad web
que tiene la página según las guiad WCAG 2.0 (Nivel AA). Además, se muestra también una
solucion alternativa a estos problemas de accesibilidad web.

Página 12 de 19
 ESCUELA POLITÉCNICA NACIONAL
FACULTAD DE INGENIERÍA DE SISTEMAS
INGENIERÍA DE SISTEMAS INFORMÁTICOS Y DE COMPUTACIÓN

Página 13 de 19
 Figura 10.
En el panel de revisión de accesibilidad de AChecker se explica cada pauta que la página
web no está cumpliendo como se puede ver en la figura 11. Además, se proporciona las
líneas de código que están afectando la accesibilidad web de la página y se muestra la
razón y la solución a este problema.

´
Figura 11.

Por ejemplo, en la figura 11, se puede ver el problema con la pauta 1.1 que se refiere a
alternativas de texto, es decir, la página web debe proporcionar alternativas de texto para
el contenido solo multimedia que no contiene texto. En este caso se sugiere agregar la
propiedad alt en los tag image del código fuente HTML, para esto se indica el número de
línea y columna en donde se debe aplicar la solución.

3.4. CÓDIGOS FUENTE Y ARCHIVOS

Página 14 de 19
 ESCUELA POLITÉCNICA NACIONAL
FACULTAD DE INGENIERÍA DE SISTEMAS
INGENIERÍA DE SISTEMAS INFORMÁTICOS Y DE COMPUTACIÓN

Código HTML de página de login de Invoice Plane:

<!doctype html>

<!--[if lt IE 7]>
<html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>
<html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>
<html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->

<head>
<title>
InvoicePlane Demo (1.5.0) </title>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta name="robots" content="NOINDEX,NOFOLLOW">

<link rel="icon" type="image/png"

href="https://demo.invoiceplane.com/assets/core/img/xfavicon.png.pagespeed.ic.CBivg
ELTXt.png">

<link
href="https://demo.invoiceplane.com/assets/A.invoiceplane,,_css,,_style.css+core,,_
Página 15 de 19
css,,_custom.css,Mcc.43Zj1-9J6U.css.pagespeed.cf.qHkFhzVyCY.css" rel="stylesheet"/>

</head>
 <input type="hidden" name="_ip_csrf"
value="6e1f9f88779e9bec2d717343549f71cc">

<div class="form-group">
<label class="control-label">Email</label>
<input type="email" name="email" id="email" class="form-control"
placeholder="Email" required autofocus value="demo@invoiceplane.com">
</div>

<div class="form-group">
<label for="password" class="control-label">Password</label>
<input type="password" name="password" id="password" class="form-
control" placeholder="Password" required value="demopassword">
</div>

<input type="hidden" name="btn_login" value="true">

<button type="submit" class="btn btn-primary">

<i class="fa fa-unlock fa-margin"></i> Login </button>
<a
href="https://demo.invoiceplane.com/index.php/sessions/passwordreset" class="btn
btn-default hidden">
I forgot my password </a>

</form>

<br>

<div class="alert alert-info no-margin">

This demo instance will be reset every 2 hours.
</div>

</div>

</div>

</body>
</html> Página 16 de 19
 ESCUELA POLITÉCNICA NACIONAL
FACULTAD DE INGENIERÍA DE SISTEMAS
INGENIERÍA DE SISTEMAS INFORMÁTICOS Y DE COMPUTACIÓN

3.5. RESOLUCIÓN DE PREGUNTAS Y PROBLEMAS

Preguntas:
1. En sus propias palabras, defina accesibilidad web.
2. ¿Cuáles son los 4 principios fundamentales de la guía WCAG 2.0.?
3. ¿Cuáles son los niveles de conformidad de la accesibilidad web?

Problemas:
1. Realice la prueba de accesibilidad de la página web de inicio de sesión de invoice
plane. (El código html para ejecutar se encuentra en la sección 3.4)
2. Realice los cambios necesarios para que la página web sea más accesible para el
usuario según las recomendaciones de AChecker.
3. Describa los resultados obtenidos.

4. Análisis de resultados:
AChecker es una herramienta en línea que permite evaluar el contenido HTML con el
fin de buscar problemas de accesibilidad ingresando la ubicación de una página web,
subiendo un archivo html o escribiendo directamente el código fuente HTML de una
página web.

Al realizar el análisis la herramienta da la posibilidad de exportar los resultados (Ver

Figura 11) en un archivo PDF. Estos resultados obtenidos nos detallan los los
problemas conocidos, problemas probables, problemas potenciales y la validación de
HTML y CSS. Se detallan estos problemas por los errores agrupados por criterios de
éxito que seleccionamos (En este caso WCAG 2.0 (Nivel AA)).

Entre los resultados obtenidos se encuentran 9 problemas conocidos y 53 problemas

potenciales, esto hace referencia a 9 líneas de código que no pudieron cumplir con un
criterio de WCAG 2.0 (Nivel AA) y 53 líneas de código que potencialmente tengan un
error, pero será necesario analizar cada uno.
Los 9 problemas encontrados se detallan en 4 grupos los cuales son: Alternativas de
texto, Adaptabilidad, Distinguibles y Legibilidad. En cuanto a las Alternativas de texto,
se detalla que se debe añadir un atributo alterno al elemento de imagen, esto nos dice
que el código, el cual hace referencia a una imagen le falta el atributo de imagen, por
lo que no puede cumplir con el criterio de éxito.
El problema de Adaptabilidad nos informa que existe un elemento seleccionado que
no tiene asociado una etiqueta. Se puede arreglar este problema añadiendo una
etiqueta al elemento, sea utilizando el id, un título asociado con el elemento input,
entre otros.

Página 17 de 19
 Los problemas distinguibles son aquellos que no cumplen con el objetivo de que sea
más fácil para los usuarios ver y escuchar el contenido. En este caso tenemos que el
contraste entre el color del texto y su fondo para el elemento no cumple con los
niveles de WCAG2.0. Por lo que la herramienta nos indica que es necesario utilizar un
evaluador de contraste con el fin de determinar si el texto y los colores de fondo
proporcionan una relación de contraste de 4.5:1 para texto estándar, o 3:1 para texto
grande. A su vez, incluye un link a la página web de W3 que nos permite entender este
problema de una mejor manera. También nos indica que es necesario reemplazar los
elementos que utilicen negrilla con elementos de tipo strong o em, al igual que es
necesario eliminar el uso de fuentes (tipo de letra).
Por último, tenemos los problemas de Legibilidad, estos problemas hacen que el
contenido de nuestra página no sea legible y comprensible. En nuestro caso, detalla el
problema del lenguaje en la cual no se identifica el lenguaje en el documento por lo
que utiliza un código de lenguaje inválido y que es necesario validar el lenguaje de
código según se define en la ISO 639.
En base a los resultados obtenidos, podemos decir que la página implementada tiene
pocas fallas reales en su codificación, pero que será necesario realizar un análisis a
más profundidad con el fin de entender los 53 problemas potenciales.

5. Conclusiones y recomendaciones:

 La accesibilidad de un sitio web puede ser determinada por la cantidad de usuarios

que pueden acceder a este, inclusive si estos fueren personas con capacidades
especiales.
 Herramientas como AChecker muestran alternativas de solución a problemas de
accesibilidad, sin embargo, es decisión del encargado del proyecto web utilizar
estas alternativas pues puede verse comprometido otro aspecto como seguridad,
rendimiento, entre otros.
 Es preferible utilizar archivos HTML antes que URLs al momento realizar pruebas
de accesibilidad en AChecker, puesto que el Midleware de esta herramienta evita
realizar peticiones a otros servidores, aumentando así el tiempo de respuesta de
esta.
 La implementación de sitios web accesibles se encuentra relacionado directamente
con la presentación y diseño del sitio, es decir con el front-end.
 La herramienta AChecker solo propone soluciones a nivel de código HTML, mas no
profundiza en problemas a nivel de código que no sea de etiquetado y maquetado.

6. Bibliografía:

[1 «W3C,» [En línea]. Available: https://www.w3c.es/Traducciones/es/WAI/intro/accessibility.

] [Último acceso: 29 Junio 2019].

[2 «CodexExempla,» [En línea]. Available:

] http://www.codexexempla.org/traducciones/pautas-accesibilidad-contenido-web-
2.0.htm#new-terms. [Último acceso: 29 Junio 2019].

[3 Junta de Andalucia, «Achecker y las pruebas de accesibilidad,» Junta de Andalucia, [En

] línea]. Available:
http://www.juntadeandalucia.es/servicios/madeja/contenido/recurso/394. [Último acceso:

Página 18 de 19
 ESCUELA POLITÉCNICA NACIONAL
FACULTAD DE INGENIERÍA DE SISTEMAS
INGENIERÍA DE SISTEMAS INFORMÁTICOS Y DE COMPUTACIÓN

30 Junio 2019].

[4 «ACheker,» [En línea]. Available:

] https://achecker.ca/documentation/index.php?p=checker/index.php. [Último acceso: 29
Junio 2019].

[5 Research Gate, «AChecker Open Interactive Customizable Web Accesibility Checking,»

] Research Gate, [En línea]. Available:
https://www.researchgate.net/publication/220933626_AChecker_open_interactive_custo
mizable_web_accessibility_checking. [Último acceso: 30 Junio 2019].

[6 Ryerson, «AChecker Web Accesibility Checker,» Pressbooks, [En línea]. Available:

] https://pressbooks.library.ryerson.ca/pwaa/chapter/achecker-web-accessibility-checker/.
[Último acceso: 2019 Junio 29].

Página 19 de 19