Evaluacion de Accesibilidad en Páginas Web

Tema: Herramientas para automatizar pruebas de usabilidad y accesibilidad
1. Objetivos:
1.1. Objetivo General
Determinar y aplicar las diferentes normas que se utilizan para el diseo
de pginas web accesibles y usables.
1.2. Objetivos Especficos
Implementar y utilizar Achecker para determinar el nivel de accesibilidad
brindado por diferentes pginas web.
Modificar pginas web para verificar si los cambios permiten crear un
sitio ms accesible.
Utilizar WAVE para determinar si las pginas web cumplen con los
estndares de accesibilidad web.
Analizar las diferentes mtricas que implementa WAVE para evaluar el
nivel de accesibilidad de las pginas web.
2. Marco terico:
Usabilidad:
La definicin ms extendida, que es la ofrecida por la ISO, y que define
usabilidad como el " grado de eficacia, eficiencia y satisfaccin con la que
usuarios especficos pueden lograr objetivos especficos, en contextos de uso
especficos.
En la definicin podemos observar que la usabilidad se compone de dos tipos
de atributos [1]:
Atributos cuantificables de forma objetiva: como son la eficacia o nmero
de errores cometidos por el usuario durante la realizacin de una tarea,
y eficiencia o tiempo empleado por el usuario para la consecucin de
una tarea.
Atributos cuantificables de forma subjetiva: como es la satisfaccin de
uso, medible a travs de la interrogacin al usuario, y que tiene una
estrecha relacin con el concepto de Usabilidad Percibida.
Accesibilidad Web:
La accesibilidad Web significa que personas con algn tipo de discapacidad
van a poder hacer uso de la Web [2].
Pgina 1 de 35
Para lograr accesibilidad web, hay que generar un grado de diseo dentro de
las pginas web, a tal punto que estas puedan se percibidas, entendidas, y que
el usuario pueda interactuar con la web.
Beneficios de la implementar accesibilidad al diseo web:
Permite a las personas con discapacidades la interaccin con la web, y
el acceso la informacin que esta brinda.
Permite que la pgina se muestre entre los primeros lugares de los
buscadores de contenido.
Amplia el nmero de visitantes a los sitios web.
Pautas de Accesibilidad para contenido Web[2]:
El W3C(Word Wide Web Consortium), mediante la gua WCA 2.0,
entrega una serie de normas a modo de recomendacin para los
desarrolladores de contenido web, para que su desarrollo se enfoque en
sitios ms accesibles.
W3C plantea exigencias catalogadas como A, AA y AAA, estas plantillas
se muestran en el sitio oficial de W3C, estos estndares son exigidos
por pases miembros de la Organizacin para la Cooperacin y el
Desarrollo Econmicos, OCDE.
Herramientas utilizadas para las pruebas de accesibilidad y usabilidad:
Achecker:
Es una herramienta de cdigo abierto disponible en versin de escritorio y web,
que permite revisar la accesibilidad de las pginas Web, esta evaluacin lo
hace en base a directrices internacionales de accesibilidad.
Achecker es compatible con las siguientes pautas:
WCAG 1.0 (Internacional)
WCAG 2.0 (Internacional)
BITV 1.0 (Alemania)
Seccin 508 (US)
Ley Stanca (Italia)
Achecker emite reportes de los problemas de accesibilidad encontrados en las
pginas web, para lo cual se enfoca en 3 problemas:
Known Problems: Son los que causan una barrera en la accesibilidad,
necesitan la modificacin de la pgina web.
Likely Problems: Son posibles barreras, estos errores deben ser analizados y
modificados si la persona lo decide.
Potential Problems: Problemas que no se han podido identificar y se necesita la
revisin de la persona.
WAVE:
Pgina 2 de 35
Es una herramienta que permite a los desarrolladores web realizar su

