Lista de chequeo

como herramienta
de verificación de la
usabilidad y la accesibilidad
 La lista de chequeo como herramienta de
verificación de la usabilidad y la accesibilidad

Contenidos Pág.
INTRODUCCION 2

MAPA CONCEPTUAL 3

1. ACCESIBILIDAD 4
1.1 Accesibilidad 5
1.1.1 Inclusión de personas en condición de discapacidad 5
1.1.2. Acceso mediante dispositivos móviles 5
1.1.3. Acceso mediante todos los navegadores 6

2. OPTIMIZACIÓN DE PESO 7
2.1 Carga de imágenes 7
2.2 Tamaño real de las imágenes en las galerías 7
2.3 HTML 7
2.4 Tablas 8
2.5 Carga de cascadas CSS 8
2.6 Conexión a base de datos 8

3. HERRAMIENTAS DE USO LIBRE PARA LA OPTIMIZACIÓN Y BÚSQUEDA DE ERRORES 9

3.1 Total Validator 9
3.2 Clean CSS 9
3.3 W3C CSS Validator 9
3.4 W3C Markup Validator 9
3.5 TAW3 10
3.6 WAVE 10
3.7 Browser Shots 10
3.8 Ready.mobi 10
3.9 Pingdom 10

GLOSARIO 11
BIBLIOGRAFÍA 12
CREATIVE COMMONS 13
CRÉDITOS 14

FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 1

 Introducción
En la actualidad, existen muchas herramientas para pulir tanto los contenidos, como la
estructura, arquitectura y organización de la información, como también todas las posibles
fallas técnicas de enlaces, código y apariencia en la navegación de un proyecto multimedia.
De la misma manera, como estas herramientas presentan a disposición del desarrollador
o diseñador web los errores, es preciso conocer la forma de resolverlos. Sin embargo, en el
desarrollo de la multimedia de tipo online, la diversidad de errores e inconsistencias de toda
índole es muy grande, por ende, para su verificación es de suma importancia la aplicación
de una lista de chequeo que permita identificar los cambios pertinentes a efectuar en la
usabilidad y accesibilidad, siendo estos dos grandes pilares de los cuales se desprenden
otras agrupaciones para tener en cuenta.

Es importante tener en cuenta que la usabilidad es la medida de la calidad de experiencia

que tiene un usuario cuando interactúa con un producto o sistema. Esta medida se toma
a través de un estudio de la relación que se produce entre las herramientas y quienes las
utilizan. Para un sitio web, las herramientas son el conjunto integrado por el sistema de
navegación, las funcionalidades y los contenidos ofrecidos. Con este ejercicio se logra
determinar la eficiencia en el uso de los diferentes elementos dispuestos en las pantallas y
la efectividad en el cumplimiento de las tareas que se pueden llevar a cabo a través de ellas.

Por su parte, el concepto de accesibilidad hace referencia a la posibilidad de acceso al

sistema que tienen las personas en general. Dada la mecánica de aprendizaje autodidacta
que plantea el SENA, en este documento se muestran los lineamientos básicos para el
desarrollo y corrección de los errores más comunes de usabilidad y accesibilidad a través
de la lista de chequeo, siendo esta una herramienta relevante que le ayudará a optimizar y
ofrecer un producto de calidad superior al usuario; a continuación se mostrarán los detalles
más importantes para tener en cuenta a la hora de aplicar estos conceptos:

FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 2

 Mapa
Conceptual
Mapa
Conceptual Población en
condición de diversidad Inclusión
funcional

Accesibilidad Multiplataforma Acceso mediante

dispositivos móviles

Compatibilidad Acceso mediante

todos los navegadores
Revisar Total Validator

Herramienta de Optimización y Clean CSS

uso libre para búsqueda de errores
Realizar cambios de W3C CSS Validator
usabilidad y accesibilidad Resolución Carga de imágenes
y tamaño W3C Markup Validator

Tamaño real De imágenes en galerías TAW3

Estructura HTML WAVE

Revisar

Manejo de DIVS Tablas BrowserShots

Optimización Ready.mobi
Compresión Carga de cascada CSS
de peso hojas de estilo
Pingdom
Estructura y Conexión a base de datos
optimización
1. Accesibilidad
Fabricio: Hola Primo Efrain…… navegación, las funcionalidades y los contenidos ofrecidos. Con este ejercicio se logra
determinar la eficiencia en el uso de los diferentes elementos ofrecidos en las pantallas y la
Efraín: Apreciado Fabricio, hola, cómo efectividad en el cumplimiento de las tareas que se pueden llevar a cabo a través de ellas.
estás, cuéntame, en qué te puedo ayudar?
Para que te quede claro el concepto, a continuación te enseñaré los detalles más importantes
Fabricio: Primo, necesito saber qué debo para tener en cuenta a la hora de aplicar la usabilidad:
hacer después de detectar los fallos en la
navegación de mi proyecto multimedia,
¿me puedes orientar?

