Está en la página 1de 35

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

<span class="icon-bar"></span>
<span class="icon-bar"></span>
</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="container">
<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="container">
<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>
<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-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>
<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-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="container">
<div class="row">
<div class="col-lg-12 text-center">
<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 class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal2" 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/startup-framework.png" class="imgresponsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Startup Framework</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal3" class="portfolio-link" datatoggle="modal">

Pgina 19 de 35

alt="">

<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/treehouse.png" class="img-responsive"

</a>
<div class="portfolio-caption">
<h4>Treehouse</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal4" 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/golden.png" class="img-responsive"
alt="">
</a>
<div class="portfolio-caption">
<h4>Golden</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
!-- About Section -->
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<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 class="timeline-image">
<img class="img-circle img-responsive"
src="img/about/2.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Planificacin</h4>
<h4 class="subheading">La organizacin</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Tomar en cuenta lo que es mas
importante para el usuario.</p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive"
src="img/about/3.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Desarrollo</h4>
<h4 class="subheading">Trabajo en Equipo</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Trabajamos en equipo con el fin
de cumplir con las fechas establecidas.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive"
src="img/about/4.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>Entrega</h4>
<h4 class="subheading">Satisfaccin para
usuario.</h4>
</div>
<div class="timeline-body">
<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>
<li class="timeline-inverted">
<div class="timeline-image">
<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="container">
<div class="row">
<div class="col-lg-12 text-center">
<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>
<div class="col-sm-4">
<div class="team-member">
<img src="img/team/2.jpg" class="img-responsive img-circle"
alt="">
<h4>Larry Parker</h4>
<p class="text-muted">Lead Marketer</p>
<ul class="list-inline social-buttons">
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="team-member">
<img src="img/team/3.jpg" class="img-responsive img-circle"
alt="">
<h4>Christian Castillo</h4>
<p class="text-muted">Desarrollador</p>
<ul class="list-inline social-buttons">
<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><a href="#"><i class="fa fa-linkedin"></i></a>


</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="container">
<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>
<div class="col-md-3 col-sm-6">
<a href="#">
<img src="img/logos/designmodo.jpg" class="img-responsive
img-centered" alt="">
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#">
<img src="img/logos/themeforest.jpg" class="img-responsive
img-centered" alt="">
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="#">
<img src="img/logos/creative-market.jpg" class="imgresponsive img-centered" alt="">
</a>
</div>
</div>
</div>
</aside>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<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="col-md-6">
<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>
<div class="form-group">
<input type="email" class="form-control"
placeholder="Su Email *" id="email" required data-validation-requiredmessage="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="tel" class="form-control" placeholder="Su
Telefono *" id="phone" required data-validation-required-message="Please
enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<textarea class="form-control" placeholder="Su
Mensaje *" id="message" required data-validation-required-message="Please
enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="clearfix"></div>
<div class="col-lg-12 text-center">
<div id="success"></div>
<button type="submit" class="btn btn-xl">Enviar
Mensaje</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="copyright">Copyright &copy; Your Website
2014</span>
</div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a
href="https://www.facebook.com/pages/Autekse/1640817652827233"><i
class="fa fa-facebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
<div class="col-md-4">
<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="container">
<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="container">
<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