contenido web ms accesible. Wave muestra si el cdigo de la pgina web se
pega a las normas de accesibilidad. Para el uso de Wave se necesita la
direccin url.
La informacin mostrada por Wave despus de su anlisis se alinea a las
siguientes caractersticas:
Resumen: Informacin sobre los cumplimientos he incumplimientos de las
normas de accesibilidad web. Para realizar esto utiliza un cdigo de colores, los
cuales notan rojo para los errores que causan que las personas con
discapacidad no puedan navegar por la pgina, amarillo problemas menos
graves, estos pueden afectar la navegabilidad dentro de la pgina, verde
caractersticas que se apegan a las normas de accesibilidad, celeste elementos
html implementados para mejorar la accesibilidad, violeta implementaciones
para la accesibilidad segn la especificacin tcnica WAI-ARIA, negro errores
de contraste.
Detalles: Expande la informacin referente a los fallos en el cumplimiento de
accesibilidad, este detalle se puede mostrar segn los siguientes filtros: WSAG
2.0 (AA), WSAG 2.0(AAA) y la seccin 508.
Documentacin: Indica los errores de codificacin como fue detectado el
estndar que irrumpe y las posibles medidas para solucionar el error.
Descripcion General: Muestra la navegabilidad de la pgina usando los
headers que fueron incluidos, estos dan a conocer el contenido del texto
siguiente.
Mientras ms simple y exacto el header, ms entendible ser para la persona
que visite la pgina.
3. Desarrollo de la prctica:
En la prctica se utiliz Achecker tanto online como offline y Wave online
para el anlisis de accesibilidad.
3.1.
CONFIGURACIN DEL AMBIENTE DE PRUEBAS
El sistema operativo, los programas y herramientas para el desarrollo de la
prctica se muestran en la siguiente tabla.
1
2
3
4
Nombre y Versin
Caractersticas
Sistema
Operativo Sistema operativo de la empresa Microsoft
Windows 10
Achecker online
WebService API utilizado para el anlisis
de accesibilidad web.
Achecker 1.3 offline
API offline de Acheker.
USBWebserver v8.6
Servidor web portable, que rene un
conjunto de programas como apache,
MySql, PHP.
Pgina 3 de 35
5
6
7
Wave
WebService utilizado para anlisis de

accesibilidad web.
MariaDB 10.1.13
Sistema de gestin de bases de datos.
PhpMyAdmin 10.1.13- Cliente de consultas a bases MariaDb
MariaDB
Google
Chrome Navegador web, que permite acceder a
contenido web
51.0.2704.106
3.2. ESQUEMAS DE FUNCIONAMIENTO DE LAS HERRAMIENTAS

Funcionamiento de Achecker y Wave
3.3.
PROCEDIMIENTO CON CAPTURAS DE PANTALLAS
Achecker:
Preparacin del entorno he instalacin de Achecker:
Achecker offline corre sobre un sevidor web, para lo cual se debe
configurar el USBWebserver.
Ingresar a la carpeta USBWebServer y ejecutar usbwebserver.
Pgina 4 de 35
Se debe dar permisos de ejecucin para lo cual se presiona en permitir.

Seleccionar en setings y dar click en Save
Verificar el funcionamiento del servidor ingresando a la direccin

localhost:8090 a travs del navegador.
Pgina 5 de 35
Para la ejecucin de Achecer offline, hay que copiar la carpeta AChecher1.3 dentro de la carpeta de USBWebserver en el directorio root.
Ingresar
al
navegador
y
localhost:8090/AChequer/install
poner
la
siguiente
direccin:
Pgina 6 de 35
Seleccionar Install y aceptar los trminos de uso:
Para el paso de base de datos se debe crear una nueva base de datos,
para lo cual se ingresa en localhost:8090/phpmyadmin/
Pgina 7 de 35
Las credenciales son mostradas en la parte inferior:
Se agrega un nuevo usuario, para lo cual se ingresa en Usuarios, y luego

en agregar nuevo usuario.
Pgina 8 de 35
Ingresar los Achecker en nombre y contrasea.
Se selecciona Crear base de datos con el mismo nombre y otorgar todos

los privilegios
Se presiona en guardar y se verifica la creacin del usuario y de la base

de datos.
Pgina 9 de 35
Se regresa a la instalacin y se ingresa la informacin requerida
El cual muestra un error, para lo cual se debe copiar la instruccin sql y

copiarla en phpMyadmin y ejecutar esa instruccin
La instalacin continuara mostrando todo lo que ser configurado:
En la siguiente pantalla presionar en siguiente.

Pgina 10 de 35
Ingresar la informacin que requiere el siguiente formulario en este caso