Efraín: Claro! Debes crear una lista de

chequeo que te permita identificar los
cambios pertinentes a efectuar en la
usabilidad y accesibilidad, de acuerdo con
los resultados que detectaste en la revisión
de tu proyecto.

Debes empezar aplicando los cambios a la

usabilidad.

Fabricio: hummm… y, ¿qué es la usabilidad?

Efraín: La usabilidad es la medida de la

calidad de experiencia que tiene un usuario
cuando interactúa con un producto o
sistema.

Esta medida se toma a través de un estudio

de la relación que se produce entre las
herramientas y quienes las utilizan.

Para un sitio web, las herramientas son

el conjunto integrado por el sistema de

FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 4

1.1 Accesibilidad Figura 2. Ícono discapacidad

Este concepto hace referencia a la posibilidad de acceso al sistema que

tienen las personas en general, incluyendo aquellas con limitaciones
individuales, discapacidades, dominio del idioma entre otros; así
mismo, determina las posibilidades o limitaciones derivadas del
contexto de acceso, como el software o hardware, ancho de banda
de la conexión empleada, computadores con sistemas operativos no
actualizados o limitados, etc. Fuente: SENA (2017)

Figura 1. Usabilidad 1.1.2 Acceso mediante dispositivos móviles

Actualmente, existe un concepto denominado Responsive Web

Design, que traducido al español significa Diseño Web Adaptativo,
el cual tiene que ver con el desarrollo de los sitios web, pensando
en los dispositivos de lectura actuales tales como: dispositivos
móviles, tablets y smartphones.

Esta técnica permite que a través del buen uso de los códigos
HTML y CSS, se convierta una sola versión de los sitios web, en
versiones multiplataforma, sin tener que crear una versión de la
misma página web para dispositivos móviles, que requieran de
mayor trabajo al tratar de desarrollar versiones específicas para
las características de cada dispositivo; es decir, una versión para
Iphone, otra para Android, otra para Iopera, etc.

Figura 3. Dispositivos móviles

Fuente: SENA (2017)

1.1.1 Inclusión de personas en condición de discapacidad

A pesar de que es mínima la población en condición de discapacidad

interesada en que le sea creada una pieza multimedia, es necesario
establecer en estos proyectos, las posibilidades de acceso al sistema
que permitan su participación, garantizando los mecanismos de Fuente: Freepik (2017)
inclusión y condiciones igualitarias.

FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 5

1.1.3 Acceso mediante todos los navegadores

Teniendo en cuenta que los navegadores interpretan de manera

particular los elementos que componen una web, resulta en
ocasiones que la compatibilidad entre el uno y el otro no es
completa; por consiguiente, si por ejemplo, la página web se ve bien
en el navegador Google Chrome, no quiere decir que se vea igual en
el navegador Mozilla Firefox o en Internet Explorer, por ende, existen
diferentes formas de optimizar el código de acuerdo con el agente
lector o intérprete.

Figura 4. Navegadores

Fuente: Freepik (2017)

FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 6

