APP+: La Web Accesible

Plataforma que contiene una adaptacin de los sitios web

presentndolos con una interfaz unificada, simple e intuitiva,
enfocada en la accesibilidad para usuarios con diferentes
limitaciones.
Pacifico, Sofa; Tormo, Fernando; Martnez, Alejandro

Introduction

Tim Berners-Lee, el creador de Internet, sostiene que el poder de la web est en su

universalidad. El acceso a la misma por cualquier persona, independientemente de su
discapacidad, es un aspecto esencial.
Sin embargo, hoy en da esto no parece cumplirse en la mayora de los sitios web a
pesar de algn esfuerzo aislado de instituciones y empresas que implementan algn
tipo de solucin. Entre ellas se pueden mencionar a Lotura, LinkedIN, Instituto
ITEAM (Uni. Politcnica de Valencia), el portar ConcentraRedes, etc.
De acuerdo con cifras de la Organizacin Mundial de la Salud y el Banco Mundial[1],
un 15% de la poblacin en el planeta presenta alguna discapacidad intelectual. De
ellas, el 70% vive en pases en vas de desarrollo y poco ms del 40% son pobres y no
tienen acceso a servicios de salud e integracin social, es decir que existen ms de
1.000 millones de personas que podran ser potenciales usuarios de esta herramienta.
En la argentina existen aproximadamente 5 millones de personas con diferentes tipos
de incapacidades[2] son las que no pueden utilizar por algn motivo u otro la Web
ya que sus barreras son muy altas;
En la ltima dcada los usuarios de Internet mundiales han pasado de 361 millones en
el ao 2000 a 2,4 mil millones de internautas en el mundo en 2012, lo que supone un
incremento de un 566%. Gran parte del crecimiento se ha producido en pases emergentes o en vas de desarrollo como son aquellos situados en Asia o Latinoamrica.
El objetivo fundamental del grupo es desarrollar una plataforma que contenga los
sitios web con una interfaz accesible que les permita a las personas con diferentes
limitaciones utilizar estos sitios. Esta interfaz tiene como principal caracterstica la
posibilidad de que los usuarios interacten de manera ms fluida y clara mediante
mensajes de voz en lugar de mensajes de texto e imgenes y figuras en lugar de palabras logrando de esta manera una mayor comunicacin e interaccin entre todos.
Nuestro objetivo es lograr reducir las barreras y complejidades que hoy en da presentan todas las pginas web.

adfa, p. 1, 2011.
Springer-Verlag Berlin Heidelberg 2011

Marco terico

2.1

Qu es la accesibilidad web?

La accesibilidad web es la posibilidad efectiva de que el mayor nmero de personas

puedan acceder de manera satisfactoria a web y hacer uso de sus contenidos, independientemente de cualquier limitacin personal o derivada del entorno, es decir, en
igualdad de condiciones y oportunidades con el conjunto de la sociedad. En lo concreto, la accesibilidad web refiere un conjunto de estndares de diseo y de software
pensados especficamente para que personas con discapacidad (fsica, sensorial, cognitiva, etc.), edad avanzada, dificultades derivadas del contexto de uso (tcnicas o
ambientales), insuficiencia de medios, restricciones en cuanto al dominio del idioma y
poca o nula experiencia en el uso de dispositivos electrnicos, puedan utilizar los
contenidos y servicios de los sitios web, interactuando en forma productiva con ellos.
En este sentido, a travs del desarrollo de sitios web conformes a dichos estndares,
se procura extender al mbito digital el derecho constitucional de acceso igualitario a
la cultura, al ocio y al tiempo libre.

2.2

Rol de APP+

App+ encuadra el abordaje de la accesibilidad web en el marco del Plan Nacional