admin.
Nos mostrara en directorio temporal en el cual se almacenara la

informacin de la instalacin, esta carpeta debe ser creada.
Pgina 11 de 35
La siguiente pantalla nos muestra la validacin de la existencia de la

carpeta temp, presionar en siguiente.
La informacin que se muestra a continuacin es un resumen de

Achecker, versin el sistema en el cual ser instalado, el servidor, la
versin de php, y de mysql
Una vez finalizada la

localhost:8090/Achecker
instalacin
se
ingresa
en
la
URl
Se da click en login y se ingresa las credenciales creadas, en este caso

admin
Pgina 12 de 35
Se debe ingresar la direccin URl a ser verificada, y seleccionar Check it
Para la correccin de ese error se debe ir al documento que nos dice y

modificar las siguientes lneas
Pgina 13 de 35
Se guarda los cambios y se ingresa de nuevo la url y verificar la

informacin que nos sale sobre la pgina web, En este caso es la pgina
de educacin virtual de la Politcnica Nacional.
Pgina 14 de 35
Se puede verificar toda la informacin de los errores en la base de datos

mysql
Pgina 15 de 35
Ingreso a Wave
Ya que Wave es un web servise online, se debe digitar la siguiente url
wave.webaim.org
Pegar el link de la pgina web a ser evaluada en este caso la del

ministerio de educacin del ecuador:
Pgina 16 de 35
Se puede utilizar las diferentes funcionalidades que nos otorga Wave en

su men derecho, por ejemplo mostrar la pgina sin estilos.
2.3. CODIGOS FUENTE Y ARCHIVOS

Pagina web a ser analizada:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>AuteKse</title>
<link rel ="shortcut icon" href="AutekseIco.ico">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/agency.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet"
type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script'
rel='stylesheet' type='text/css'>
<link
href='https://fonts.googleapis.com/css?
family=Droid+Serif:400,700,400italic,700italic'
rel='stylesheet'
type='text/css'>
<link
href='https://fonts.googleapis.com/css?
family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
</head>
<body id="page-top" class="index">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
Pgina 17 de 35
</button>
<a
class="navbar-brand
page-scroll"
href="#pagetop"><span class="fa fa-eye"></span> AuteKse</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#services">Servicios</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Clientes</a>
</li>
<li>
<a class="page-scroll" href="#about">Conozcanos</a>
</li>
<li>
<a class="page-scroll" href="#team">Nuestro Equipo</a>
</li>
<li>
<a class="page-scroll"
<header>
<div class="intro-text">
<div class="intro-lead-in">Implementando ideas Inovadoras!</div>
<div class="intro-heading">Autekse</div>
<a href="#services" class="page-scroll btn btn-xl">Conozca
Mas</a>
</div>
</div>
</header>
<section id="services">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Servicios</h2>
<h3 class="section-subheading text-muted">Nuestros
Servicios</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-briefcase fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Publicidad</h4>
<p class="text-muted">Busca la manera de atraer a la gente.
Publicidad con Realidad Aumentada es la solucin</p>
</div>
<i class="fa fa-tablet fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Aplicaciones Moviles</h4>
Pgina 18 de 35
<p class="text-muted">Que sus dispositivos le trasladen a otro