2. Optimización de peso
Tiene que ver con la formas de reducir el peso de las fotos e imágenes,
para este caso es necesario el uso de varios servicios y aplicaciones
que optimicen las imágenes sin que estas pierden su calidad.
2.1 Carga de imágenes
Cuando una imagen es trabajada con el fin de ser subida a la web,
debe tener una resolución no mayor a 72 dpi. Las imágenes y los
contenidos multimedia son los elementos que en mayor medida,
hacen que la web sea lenta o eficaz.
En la actualidad, cuando se desarrolla pensando en las
multiplataformas, es decir en Responsive Design, el tratamiento de las
imágenes pasa a ser un tema de mayor profundidad, dado que si lo
que se quiere es realizar un solo contenido que se adapte a todos los
dispositivos, la imagen que se cargará es la misma que debe aparecer
en la pantalla de un ordenador de mesa o en la de un smartphone,
por consiguiente, el peso de carga en el smartphone, será de mayor
uso del procesador que el del ordenador de mesa.
En el mercado actual existen algunas herramientas que ayudan a
redimensionar la imágenes de acuerdo con el ancho en pixeles de
donde van a ser mostradas, así mismo la W3C, que es el organismo
internacional que rige la calidad de los contenidos en cuanto a
accesibilidad y usabilidad, determinó unas reglas aplicadas al estilo
CSS, creando un nuevo atributo y un elemento específico orientado
a la redimensión de las imágenes, este atributo es direccionado a
HTML5.
2.2 Tamaño real de imágenes
El tamaño de archivo de una imagen es el tamaño digital calculado en
kilobytes (K), megabytes (MB) o gigabytes (GB), este es proporcional
FAVA - Formación en Ambientes Virtuales de Aprendizaje
a las dimensiones en píxeles de la imagen. Las imágenes con más
píxeles muestran mejor los detalles a un tamaño de impresión
determinado, pero necesitan mayor espacio en disco para su
almacenamiento y requieren más tiempo para su edición e
impresión. En consecuencia, la resolución de imagen llega a ser
un compromiso entre la calidad de la imagen (capturando todos
los datos necesarios) y el tamaño de archivo.
Otro factor que afecta al tamaño del archivo es el formato del
mismo. En función de los distintos métodos de compresión que se
usan en los formatos de archivo GIF, JPEG, PNG y TIFF, los tamaños
de los archivos pueden ser muy distintos aun teniendo las mismas
dimensiones en píxeles. De igual manera, la profundidad de los
bits de color y la cantidad de capas y canales de una imagen,
afectan su tamaño.
En las galerías de imágenes suele suceder que mediante una
herramienta de Jquery o Java, se realiza un redimensionamiento
de las imágenes para crear las vistas en miniatura, algunas de
estas herramientas solamente redimensionan las imágenes sin
crear unas nuevas a la medida, esta acción hace que sea mucho
más pesada la carga, por ende, lo ideal es usar herramientas
que permitan crear y no redimensionar, las cuales sean vistas
en miniatura y que estas a su vez escriban la información en la
carpeta caché del servidor.
2.3 HTML
El cuerpo HTML pesa tan solo 2 kb, sin embargo, en la
construcción y la descarga de los contenidos puede generar un
mayor peso y a su vez, retraso en los tiempos de carga, por tanto,
recomendaciones como usar una sola hoja de estilos CSS, usar
DIV en vez de tablas anidadas, dimensionar las imágenes con
SENA - Servicio Nacional de Aprendizaje 7
pixeles exactos y no porcentajes (aunque este principio contradice al
Responive Resign), entre otros, son las sugerencias realizadas por la
W3C en la optimización de la carga de HTML.
2.4 Tablas
disponibles en un archivo HTML, si no que directamente, el sitio al
ser llamado mediante la URL, se va a conectar con la base de datos,
esta debe contener una estructura organizada, lo que permitirá
que en el momento de la consulta, sea mostrado más rápido el
resultado.

En el tratamiento de las tablas es recomendable no anidar más de
una, y en vez de usar tablas anidadas, los div son la solución más
adecuada para la optimización de la carga.
Si en definitiva la solución debido al objetivo del proyecto no aplica
para usar divs, la recomendación es usar tablas pero con contenidos
más pequeños, de manera que no tenga que depender de la descarga
general de la página, para mostrar el contenido de dicha tabla.
Existen varias recomendaciones de carácter técnico, como las
consultas SQL que se deben programar desde el PHP y diseñar
la base de datos con una estructura organizada, se recomienda
no almacenar las imágenes en la base de datos, sino crear el
enlace de carga, para que cuando cargue la página por completo,
comiencen a cargar las imágenes.

2.5 Carga de cascadas CSS

El empleo de CSS hace que no haya que incluir en el código, los
atributos de cada uno de los elementos que incluimos en la página,
lo que implica una reducción muy considerable de líneas de código
HTML y como consecuencia de ello, una reducción importante del
peso del archivo HTML.

Los estilos CSS también ayudan a la carga de manera rápida,

usable y accesible de una pieza multimedia. Actualmente, existen
compresores automáticos que optimizan las hojas de estilos CSS,
abreviando las propiedades que se han de aplicar, convirtiéndolo así
en un código más fácil de leer e interpretar por el navegador.

2.6 Conexión a base de datos

Cuando una multimedia de tipo online, deja de ser una simple página
web para convertirse en una aplicación o sistema de información
con administración de contenidos, consultas, búsquedas, galerías,
entre otras cosas, la base de datos pasa a ser una parte fundamental
en la carga de la información, ya que los contenidos no van a estar

FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 8

