ESCUELA POLITÉCNICA NACIONAL

FACULTAD DE INGENIERÍA DE SISTEMAS

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

Laboratorio de: SIC 734 Calidad de Software

Práctica No.: 2

Tema: AChecker

Nombre: Alex Ulloa

Fecha: 20/01/2018

1. Objetivos

1.1. Objetivo General

Conocer el funcionamiento de la herramienta AChecker para evaluar el

contenido de una página web conforme al estandar WCAG 2.0 sobre
accesibilidad.

1.2. Objetivos Específicos

 Conocer la importancia del desarrollo de contenido web accesible de acuerdo a

las pautas descritas en el WCAG 2.0.

 Realizar el análisis de un sitio web con AChecker para determinar las

observaciones en cuanto a accesibilidad de acuerdo a las pautas descritas en el
WCAG 2.0.

 Corregir el código de una página web de acuerdo al análisis obtenido por

AChecker para cumplir con las pautas descritas en el WCAG 2.0. sobre
accesibilidad en el internet.

2. Marco teórico

Accesibilidad Web

La accesibilidad web se refiere a que sitios web, herramientas y tecnologías se

encuentran diseñadas y desarrolladas de tal manera que personas con discapacidad
puedan utilizarlas [ CITATION W3C181 \l 12298 ]. Berners-Lee, director de W3C,
brinda una descripción sobre el contexto de la accesibilidad en la web: “El poder de la

Página 1 de 21
Web se encuentra en su universalidad. El acceso de todos, independientemente de la
discapacidad, es un aspecto esencial.” [ CITATION ACh19 \l 12298 ]

La accesibilidad web apoya la inclusión social para personas con discapacidad, personas
de avanzada edad, en zonas rurales y en países en vías de desarrollo. Además, es
importante destacar la relevancia de la accesibilidad web como caso de negocio para las
organizaciones. La accesibilidad se complementa con otras buenas prácticas como
diseño web móvil, independencia de dispositivos, interacción multi-modal, usabilidad y
diseño para personas de avanzada edad. Distintos casos de estudio muestran que sitios
web accesibles obtienen mejores resultados de búsquedas, costos de mantenimiento
reducido y aumento de alcance a audiencia.[ CITATION W3C181 \l 12298 ]

WCAG

La iniciativa de accesibilidad web (WAI) de la W3C desarrolla especificaciones

tecnicas, guias, tecnicas y recursos de apoyo que describen las soluciones de
accesibilidad. Estos son considerados estandares internacionales para la accesibilidad
web; por ejemplo, el WCAG 2.0 es también un estandar ISO: ISO/IEC 40500.
[ CITATION ACh19 \l 12298 ]

La primera edición de las pautas fue publicada en 1999. En diciembre del 2008 las
WACG 2.0 fueron aprobadas como recomendación oficial. [ CITATION ACh19 \l
12298 ]

Figura 1. Principios y Criterios de WCAG 2.0. [ CITATION Sut15 \l 3082 ]

AChecker

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

AChecker se utiliza para evaluar 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 clasifica los problemas de accesibilidad para sus directrices (Guidelines) en 3

tipos de problemas:

 Problemas conocidos:

Estos son problemas que se han identificado con certeza como barreras de
accesibilidad. Debes modificar tu página para solucionar estos problemas.

 Problemas probables:

Son problemas que se han identificado como barreras probables, pero requieren
de una persona para tomar una decisión acerca del problema. Es probable que
necesite modificar su página para solucionar estos problemas.

 Problemas potenciales:

Son problemas que AChecker no puede identificar y requieren una interpretació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.

Página 3 de 21
 Figura 2. Interfaz Gráfica de AChecker

Como se observa en la Figura 1, AChecker posee varias opciones para el análisis de

accesibilidad [2]:

Habilitar validador de HTML

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

Habilitar validador 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 del 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.

Mostrar fuente

Imprima el HTML de la página que se está revisando y vincule los errores de

accesibilidad enumerados directamente a las líneas donde ocurren.

Pautas para verificar

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

Active / desactive las casillas de verificación para seleccionar las pautas de

accesibilidad con las que AChecker valida.

Ver por pauta:

Valor predeterminado: Presente el informe con todos los errores agrupados según los
criterios de éxito de la guía.

Ver por número de línea:

Presente el informe enumerando todos los errores que ocurren en el HTML que se está
evaluando, línea por línea.

3. Desarrollo de la práctica

3.1. Configuración del Ambiente de Pruebas

Nombre y Versión Características

1 Windows 10 Home Sistema operativo de 64 bits

Edition.

2 Microsot Edge. Versión Navegador Web de 64 bits desarrollado por

2.17134.1.0 Microsoft.

3 Notepad ++ v. 7.6.2 Editor de código fuente bajo la licencia GPL

3.2. Esquemas de Funcionamiento de las Herramientas

Página 5 de 21
 Figura 3. Esquema de Funcionamiento de Achecker

3.3. Procedimiento de la Práctica

3.3.1. Creación de una cuenta en AChecker

En primer lugar, es necesario la creación de una cuenta en el sitio de AChecker

para poder obtener un certificado de accesibilidad por parte de la organización.
Para esto, se accede al sitio https://achecker.ca/ y se ingresa a la sección de registro
de la página que se encuentra en la parte superior izquierda.

Figura 4. Página de inicio de AChecker.

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

A continuación, en la pantalla de registro se procede con el proceso de registro

llenando la información de nombre de login, contraseña, dirección de correo
electrónico, nombre, apellido y verificación con captcha.

Figura 5. Pantalla de registro de AChecker.ca

Una vez realizado el registro es necesario la confirmación ingresando al correo

registrado y confirmando la creación de la cuenta.

Figura 6. Correo de confirmación.

Página 7 de 21
Una vez confirmada la cuenta en el correo ingresado, es posible iniciar sesión
con las credenciales correspondientes en la sección Login en la parte superior
izquierda del sitio de AChecker.

Figura 7. Ingreso a Achecker.ca con cuenta.

3.3.2. Utilización de la herramienta AChecker para verificar la

accesibilidad del sitio https://educacionvirtual.epn.edu.ec

En primer lugar, es necesario acceder al sitio de AChecker para realizar el

ingreso de la URL del sitio a analizar, en este caso es
https://educacionvirtual.epn.edu.ec

Figura 8. Ingreso de URL

Al dar click en el botón Options, es posible seleccionar los parámetros bajo los
cuales se requiera que AChecker realice el análisis, en este caso se selecciona

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

WCAG 2.0 (Level AA) y View by Guidelines para determinar los criterios de
conformidad que el sitio no ha logrado cumplir.

Figura 9. Parametrización del análisis

Finalmente, al dar click en Check It el sitio muestra los niveles de conformidad

del WCAG 2.0 no satisfechos y la línea donde se encuentra el criterio a corregir.

Figura 10. Resultados del análisis.

Página 9 de 21
AChecker permite visualizar por medio de la navegación entre las pestañas de
acuerdo con los tipos de problemas que se desee conocer. Además, es posible
generar un reporte en formato PDF con toda esta información contenida,
haciendo click en el botón Get File en la parte superior derecha.

Figura 11. Reporte devuelto por parte de AChecker.ca

3.3.3. Utilización de Achecker para la corrección en accesibilidad de un

archivo HTML

Abrimos el archivo index.html para observar su contenido

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

Figura 12. Vista del archivo html en el navegador

Copiamos y pegamos el contenido del archivo index.html en la página de

Achecker, Paste HTML Markup y presionamos Check It

Página 11 de 21
 Figura 13. Subida del código del archivo html en la página de AChecker

Observamos que hay 7 Known Problems en 3 categorías:

1. img element missing alt attribute.

Figura 14. Categoría de alternativas de texto en las imágenes

2. i (italic) element used.

Figura 15. Categoría de texto distinguible

3. Header nesting - header following h1 is incorrect.

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

Figura 16. Categoría de navegabilidad

El primer problema surge cuando no se escribe una descripción alternativa

en texto en las imágenes, para corregirlo escribimos las descripciones como
parámetros alt = “”.

Hacemos esto en las dos imágenes Internet.jpg y OA.png:

Figura 17. Corrección del problema de texto altenativo en la imagen de Internet.jpg

Figura 18. Corrección del problema de texto alternativo en la imagen de OA.png

El segundo problema surge por utilizar mal las etiquetas, la etiqueta <i></i>
sirve para escribir texto en, sin embargo, en el archivo se usa para etiquetar
íconos, para corregir esto usamos la etiqueta <span>.