mundo</p>
</div>
<i class="fa fa-book fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Educacin</h4>
<p class="text-muted">Llevar a la educacin a otro nivel con
claces mas interactivas.</p>
</div>
</div>
</div>
</section>
<section id="portfolio" class="bg-light-gray">
<div class="row">
<h2 class="section-heading">Clientes</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor
sit amet consectetur.</h3>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" datatoggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/roundicons.png" class="imgresponsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Round Icons</h4>
<p class="text-muted">Graphic Design</p>
</div>
</div>
</div>
</div>
<img src="img/portfolio/startup-framework.png" class="imgresponsive" alt="">
</a>
<h4>Startup Framework</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
Pgina 19 de 35
alt="">
</div>
</div>
<img src="img/portfolio/treehouse.png" class="img-responsive"
</a>
<h4>Treehouse</h4>
</div>
</div>
</div>
</div>
<img src="img/portfolio/golden.png" class="img-responsive"
alt="">
</a>
<h4>Golden</h4>
</div>
</div>
!-- About Section -->
<section id="about">
<div class="row">
<h2 class="section-heading">Conozcanos</h2>
<h3 class="section-subheading text-muted">Trabajo colectivo con
el cliente.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="img-circle img-responsive"
src="img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Entrevista con el Cliente</h4>
<h4 class="subheading">Todo comienza aqui</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Entrevistas amenas,
conversaciones cortas, enfatizando en las necesidades que el usuario
posee.</p>
</div>
</div>
</li>
Pgina 20 de 35
<li class="timeline-inverted">
</div>
<h4>Planificacin</h4>
<h4 class="subheading">La organizacin</h4>
</div>
<p class="text-muted">Tomar en cuenta lo que es mas
importante para el usuario.</p>
</div>
</div>
</li>
<li>
</div>
<h4>Desarrollo</h4>
<h4 class="subheading">Trabajo en Equipo</h4>
</div>
<p class="text-muted">Trabajamos en equipo con el fin
de cumplir con las fechas establecidas.</p>
</div>
</div>
</li>
</div>
<h4>Entrega</h4>
<h4 class="subheading">Satisfaccin para
usuario.</h4>
</div>
<p class="text-muted">Cupliendo con las fechas
establecidas, y cubriendo las necesidades planteaadas por el usuario se
consigue el producto final.</p>
</div>
</div>
</li>
<h4>Ser parte
<br>de su
<br>Historia!</h4>
</div>
</li>
</ul>
</div>
</div>
Pgina 21 de 35
</div>
</section>
<section id="team" class="bg-light-gray">
<div class="row">
<h2 class="section-heading">Nuestro Equipo</h2>
<h3 class="section-subheading text-muted">Gente comprometida
con mucha energia y con ganas de ayudarle a solucionar su problema.</h3>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="team-member">
<img src="img/team/1.jpg" class="img-responsive img-circle"
alt="">
<h4>Jonathan Morocho</h4>
<p class="text-muted">Desarrollador</p>
<ul class="list-inline social-buttons">
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a
href="https://www.facebook.com/jonathan.morocho1"><i
class="fa
fafacebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
alt="">
<h4>Larry Parker</h4>
<p class="text-muted">Lead Marketer</p>
</li>
<li><a href="#"><i class="fa fa-facebook"></i></a>
</li>
</li>
</ul>
</div>
</div>
alt="">
<h4>Christian Castillo</h4>
<p class="text-muted">Desarrollador</p>
<li><a href="https://twitter.com/CchristicoCasti"><i
class="fa fa-twitter"></i></a>
</li>
<li><a
href="https://www.facebook.com/christian.e.castillo1"><i
class="fa
fafacebook"></i></a>
</li>
Pgina 22 de 35

</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<p class="large text-muted">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad
perspiciatis, totam corporis ea, alias ut unde.</p>
</div>
</div>
</div>
</section>
<aside class="clients">
<div class="row">
<div class="col-md-3 col-sm-6">
<a href="#">
<img src="img/logos/envato.jpg" class="img-responsive imgcentered" alt="">
</a>
</div>
<a href="#">
<img src="img/logos/designmodo.jpg" class="img-responsive
img-centered" alt="">
</a>
</div>
<a href="#">
<img src="img/logos/themeforest.jpg" class="img-responsive
img-centered" alt="">
</a>
</div>
<a href="#">
<img src="img/logos/creative-market.jpg" class="imgresponsive img-centered" alt="">
</a>
</div>
</div>
</div>
</aside>
<section id="contact">
<div class="row">
<h2 class="section-heading">Contctenos</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor
sit amet consectetur.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<form name="sentMessage" id="contactForm" novalidate>
<div class="row">
<div class="form-group">
Pgina 23 de 35
<input type="text" class="form-control"