Contra la Discriminacin (Decreto Nacional 1086/2005)[3] que fundamenta su trabajo; por ello, inscribe en trminos de polticas de inclusin a todas aquellas adecuaciones, modificaciones y transformaciones de elementos tecnolgicos y comunicacionales, necesarias para que todas las personas con discapacidad, minusvalas o diferencias en el uso de sus capacidades puedan desempearse ejerciendo sus derechos y con
el mayor nivel de satisfaccin, eficacia y provecho personal. Actuando en conformidad con la Ley de Accesibilidad de la Informacin en las Pginas Web (noviembre de
2010)[4] que rige tanto para los entes que pertenecen al Estado como para los entes
pblicos no estatales, las empresas privadas concesionarias de servicios pblicos y las
empresas prestadoras o contratistas de bienes y servicios. El proyecto tiene como
principal objetivo la adecuacin de sitios web a los estndares acordados internacionalmente para garantizar el acceso de todas las personas a sus contenidos, sin importar sus condiciones fsicas, tcnicas o materiales. Con vistas a reducir la brecha digital, tal como prescribe la nueva ley de accesibilidad web, y en directa continuidad con
los lineamientos del Gobierno Nacional en materia de inclusin digital (programas
Conectar Igualdad y Argentina Conectada), app+ propone un diseo de sitios web que
presenta un lenguaje visual fcilmente comprensible, con contenidos accesibles y
mecanismos de navegacin al alcance de cualquier persona, posibilitando la interaccin desde cualquier tipo de hardware, software, infraestructura de red, idioma, cultura, localizacin geogrfica y capacidad diferencial

2.3

Ventajas

Al desarrollar sitios web accesibles, encontramos, entre otras ventajas, la igualdad de

uso que el propio sitio provee. Es decir, es fcil de usar y adecuado para todas las
personas independientemente de sus conocimientos, experiencias, capacidades y habilidades.
Asimismo, el desarrollo utiliza requisitos accesibles, adems de permitir y mejorar
el acceso de las personas con discapacidad a los contenidos Web, posee otras ventajas
adicionales, como las mencionadas por el Instituto Nacional de Tecnologas de la
Comunicacin (INTECO) de Espaa en su Gua prctica de comprobacin de accesibilidad[5]:
Simplifica el desarrollo: ciertas condiciones y requisitos tcnicos que hacen a la
accesibilidad de un sitio web contribuyen a mejorar los procesos de desarrollo.
Conceptos como separacin de contenido y presentacin, o el uso de estndares,
facilitan el desarrollo y mantenimiento. Otras ventajas derivadas son una mejor reutilizacin de los recursos y la disminucin de la carga de los servidores.
Facilita la independencia de dispositivo y la inter-operabilidad: la Accesibilidad
Web permite alcanzar un buen nivel de interaccin mediante diferentes dispositivos o configuraciones segn las caractersticas o preferencias de los usuarios.
Aumenta la usabilidad: los sitios Web accesibles son, en general, ms usables
para todo el mundo. Conceptos como la sencillez, la facilidad de manejo y navegacin, y la eficiencia se manejan en ambas disciplinas.
Mejora el acceso en general: las mejoras de usabilidad, de navegacin, de estructuracin, etc., asociadas a la accesibilidad, constituyen valores en s mismos que benefician a todos los usuarios de la web en general.
Aumenta el pblico objetivo: al mejorar el acceso a los contenidos web de forma
general, no se excluyen grupos de personas que potencialmente pueden formar parte de los usuarios de nuestras pginas web, lo cual puede redundar en un aumento
de las visitas y, por tanto, de los beneficios.
Mejora la indexacin en los buscadores: la necesidad de proporcionar equivalentes
textuales, as como la estructuracin y la semntica de los contenidos, tiene como
resultado el enriquecimiento de la informacin de la web de forma que los contenidos pueden ser indexados ms efectivamente por los buscadores.
2.4

Ms usuarios, ms beneficiarios

La accesibilidad de las pginas web es de vital importancia, en primera medida, para

personas ciegas o con baja visin que utilizan software de lectura de pantalla para
navegar por Internet. Si la codificacin de las pginas web no es correcta, el software
no puede interpretar adecuadamente los contenidos y el acceso se ve limitado. Esto
restringe no slo la posibilidad de acceso a la informacin publicada, sino tambin la
realizacin de trmites y servicios on-line, la utilizacin de servicios web de comunicacin y, en general, toda la amplia gama de funcionalidades que ofrece Internet en la
actualidad.