No se recomienda usar cursivas en Web porque sirve para enfatizar, pero

dificulta la lectura y la etiqueta strong cumple el propósito sin dificultar la
lectura del texto

Corregimos esto en los 3 íconos que hay en el archivo:

Página 13 de 21
 Figura 19. Corrección del problema de texto distinguible en los íconos

El tercer problema surge por usar la categoría de Headers de manera

incorrecta que no cumple con las directrices de navegación del WCAG.

Para ello reemplazamos el header en el archivo de h3 a h2

Figura 20. Corrección del problema de navegación con los headers

Finalmente comprobamos que la página sigue funcionando normalmente con

los cambios y subimos el código corregido a la página de AChecker para
comprobar que se corrigieron los problemas.

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

Figura 21. Comprobación del estado de la página después de realizados los cambios

Figura 22. Comprobación de la corrección de los errores conocidos en la herramienta de AChecker.

3.4. Resolución de Preguntas y Problemas

Preguntas:

1. ¿Qué es el WCAG?

WCAG tiene sus iniciales de Web Content Accessibility Guidelines, es decir

se trata de pautas que se deben seguir para manejo de contenido web
accesible. Estas directrices, son publicadas por la Iniciativa de Accesibilidad
Web (WAI por sus siglas en inglés). Y son un conjunto de directrices que
especifican cómo hacer el contenido web más accesible, en especial para
personas con discapacidad, o para dispositivos con limitaciones.

2. Explique en sus propias palabras qué es accesibilidad

Es la facilidad que se tiene para utilizar una herramienta en concreto, en este

caso nos referimos a la accesibilidad web, lo que se puede resumir en la
capacidad de un sitio web de ser utilizado, accedido y navegado por personas
con discapacidad.

3. ¿Cuál es la diferencia entre problemas conocidos y problemas probables que

AChecker describe?

Página 15 de 21
 Cuando AChecker marca un sitio con un problema conocido, la herramienta
se encuentra segura de que este es un problema de accesibilidad y por lo
tanto debe ser cambiado por parte del desarrollador. Mientras que cuando se
tiene un problema probable, es necesario la intervención de una persona para
definir si el problema es en realidad o no una barrera de accesibilidad.

4. ¿De qué manera las herramientas como AChecker ayudan a mejorar la

accesibilidad en internet?

Al permitirnos utilizar las directrices directamente sobre el código que

hemos creado, se puede comprender en que lugares es necesario tener un
cambio, lo que hace más fácil a los desarrolladores mantener sitios que sean
accesibles. De esta manera, se maneja un Internet más accesible para todos
los usuarios del mismo.

Problemas:

1. De un archivo html comprobar los problemas de accesibilidad en Achecker,

explicar por qué surgen esos problemas, corregirlos y comprobar que no
existan más problemas conocidos con el archivo html en la página de
AChecker.

Al probar un código HTML básico, el cual se encuentra en los anexos, de un

proyecto de semestres pasados, tenemos los siguientes errores.

Por lo que se puede apreciar, se tienen 4 errores que deben ser solucionados.

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

El primero de ellos, es la falta de un texto alternativo para la imagen

mostrada, lo cual se soluciona de la siguiente manera:

A continuación, el segundo error muestra la falta de un título. Con la

siguiente solución:

El siguiente error, es la falta de un lenguaje en la página web, lo cual se

soluciona con un tag en la cabecera <HTML>:

Página 17 de 21
 Ahora, se procede a comprobar que los cambios sean correctos y ya no se
tengan más problemas que solucionar:

Como se puede ver, no se tiene ningún otro error que solucionar, por lo que
se puede decir que el sitio web ahora es compatible con las directrices
WCAG 2.0

2. Analizar una página que use frecuentemente en Achecker y proponga dos

correcciones para volverla más accesible.

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

En este caso, se ha utilizado la página web de un diario ecuatoriano, el

comercio. Al probar esta página, nos encontramos con varios problemas, 194
problemas conocidos, 48 problemas probables y 1404 problemas potenciales.

Al analizar estos problemas, podemos ver que los más comunes son la falta de
una etiqueta una alternativa en texto para contenido no textual, como imágenes.