placeholder="Su Nombre *" id="name" required data-validation-requiredmessage="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
<input type="email" class="form-control"
placeholder="Su Email *" id="email" required data-validation-requiredmessage="Please enter your email address.">
</div>
<input type="tel" class="form-control" placeholder="Su
Telefono *" id="phone" required data-validation-required-message="Please
enter your phone number.">
</div>
</div>
<textarea class="form-control" placeholder="Su
Mensaje *" id="message" required data-validation-required-message="Please
enter a message."></textarea>
</div>
</div>
<div class="clearfix"></div>
<div id="success"></div>
<button type="submit" class="btn btn-xl">Enviar
Mensaje</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="row">
<span class="copyright">Copyright © Your Website
2014</span>
</div>
</li>
<li><a
href="https://www.facebook.com/pages/Autekse/1640817652827233"><i
class="fa fa-facebook"></i></a>
</li>
</li>
</ul>
</div>
<ul class="list-inline quicklinks">
Pgina 24 de 35
<li><a href="#">Privacy Policy</a>

</li>
<li><a href="#">Terms of Use</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1"
role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet
consectetur.</p>
<img class="img-responsive img-centered"
src="img/portfolio/roundicons-free.png" alt="">
<p>Use this area to describe your project. reiciendis facere
nemo!</p>
<p>
<strong> </strong>You can download 60 of them for free,
courtesy
of
<a
href="https://getdpd.com/cart/hoplink/18076?
referrer=bvbo4kax5k8ogc">RoundIcons.com</a>, or you can purchase the
1500
icon
set
<a
href="https://getdpd.com/cart/hoplink/18076?
referrer=bvbo4kax5k8ogc">here</a>.</p>
<ul class="list-inline">
<li>Date: July 2014</li>
<li>Client: Round Icons</li>
<li>Category: Graphic Design</li>
</ul>
<button type="button" class="btn btn-primary" datadismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1"
role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
Pgina 25 de 35
<div class="modal-body">
<h2>Project Heading</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet
consectetur.</p>
<img class="img-responsive img-centered"
src="img/portfolio/startup-framework-preview.png" alt="">
<p>You can preview Startup Framework <a
href="http://designmodo.com/startup/?u=787">here</a>.</p>
<button type="button" class="btn btn-primary" datadismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2.4.
RESOLUCIN DE PREGUNTAS Y PROBLEMAS
Achecker:
Instalacin y configuracin en el servidor XAMPP.
Se inicializa los servicios Apache y Mysql en la interfaz de XAMPP
Se copia el archivo de Achecker dentro de la carpeta hdocs de XAMPP
Pgina 26 de 35
Se ingresa en la ruta localhost:8090/Achecker/install
Se ingresa a la phpmyadmin y se crea el usuario y la base de datos Achecker,

el usuario y la clave son root y la clave se la deja en blanco.
Se crea el usuario y se le da los permisos para la creacin de la base de datos,

a ms de seto se crea una base de datos con el mismo nombre del usuario.
Pgina 27 de 35
Se instala y modifica los archivos pertinentes y se ejecuta el analizador.
Se selecciona la opcin HTML File Update, y se ingresa el archivo html a ser

analizado.
Pgina 28 de 35
Se carga el archivo y se ejecuta el anlisis.
Se analiza si se debe modificar las lneas, y se prosigue con los cmabios.
Pgina 29 de 35
Se vuelve a analizar el archivo html.
Wave
Instalacion
Se ingresa al centro de extensiones se busca wave, y se selecciona aadir a
Chrome:
Se selecciona agregar extensin
Se crea un acceso directo en la barra de marcadores.
Pgina 30 de 35
Se activa Wave, haciendo click sobre el icono.
Seleccin de 3 pginas diferentes:

Identi.li
Pocosmegas.hd
Pgina 31 de 35
Cne.gob.ec/es
Preguntas:
1.
Qu es y para qu sirven las pautas WCAG 2.0?

WCAG(Web Content Accessibility Guidelines/ Pautas de Accesibilidad al
Contenido en la Web), estas pautas guan el diseo de pginas Web hacia
un diseo accesible, los principios son[3]:
Perceptible: Informacin e interfaces deben ser presentadas de modo
que el usuario pueda percibir toda la informacin presentada.
Operable: Referente a la navegabilidad dentro del contenido web.
Compresible: Navegabilidad e informacin entendibles por el usuario.
Pgina 32 de 35
Robusto: Contenido interpretado tanto por humanos como por

tecnologas.
2.
3.
Nombre dos ventajas y dos desventajas que Ud. encontr al usar

ACheker y WAVE.
Permiten hacer un anlisis exhaustivo de todo le cdigo y encontrar

fallas en el cdigo que afecten al diseo accesible.
Las herramientas de acceso offline cargan de manera ms rpida el