Los estndares accesibles tambin incluyen especificaciones que permiten la utilizacin de las herramientas de Internet por parte de personas con baja visin o con
afecciones particulares, como el daltonismo.
El cumplimiento de estas recomendaciones permite, adems, el acceso de personas
con discapacidades motrices que no pueden utilizar dispositivos de entrada estndares
(teclado, mouse), y de usuarios en entornos tecnolgicos con restricciones, que utilizan software o hardware antiguo, equipos mviles con pantallas pequeas, conexiones
lentas, etc.
Tambin presenta avances para aquellos usuarios con insuficiencia de medios, que
acceden a los servicios de Internet mediante equipos y conexiones con capacidades
limitadas, para usuarios que no dominen completamente el idioma, y para usuarios
inexpertos o que presentan inseguridad frente a la utilizacin de diversos dispositivos
electrnicos.
2.5

Cundo es accesible un sitio web?

Las Pautas de Accesibilidad al Contenido en la Web (WCAG)[6] son una especificacin del W3C (World Wide Web Consortium)[7] que proporciona una gua sobre la
accesibilidad de los sitios de la Web[8] para las personas con discapacidad. Han sido
desarrolladas por la Iniciativa de Accesibilidad en la Web (WAI) del W3C.
Las pautas describen cmo hacer pginas Web accesibles sin sacrificar el diseo,
ofreciendo esa flexibilidad que es necesaria para que la informacin sea accesible en
diferentes situaciones y proporcionando mtodos que permiten su transformacin en
pginas tiles e inteligibles.
La especificacin contiene catorce pautas, que son los principios generales para el
diseo accesible, y cada una est asociada a uno o ms puntos de verificacin que
describen cmo aplicar esa pauta a las caractersticas particulares de las pginas web.
Cada punto de verificacin est asignado a uno de los tres niveles de prioridad establecidos por las pautas:
Prioridad 1: son aquellos puntos que un desarrollador web tiene que cumplir ya
que, de lo contrario, ciertos grupos de usuarios no podran acceder a la informacin
del sitio web.
Prioridad 2: son aquellos puntos que un desarrollador web debera cumplir ya que,
si no fuese as, a ciertos grupos de usuarios les sera muy difcil el acceso a la informacin.
Prioridad 3: son aquellos puntos que un desarrollador web debera cumplir ya que,
de otra forma, algunos usuarios experimentaran ciertas dificultades para acceder a
la informacin.
En funcin de estos puntos de verificacin se establecen los niveles de conformidad:
Nivel de Conformidad A: todos los puntos de verificacin de prioridad 1 se satisfacen.

 Nivel de Conformidad Doble A: todos los puntos de verificacin de prioridad 1 y

2 se satisfacen.
Nivel de Conformidad Triple A: todos los puntos de verificacin de prioridad 1,
2 y 3 se satisfacen.
2.6

Legislacin

La Ley de Accesibilidad de la Informacin en las Pginas Web es un primer paso

hacia la adecuacin de la legislacin argentina a la Convencin sobre los Derechos de
las Personas con Discapacidad, aprobada por la Ley 25.280 del ao 2008[9]. En su
artculo 4, la Convencin compromete a los Estados Partes a adoptar todas las medidas legislativas, administrativas y de otra ndole que sean pertinentes para hacer
efectivos los derechos que en ella se reconocen, y en su artculo nueve seala que a
fin de que las personas con discapacidad puedan vivir en forma independiente y participar plenamente en todos los aspectos de la vida, los Estados Partes adoptarn las
medidas pertinentes para asegurar el acceso de las personas con discapacidad, en
igualdad de condiciones con las dems, al entorno fsico, al transporte, a la informacin y a las comunicaciones, incluyendo el acceso a los sistemas y las tecnologas
de la informacin, y a las comunicaciones.
De modo que, adems de ser un avance en el resguardo de los derechos de las personas con discapacidad, la ley de accesibilidad web contribuye a reducir la brecha
digital. En este sentido, la ley se articula de un modo virtuoso con las polticas pblicas de inclusin digital que est llevando adelante el Gobierno Nacional, como los
programas Conectar Igualdad y Argentina Conectada, ya que suma a la disponibilidad
de equipamiento y a la ampliacin de la conectividad la accesibilidad de los contenidos.

Marco metodolgico y tecnolgico