3. Herramientas de uso libre
para la optimización y búsqueda
de errores
Existen diferentes herramientas que pueden ayudar a encontrar y
resolver errores de accesibilidad, usabilidad y contenido.
3.1 Total Validator
Es una herramienta que incluye un sistema completo de análisis
de una página web, el software es de uso libre y al instalarlo, con
solamente escribir en el buscador la URL que se quiere consultar, el
programa arroja resultados que comprenden desde ortografía hasta
errores de código y enlaces rotos.
Con esta herramienta se optimizan y reparan errores del código
CSS, es de uso libre y al realizar la optimización, se obtiene una
ganancia de aproximadamente el 30% de velocidad en la carga.
3.3 W3C CSS Validator
De la misma manera en que la herramienta Clean CSS revisa el
código CSS, el programa W3C CSS Validator lo hace, optimiza y
repara errores pero además, contiene ayuda para la interpretación
de cada navegador.
Figura 7. W3C Validator

Figura 5. Total Validator

Fuente: jigsaw.w3.org (2017)

Fuente: Totalvalidator (2017)
3.4 W3C Markup Validator
3.2 Clean CSS
La W3C, pone a disposición esta herramienta: Markup Validator,
Figura 6. Clean CSS como la más completa para detectar los errores en general.

Figura 8. W3C Markup Validator

Fuente: Cleancss (2017) Fuente: Validator.w3 (2017)

FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 9

3.5 TAW3
De una manera muy sencilla, con solo escribir la URL que se quiere
analizar, se obtendrán los resultados de los errores, advertencias e
incluso información de lo que no pudo ser revisado automáticamente
y que requiere tener una revisión manual.
Figura 9. TAW3
Con esta herramienta se puede evaluar la accesibilidad con los
diferentes navegadores sin necesidad de descargarlos y hacer las
pruebas uno por uno.
3.8 Ready.mobi
Igual que las herramientas de evaluación de accesibilidad de los
navegadores de escritorio, esta herramienta evalúa la accesibilidad
a través de dispositivos móviles.

Figura 12. Ready.mobi

Fuente: Tawdis (2017)

3.6 WAVE
Esta herramienta es más visual y ayuda con los errores mediante la Fuente: Ready.mobi (2017)
inserción de etiquetas de colores dentro de la misma interfaz de lo
que se está analizando. 3.9 Pingdom
Figura 10. WAVE Es una excelente herramienta para revisar la velocidad de carga
del sitio.

Figura 13. Pingdom

Fuente: Wave.webaim (2017)

3.7 Browser Shots

Figura 11. Browser Shots

Fuente: Tools.pingdom (2017)

Fuente: Browsershots (2017)

FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 10

 Glosario
Accesibilidad: Posibilidad de acceso, en la cual se contempla
tanto la posibilidad de acceder a un contenido por personas con
limitaciones individuales, discapacidades, dominio del idioma, o
limitaciones derivadas del contexto de acceso como software o
hardware.
Arquitectura de la información: Es definida como el arte y la
ciencia de organizar espacios de información con el fin de ayudar
a los usuarios a satisfacer sus necesidades de información. La
actividad de organizar comporta la estructuración, clasificación y
rotulado de los contenidos de la multimedia.
Base de datos: Sistema estructurado que permite la escritura,
almacenamiento y consulta de datos. Generalmente los datos están
relacionados o construidos bajo un mismo contexto. Existen varios
gestores de bases de datos, algunos más robustos que otros, pero
que cumplen con el objetivo de estar almacenados para su consulta.
Caché: Hace referencia a un sistema de buffer para alojar información
de consulta continua para tenerla disponible cuando se acceda
nuevamente y reduzca el consumo de ancho de banda y a su vez
reduzca el tiempo y peso de carga de una página web.
FAVA - Formación en Ambientes Virtuales de Aprendizaje
Discapacidad: También llamada incapacidad, es la condición que
presentan algunas personas con deficiencias físicas, materiales o
mentales, que presentan obstáculos para gozar de una inclusión
igualitaria en la sociedad.
Diseño web adaptativo (Responsive Design): Técnica
desarrollada para que los contenidos se adapten de manera
automática al entorno del usuario.
Estilos CSS: En inglés Cascading Style Sheets, es un sistema de
comunicación mediante un lenguaje de código que permite
controlar la apriencia visual y semántica de una multimedia.
HTML5: En inglés Hypertext Markup Language, es la quinta versión
donde se implementan atributos y etiquetas nuevas para obtener
una mayor cobertura en la parte gráfica y funcional de los sitios
web.
Java Script: Es uno de los lenguajes de programación más
populares y más usados, su filosofía está orientada al trabajo con
objetos con el fin de optimizar la experiencia del lado del usuario.
SENA - Servicio Nacional de Aprendizaje 11