anlisis.
El diseador debe tener en cuenta los errores, y aceptar las

correcciones que piense necesarias.
De cada herramienta, nombre las caractersticas que considera ms

tiles.
Achecker:
Anlisis offline.
Almacenamiento en base de datos.
Especificacin de los errores y posibles soluciones.
Wave:
4.
No necesita la instalacin de ningn software para su

funcionamiento.
Etiquetas de color, que permiten identificar las diferentes

caractersticas del sitio evaluado.
Compare los reportes que generan ACheker y Wave. En que se

parecen? En que se diferencian?
Semejanza:
Muestran el detalle las lneas que incumplen las pautas para el

diseo accesible.
Aaden sugerencias, de cmo solucionar el problema.
Pgina 33 de 35
Analizan el cdigo de manera esttica.
Diferencias:
5.
Wave utiliza etiquetas de color, las cuales ayudan a identificar los

fallos ms graves y los leves.
Cules son los defectos ms recurrentes que encontr en los sitios

analizados? Cmo se corrigen estos defectos?
La falta de etiquetas que definan con un texto alternativo el tipo de elemento
(etiqueta alt).
Se agrega la etiqueta alt=Texto que describa el objeto
No interpreta los estilos, y si se utilizan iconos css, estos no son
reconocidos. No son errores que perjudiquen a la accesibilidad.
3. Anlisis de resultados:
El anlisis de las pginas web denota que evala ciertos tipos de
discapacidad, por ejemplo la ceguera, discapacidades como el daltonismo
no pueden ser evaluadas, ya que no verifica si los colores utilizados en la
pgina web pueden ser percibidos por personas con dicha discapacidad.
Se hace nfasis en las etiquetas, ya que este es el problema que se nota
con frecuencia en la mayora de las pginas web.
La utilizacin de nuevos lenguajes como css para dar estilo a la pgina, no
son tomados en cuenta, ya que si se utiliza este lenguaje el analizador lo
sealara como un error no identificado, dentro de la base de normas de
accesibilidad.
A ms de esto no se puede verificar si las pginas son internacionalizadas,
ya que estos analizadores, solo verifican que la pgina web posea las
etiquetas y estndares que se alinean a las pautas de la accesibilidad,
pero no asegurar el correcto cumplimiento de las mismas. A ms de esto no
se puede verificar si las pginas son internacionalizadas, ya que estos
analizadores, solo verifican que se posee las etiquetas y estndares que se
cumplen las pautas de la accesibilidad, pero no aseguran el correcto
cumplimiento de las mismas.
4. Conclusiones y recomendaciones:
Un diseo que responda a las pautas de accesibilidad y usabilidad,
ayuda a que las pginas sean visitadas por ms personas.
Pgina 34 de 35
La modificacin de sitios que no se alinean a las pautas de accesibilidad

puede requerir un gran esfuerzo.
Las paginas sin etiquetas y con un alto contenido multimedia son las
menos accesibles por usuarios finales.
Achecker es un web servicie que necesita de la instalacin y
configuracin de un servidor.
La utilizacin de Achecker online es menos eficiente, pero est ms
actualizada, que la versin offline.
Wave utiliza cdigos de colores que facilitan la comprensin de las faltas
y cumplimientos de las pautas de accesibilidad.
Wave posee menos estndares de accesibilidad a comparacin de
Achecker.
Se debe comprar los errores que muestran loas analizadores ya que
muchos de estos pueden ser errores causa del uso de nuevas
tecnologas.
5. Bibliografa:
[1 Ministerio de Desarrollo Social Gobierno de Chile, SENADIS, Ministerio
] de Desarrollo Social Gobierno de Chile, 2014. [En lnea]. Available:
http://www.senadis.gob.cl/pag/356/596/accesibilidad_web. [ltimo
acceso: 14 Julio 2016].
[2 H. Lawton, Web Accessibility, W3C, Septiembre 2005. [En lnea].
] Available: http://www.w3c.es/Traducciones/es/WAI/intro/accessibility.
[ltimo acceso: 14 Julio 2016].
[3 H. Swan, OperaDev, Opera, 11 Diciembre 208. [En lnea]. Available:
] https://dev.opera.com/blog/wcag-2-0-is-now-official-2/. [ltimo acceso: 16
Julio 2016].
6. ANEXOS
Pgina 35 de 35