Hoy en da los sitios web la mayora de los sitios web, entre ellos Facebook, Twitter,
Youtube, La Nacin, etc, nos proveen su Apis, (Application Programming Interface),
la cual permite el acceso directo a los datos publicados en cada sitio desde cualquier
aplicacin. Usa una interfaz RESTful y retorna los datos en formato JSON. Estas nos
permiten no solo a acceder a su informacin, sino tambin nos habilita a utilizar muchsimos mtodos de sus principales funcionalidades.
Las APIs[10] ofrecen una capa de abstraccin, es decir, encapsulan sus mecanismos internos en funciones y procedimientos que utilizamos brindndonos parmetros
y obteniendo un resultado.
Ejemplo de los que nos proveen algunas de las Apis
La API de YouTube[11] nos permite modificar el aspecto y las funciones del reproductor de videos. Tambin es posible crear nuevas aplicaciones que permitan

generar, buscar o clasificar videos en YouTube a travs de una interfaz propia. Esto nos permite crear una interfaz accesible. La API brinda funciones para obtener
informacin sobre usuarios y videos.
Google Maps[12] permite insertar mapas en nuestro sitio web. Pero la opcin ms
interesante es la de modificar los mapas agregando informacin (como puntos geogrficos o recorridos de inters), grficos y videos propios, adems de funciones
interactivas.
Flickr[13] habilita una generosa coleccin de mtodos para el manejo de fotografas, galeras, favoritos, grupos, foros de consulta e informacin de usuario.
Twitter[14] autoriza la integracin de la plataforma con sitios web pero tambin
nos permite crear aplicaciones que procesen informacin sobre el timeline, el flujo
de tweets en tiempo real, los mensajes directos, las listas de favoritos y muchos
otros aspectos.
La API de Facebook[15] brinda grandes herramientas para los accesos a sus funcionalidades desde ver amigos y fotos hasta enviar mensajes en tiempo real.

Gracias a estas Apis nosotros mostramos toda esta informacin que obtenemos de
una manera ms intuitiva, simple y accesible. No modificamos los datos, nada ms lo
mostramos de una manera diferente, bajo conceptos de accesibilidad, usabilidad y
experiencia de usuario, cumpliendo con los estndares web de la w3c.
La figura muestra cmo a partir de las Apis se fue construyendo una arquitectura
a partir de la utilizacin de frameworks de construccin y soluciones para el acceso
funcional y representacin de las componentes hipermediales. Para este propsito se
utiliz tecnologa para JavaScript con la colaboracin de frameworks Express de
NODE.JS, implementando el patrn Modelo Vista Controlador a travs del framework Angular.js. Para el almacenamiento de datos se utiliz JQuery. El contenido de
las pginas Web se implement a travs de HTML5. Las dems componentes intervienen para el agregado de funcionalidades y propiedades de accesibilidad anteriormente mencionadas.
La (figura 1) muestra la arquitectura de las tecnologas que utilizamos para realizar
esta aplicacin.

Fig. 1. Arquitectura de las tecnologas utilizadas para armar AP

La interfaz funciona como conector entre los datos almacenados en los diferentes
sitios webs y el usuario (figura 2).
El medio para enlazar los mismos es la API que proveen los sitios web. A continuacin se brindan los detalles relevantes de la tecnologa utilizada y la forma de
adaptarla a los objetivos de este trabajo.

Fig. 2. Muestra la conexin entre las Apis y nuestra interfaz.

3.1

Extraccin de datos mediante las Apis

La mayora de los sitios web proveen sus propias Apis para la reutilizacin de sus
habituales servicios. En este caso se utilizaron para la implementacin de las siguientes prestaciones:
Login: nos permite utilizar la autenticacin del usuario y contrasea especificados
al ingresar a las diferentes redes sociales.
Social plugins: es la posibilidad de contar con los diferentes botones.
Graph API: nos permitir obtener la mayor cantidad de informacin sobre el usuario. (amigos, ubicacin geogrfica, posts)
Nuestra plataforma utilizar JavaScript como lenguaje de interpretacin de las funcionalidades ejecutadas desde el cliente.
3.2

Tecnologas