De igual manera, otro error es la falta de contraste entre los colores de un link
seleccionado y su fondo. Y del mismo modo, se tiene este problema entre el
color del texto y el fondo.

Otro problema encontrado es la falta de facilidad en la navegación. Ya que no

es fácil para el usuario encontrar contenido, determinar en donde se encuentran
y navegar por el sitio web.

Para todos estos problemas, se recomienda comenzar por etiquetar cada imagen
del sitio web, ya que es el tipo de contenido no textual con más problemas
encontrados.

La segunda recomendación, es cambiar los colores del sitio para tener un

mayor contraste, ya que este es el segundo mayor problema de la página web.
En este caso, es necesario reformular el uso de los CSS.

4. Análisis de resultados

Al utilizar una herramienta como AChecker, la cual nos permite seleccionar con que
directrices queremos revisar una página web, es posible brindar alternativas para tener

Página 19 de 21
 sitios web más accesibles, lo que la vuelve una herramienta indispensable para los
desarrolladores web, y de gran utilidad para todos los usuarios de internet.

5. Conclusiones y recomendaciones

5.1. Conclusiones

1) Se ha utilizado de manera exitosa la herramienta AChecker para evaluar el

contenido de una página web según las directrices WCAG 2.0 sobre
accesibilidad

2) Se comprendió cual es la importancia del desarrollo de contenido accesible,

utilizando una directriz, en este caso la WCAG 2.0

3) Se ha realizado la corrección de código de páginas web en las cuales no se

seguía la WCAG 2.0, esto luego de revisar el informe presentado por la
herramienta AChecker.

5.2. Recomendaciones

1. Se recomienda comprender completamente a que se refieren las directrices de la

WCAG 2.0 antes de realizar cambios a las páginas web, en especial en base a los
problemas probables presentados por la herramienta AChecker.

2. Se recomienda comprobar que una vez realizados los cambios para tener mayor
accesibilidad, el sitio web no se vea reducido en funcionamiento.

3. Se recomienda consultar cuales son los cambios para la WCAG 3.0, para editar
el código en base a la misma.

Bibliografía

[1] W3C, «ACCESSIBILITY,» W3C, 2018. [En línea]. Available:

https://www.w3.org/standards/webdesign/accessibility. [Último acceso: 11 Enero 2019].

[2] AChecker.ca, «AChecker Handbook,» AChecker.ca, 2019. [En línea]. Available:

https://achecker.ca/documentation/index.php?p=0. [Último acceso: 10 Enero 2019].

[3] M. Sutton, «5 Things I’ve Learned From the Accessibility Community,» 2015. [En línea].
Available: http://slidedeck.io/marcysutton/5-things-i-learned-from-accessibility. [Último
acceso: 10 1 2019].

[4] W3C/WAI, «Introduction to Web Accessibility,» W3C, 24 Marzo 2018. [En línea].
Available: https://www.w3.org/WAI/fundamentals/accessibility-intro/. [Último acceso: 11
Enero 2019].

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

6. Anexos

6.1.1. Código HTML para la práctica de AChecker.

<html>
<head>
<title></title>
<link rel="stylesheet" href="estilos.css" type="text/css"></link>
<meta charset="UTF-8">
</head>
<body>
<header>
<h1>Juan Perez</h1>
</header>
<nav>
<ul>
<li><a href="inicio.html">Inicio</a></li>
<li><a href="perfil.html">Perfil</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
<section>
<img class="img" src="mishu.jpg"/>
<p class="parrafo">Hola!!! Soy estudiante de la Escuela Politecnica
Nacional, me gusta contar chistes y beber con mis amigos xD
Odio la materia de Calidad de Software pero no le cuenten a la
profe xDxDxD
</p>
</section>
<aside>
<h2>Links recomendados:</h1>
<ul>
<li><a href="https://jamesclear.com/best-books">Si te gusta
leer</a></li>
<li><a href="http://collider.com/best-movies-on-netflix-
streaming/">Si te gustan las peliculas</a></li>
<li><a href="http://www.touropia.com/best-places-to-visit-in-
ecuador/">Si te gusta viajar</a></li>
<li><a href="http://ultimateclassicrock.com/tags/top-100-classic-
rock-songs/">Si te gusta la musica</a></li>
</ul>
</aside>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html>

Página 21 de 21