Evaluacion de Accesibilidad en Páginas Web

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Evaluacion de Accesibilidad en Páginas Web

Transféré par

Droits d'auteur :

Formats disponibles

Tema: Herramientas para automatizar pruebas de usabilidad y accesibilidad

Es una herramienta que permite a los desarrolladores web realizar su

WebService utilizado para anlisis de

3.2. ESQUEMAS DE FUNCIONAMIENTO DE LAS HERRAMIENTAS

PROCEDIMIENTO CON CAPTURAS DE PANTALLAS

Se debe dar permisos de ejecucin para lo cual se presiona en permitir.

Verificar el funcionamiento del servidor ingresando a la direccin

Seleccionar Install y aceptar los trminos de uso:

Las credenciales son mostradas en la parte inferior:

Se agrega un nuevo usuario, para lo cual se ingresa en Usuarios, y luego

Ingresar los Achecker en nombre y contrasea.

Se selecciona Crear base de datos con el mismo nombre y otorgar todos

Se presiona en guardar y se verifica la creacin del usuario y de la base

Se regresa a la instalacin y se ingresa la informacin requerida

El cual muestra un error, para lo cual se debe copiar la instruccin sql y

La instalacin continuara mostrando todo lo que ser configurado:

En la siguiente pantalla presionar en siguiente.

Ingresar la informacin que requiere el siguiente formulario en este caso

Nos mostrara en directorio temporal en el cual se almacenara la

La siguiente pantalla nos muestra la validacin de la existencia de la

La informacin que se muestra a continuacin es un resumen de

Una vez finalizada la

Se da click en login y se ingresa las credenciales creadas, en este caso

Se debe ingresar la direccin URl a ser verificada, y seleccionar Check it

Para la correccin de ese error se debe ir al documento que nos dice y

Se guarda los cambios y se ingresa de nuevo la url y verificar la

Se puede verificar toda la informacin de los errores en la base de datos

Pegar el link de la pgina web a ser evaluada en este caso la del

Se puede utilizar las diferentes funcionalidades que nos otorga Wave en

2.3. CODIGOS FUENTE Y ARCHIVOS

<p class="text-muted">Que sus dispositivos le trasladen a otro

<li><a href="#"><i class="fa fa-linkedin"></i></a>

<input type="text" class="form-control"

<li><a href="#">Privacy Policy</a>

RESOLUCIN DE PREGUNTAS Y PROBLEMAS

Se copia el archivo de Achecker dentro de la carpeta hdocs de XAMPP

Se ingresa en la ruta localhost:8090/Achecker/install

Se ingresa a la phpmyadmin y se crea el usuario y la base de datos Achecker,

Se crea el usuario y se le da los permisos para la creacin de la base de datos,

Se instala y modifica los archivos pertinentes y se ejecuta el analizador.

Se selecciona la opcin HTML File Update, y se ingresa el archivo html a ser

Se carga el archivo y se ejecuta el anlisis.

Se analiza si se debe modificar las lneas, y se prosigue con los cmabios.

Se vuelve a analizar el archivo html.

Se selecciona agregar extensin

Se crea un acceso directo en la barra de marcadores.

Se activa Wave, haciendo click sobre el icono.

Seleccin de 3 pginas diferentes:

Qu es y para qu sirven las pautas WCAG 2.0?

Robusto: Contenido interpretado tanto por humanos como por

Nombre dos ventajas y dos desventajas que Ud. encontr al usar

Permiten hacer un anlisis exhaustivo de todo le cdigo y encontrar

Las herramientas de acceso offline cargan de manera ms rpida el

El diseador debe tener en cuenta los errores, y aceptar las

De cada herramienta, nombre las caractersticas que considera ms

Almacenamiento en base de datos.

Especificacin de los errores y posibles soluciones.

No necesita la instalacin de ningn software para su

Etiquetas de color, que permiten identificar las diferentes

Compare los reportes que generan ACheker y Wave. En que se

Muestran el detalle las lneas que incumplen las pautas para el

Aaden sugerencias, de cmo solucionar el problema.

Analizan el cdigo de manera esttica.