API (siglas de Application Programming Interface) es un conjunto de reglas (cdigo) y especificaciones que las aplicaciones pueden seguir para comunicarse entre
ellas: sirviendo de interfaz entre programas diferentes de la misma manera en que la
interfaz de usuario facilita la interaccin humano-software. Las API son valiosas, ante
todo, porque permiten hacer uso de funciones ya existentes en otro software (o de la
infraestructura ya existente en otras plataformas) para no estar reinventando la rueda
constantemente, reutilizando as cdigo que se sabe que est probado y que funciona

correctamente. En el caso de herramientas propietarias (es decir, que no sean de cdigo abierto), son un modo de hacer saber a los programadores de otras aplicaciones
cmo incorporar una funcionalidad concreta sin por ello tener que proporcionar informacin acerca de cmo se realiza internamente el proceso.
Node.js[16](de ahora en adelante Node) es un entorno JavaScript de lado de servidor que utiliza un modelo asncrono y dirigido por eventos.
Node usa el motor de JavaScript V8 de Google, el cual es actualizado constantemente y es uno de los intrpretes ms rpidos que puedan existir en la actualidad para
cualquier lenguaje dinmico, como es JavaScript. Esto nos permite mantener muchas
conexiones abiertas y esperando, como por ejemplo pasa en un chat. Tambin node
especialmente bueno en aplicaciones web que necesiten una conexin persistente con
el navegador del cliente. Mediante una serie de tcnicas llamadas Comet, es una peticin HTTP mantenida abiertamente que permite a un servidor web enviar datos a un
navegador por Tecnologa Push, sin que el navegador los solicite explcitamente, con
esto se puede hacer una aplicacin que enve datos al usuario en tiempo real; es decir,
que el navegador mantenga la conexin siempre abierta y reciba continuamente nuevos datos cuando los haya, lo que nos permite por ejemplo actualizar automticamente las novedades de un muro o tus nuevos posts.
Angular.js[17], este pequeo framework que permite construir aplicaciones usando Javascript siguiendo el patrn MVC (modelo-vista-controlador).
Est construido en torno a la creencia de que la programacin declarativa es la que
debe utilizarse para generar interfaces de usuario y enlazar componentes de software,
mientras que la programacin imperativa es excelente para expresar la lgica de negocio. Este framework adapta y ampla el HTML tradicional para servir mejor contenido dinmico a travs de un data-binding bidireccional que permite la sincronizacin
automtica de modelos y vistas. Como resultado, AngularJS pone menos nfasis en la
manipulacin del DOM y mejora la testeabilidad y el rendimiento.
Los objetivos de diseo:
Disociar la manipulacin del DOM de la lgica de la aplicacin. Esto mejora la
capacidad de prueba del cdigo.
Considerar a las pruebas de la aplicacin como iguales en importancia a la escritura de la aplicacin. La dificultad de las pruebas se ve reducida dramticamente por
la forma en que el cdigo est estructurado.
Disociar el lado del cliente de una aplicacin del lado del servidor. Esto permite
que el trabajo de desarrollo avance en paralelo, y permite la reutilizacin de ambos
lados.
Guiar a los desarrolladores a travs de todo el camino de la construccin de una
aplicacin: desde el diseo de la interfaz de usuario, a travs de la escritura de la
lgica del negocio, hasta las pruebas.
Angular sigue el patrn MVC de ingeniera de software y alienta la articulacin
flexible entre la presentacin, datos y componentes lgicos. Con el uso de la inyec-

cin de dependencias, Angular lleva servicios tradicionales del lado del servidor, tales
como controladores dependientes de la vista, a las aplicaciones web del lado del cliente. En consecuencia, gran parte de la carga en el backend se reduce, lo que conlleva a
aplicaciones web mucho ms ligeras. Tambin nos proporciona una forma para trabajar con servicios REST desde las Apis para la recuperacin y actualizacin de datos
de los modelos que sern guardados en el servidor.

Fig. 3. Relaciones entre los diferentes mdulos

En JavaScript, la interaccin con el usuario se consigue mediante la captura de los