Bibliografía
Adobe. (s.f.). Tamaño y Resolución de Imágenes y Resolución de Imágenes.
Recuperado de: https://helpx.adobe.com/es/photoshop/using/image-size-
resolution.html
Consorcio World Wide Web W3C. (2013). Sobre el W3C. Recuperado de:
http://www.w3c.es/Consorcio/.
Ganzábal García, X. (2015). Aplicaciones ténicas de usabilidad y accesibilidad
en el entorno del cliente. Recuperado de:
https://books.google.com.co/Existen+diferentes+herramientas+que+p
ueden+ayudar+a+encontrar+y+resolver+errores+de+accesibilidad,+u
sabilidad+y+contenido&source=bl&ots=WS0LI1-Ipz&sig=EbHpJ7KHIz_
I0MyuCopiiU-HZgE&hl=es-
Totalvalidator. (2017). Uso del Totalvalidator. Recuperado de: http://www.
totalvalidator.com/
Cleancss. (2017). Uso de Cleancss. Recuperado de: http://www.cleancss.
com/
Jigsaw.w3.org. (2017) Validator. Recuperado de: http://jigsaw.w3.org/css-
validator/
Tawdis. (2017) Uso de Tawdis. Recuperado de: http://www.tawdis.net/
Wave.webaim. (2017). Wave. Recuperado de: Ej. http://wave.webaim.org/
Browsershots. (2017). Browsershots. Recuperado de: http://browsershots.
org/
Bibliografía
Bibliografía
Ready. (2017). Ready. Recuperado de: https://ready.mobi/
Pingdom. (2017). Tools. Recuperado de: http://tools.pingdom.com/fpt/
Figuras:
Flaticon. (2017). Figura 2. Ícono discapacidad. Recuperado de:
https://www.flaticon.es/icono-gratis/discapacidad_34717
Freepik. (2017). Figura 3. Móviles. Recuperado de:
http://www.freepik.com/free-photos-vectors/gadget
Freepik. (2017). Figura 4. Navegadores. Recuperado de:
http://www.freepik.com/free-photos-vectors/gadget
Totalvalidator. (2017). Figura 5: Total Validator. Recuperado de:
http://www.totalvalidator.com/
Cleancss. (2017). Figura 6: Cleancss. Recuperado de:
http://www.cleancss.com/
Jigsaw. (2017) Figura 7: Jigsaw. Recuperado de:
http://jigsaw.w3.org/css-validator/
Validator. (2017). Figura 8: W3C Markup Validator. Recuperado de:
https://validator.w3.org/docs/help.html#validation_basics
Tawdis (2017). Figura 9: TAW3. Recuperado de http://www.tawdis.net/
Wave.webaim (2017). Figura 10: WAVE. Recuperado de:
http://wave.webaim.org/
Browsershots (2017). Figura 11: WAVE. Recuperado de:
http://browsershots.org
Ready.mobi (2017). Figura 12: Ready.moby. Recuperado de: :
https://ready.mobi/
Tools.pingdom (2017). Figura 13: Pingdom. Recuperado de:
http://tools.pingdom.com/fpt/
 Creative
Commons
Creative
Commons
 Créditos
LÍNEA DE PRODUCCIÓN
PROGRAMA Producción de Multimedia
NOMBRE DEL OBJETO La lista de chequeo como herramienta

Créditos DISEÑADORES GRÁFICOS

PROGRAMADORES
GUIONISTAS-PRODUCTOR DE MEDIOS AUDIOVISUALES
ASESORAS PEDAGÓGICAS
LÍDER DE L A LÍNEA DE PRODUCCIÓN
de verificación de la usabilidad y la accesibilidad
Caren Xiomara Carvajal Pérez
Julián Alberto Camargo Fonseca
Luis Carlos Reyes Parada
Nilda Inés Camargo Suescún
Nancy Astrid Barón López
Milady Tatiana Villamil Castellanos
John Freddy Vargas Barrera
Dolly Esperanza Parra Lozano
Jheison Edimer Muñoz Ramírez
Janet Lucía Villalba Triana
Shirley Andrea Ovalle Barreto
Zulma Yurany Vianchá Rodríguez

EXPERTOS TEMÁTICOS
EXPERTOS TEMÁTICOS Versión 1 (2017): Erika Danely Pérez Barrera