eventos que ste produce. Un evento es una accin del usuario ante la cual puede
realizarse algn proceso, como por ejemplo, el pasar por arriba de una etiqueta, que se
encuentra en la aplicacin, la cual puede ser escuchada mediante un mensaje de voz.
Los eventos se capturan mediante los manejadores de eventos. El proceso a realizar
se programa mediante funciones JavaScript llamadas por los manejadores de eventos.
Los ms utilizados por nosotros son mouseover, el que permite que la persona sepa
por ejemplo donde est el mouse, ya que a pasar por arriba de cada botn del panel
lateral se puede observar que el botn se agranda o tambin pasando por arriba de las
imgenes de tus amigos podes saber su nombre y apellido, mediante mensajes de voz
y tambin puedes ver un efecto de transicin y ver sus datos principales, como edad,
lugar donde vive, que estudia, etc.
HTML5, es la quinta revisin importante del lenguaje bsico de la World Wide
Web. Nos permite definir la estructura una pgina web.
El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.
CCS3, (Cascading Style Sheets) o las hojas de estilo en cascada tercera versin,
son las que nos ofrecen la posibilidad de definir las reglas y estilos de representacin
en diferentes dispositivos, ya sean pantallas de equipos de escritorio, porttiles, mviles, impresoras u otros dispositivos capaces de mostrar contenidos web. Las hojas de
estilo nos permiten definir de manera eficiente la representacin de nuestras pginas y
es uno de los conocimientos fundamentales que todo diseador web debe manejar a la
perfeccin para realizar su trabajo.

Bootstrap[18], es framework de Twitter que permite crear interfaces web con CSS
y JavaScript que adaptan la interfaz dependiendo del tamao del dispositivo en el que
se visualice de forma nativa, es decir, automticamente se adapta al tamao de un
ordenador o de una Tablet sin que el usuario tenga que hacer nada, esto se denomina
diseo adaptable o Responsive Design.

Prototipos

Fig. 4. Prototipo de la Plataforma APP+, contiene los sitios web.

Fig. 5. Prototipo de Twitter+.

Referencias

1. Organizacin
Mundial
de
la
Salud
y
el
Banco
Mundial,
http://www.who.int/features/factfiles/disability/es/
2. Discapacidad en Argentina, http://www.pagina12.com.ar/diario/sociedad/3-257133-201410-09.html
3. Plan Nacional Contra la Discriminacin (Decreto Nacional 1086/2005),
http://www.legischubut2.gov.ar/digesto/lxl/I-533-ANEXO-A.pdf.
4. la Ley de Accesibilidad de la Informacin en las Pginas Web,
http://www.prensa.argentina.ar/2013/04/05/39599-reglamentaron-la-ley-de-acceso-a-laweb-de-personas-con-discapacidad.php.
5. Instituto Nacional de Tecnologas de la Comunicacin (INTECO) de Espaa, Gua prctica
de
comprobacin
de
accesibilidad,
http://www.urbal3.eu/uploads/noticias/07_comprobacion_de_la_accesibilidad_formularios.pdf.
6. Pautas
de
Accesibilidad
al
Contenido
en
la
Web,
http://www.sidar.org/traducciones/wcag20/es/
7. World Wide Web Consortium (W3C), http://www.w3c.es/
8. Guia de accesibilidad Web, http://w3c.es/Divulgacion/GuiasBreves/Accesibilidad
9. Legislacin argentina a la Convencin sobre los Derechos de las Personas con Discapacidad,
aprobada
por
la
Ley
25.280
del
ao
2008,
http://www.infoleg.gov.ar/infolegInternet/anexos/60000-64999/63893/norma.htm.
10. Api, http://www.ticbeat.com/tecnologias/que-es-una-api-para-que-sirve/
11. Youtube developer, documentacion sobre la api que provee youtube para el desarrollo de
una aplicacin, https://www.youtube.com/yt/dev/api-resources.html
12. Google developer, documentacin sobre la api que provee google para el desarrollo de una
aplicacin, https://developers.google.com/gmail/api/
13. Flickr developer, documentacin sobre la api que provee twitter para el desarrollo de una
aplicacin, https://www.flickr.com/services/developer
14. Twitter developer, documentacin sobre la api que provee twitter para el desarrollo de una
aplicacin https://dev.twitter.com/
15. Facebook developer, documentacion sobre la api que provee facebook para el desarollo de
una aplicacin https://developers.facebook.com/
16. Node.js, https://nodejs.org/
17. Anjular.js, https://angularjs.org/
18. Bootstrap, http://getbootstrap.com/