adfa, p. 1, 2011.

© Springer-Verlag Berlin Heidelberg 2011

APP+: La Web Accesible

Plataforma que contiene una adaptación de los sitios web

presentándolos con una interfaz unificada, simple e intuitiva,

enfocada en la accesibilidad para usuarios con diferentes

limitaciones.

Pacifico, Sofía; Tormo, Fernando; Martínez, Alejandro

1 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 día esto no parece cumplirse en la mayoría de los sitios web a

pesar de algún esfuerzo aislado de instituciones y empresas que implementan algún

tipo de solución. Entre ellas se pueden mencionar a Lotura, LinkedIN, Instituto

ITEAM (Uni. Politécnica de Valencia), el portar ConcentraRedes, etc.

De acuerdo con cifras de la Organización Mundial de la Salud y el Banco Mundial[1],

un 15% de la población en el planeta presenta alguna discapacidad intelectual. De

ellas, el 70% vive en países en vías de desarrollo y poco más del 40% son pobres y no

tienen acceso a servicios de salud e integración social, es decir que existen más de

1.000 millones de personas que podrían 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 algún motivo u otro la “Web”

ya que sus barreras son muy altas;

En la última década los usuarios de Internet mundiales han pasado de 361 millones en

el año 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 países emer-

gentes o en vías de desarrollo como son aquellos situados en Asia o Latinoamérica.

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 característica la

posibilidad de que los usuarios interactúen de manera más fluida y clara mediante

mensajes de voz en lugar de mensajes de texto e imágenes y figuras en lugar de pala-

bras logrando de esta manera una mayor comunicación e interacción entre todos.

Nuestro objetivo es lograr reducir las barreras y complejidades que hoy en día presen-

tan todas las páginas web.

2 Marco teórico

2.1 ¿Qué es la accesibilidad web?

La accesibilidad web es la posibilidad efectiva de que el mayor número de personas

puedan acceder de manera satisfactoria a web y hacer uso de sus contenidos, indepen-

dientemente de cualquier limitación personal o derivada del entorno, es decir, en

igualdad de condiciones y oportunidades con el conjunto de la sociedad. En lo concre-

to, la accesibilidad web refiere un conjunto de estándares de diseño y de software

pensados específicamente para que personas con discapacidad (física, sensorial, cog-

nitiva, etc.), edad avanzada, dificultades derivadas del contexto de uso (técnicas o

ambientales), insuficiencia de medios, restricciones en cuanto al dominio del idioma y

poca o nula experiencia en el uso de dispositivos electrónicos, puedan utilizar los

contenidos y servicios de los sitios web, interactuando en forma productiva con ellos.

En este sentido, a través del desarrollo de sitios web conformes a dichos estándares,

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 Discriminación (Decreto Nacional 1086/2005)[3] que fundamenta su traba-

jo; por ello, inscribe en términos de políticas de inclusión a todas aquellas adecuacio-

nes, modificaciones y transformaciones de elementos tecnológicos y comunicaciona-

les, necesarias para que todas las personas con discapacidad, minusvalías o diferen-

cias en el uso de sus capacidades puedan desempeñarse ejerciendo sus derechos y con

el mayor nivel de satisfacción, eficacia y provecho personal. Actuando en conformi-

dad con la Ley de Accesibilidad de la Información en las Páginas Web (noviembre de

2010)[4] —que rige tanto para los entes que pertenecen al Estado como para los entes

públicos no estatales, las empresas privadas concesionarias de servicios públicos y las

empresas prestadoras o contratistas de bienes y servicios—. El proyecto tiene como

principal objetivo la adecuación de sitios web a los estándares acordados internacio-

nalmente para garantizar el acceso de todas las personas a sus contenidos, sin impor-

tar sus condiciones físicas, técnicas o materiales. Con vistas a reducir la brecha digi-

tal, tal como prescribe la nueva ley de accesibilidad web, y en directa continuidad con

los lineamientos del Gobierno Nacional en materia de inclusión digital (programas

Conectar Igualdad y Argentina Conectada), app+ propone un diseño de sitios web que

presenta un lenguaje visual fácilmente comprensible, con contenidos accesibles y

mecanismos de navegación al alcance de cualquier persona, posibilitando la interac-

ción desde cualquier tipo de hardware, software, infraestructura de red, idioma, cultu-

ra, localización geográfica 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 fácil de usar y adecuado para todas las

personas independientemente de sus conocimientos, experiencias, capacidades y ha-

bilidades.

Asimismo, el desarrollo utiliza requisitos accesibles, además 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 Tecnologías de la

Comunicación (INTECO) de España en su Guía práctica de comprobación de accesi-

bilidad[5]:

Simplifica el desarrollo: ciertas condiciones y requisitos técnicos que hacen a la

accesibilidad de un sitio web contribuyen a mejorar los procesos de desarrollo.

Conceptos como separación de contenido y presentación, o el uso de estándares,

facilitan el desarrollo y mantenimiento. Otras ventajas derivadas son una mejor re-

utilización de los recursos y la disminución de la carga de los servidores.

Facilita la independencia de dispositivo y la inter-operabilidad: la Accesibilidad

Web permite alcanzar un buen nivel de interacción mediante diferentes dispositi-

vos o configuraciones según las características o preferencias de los usuarios.

Aumenta la usabilidad: los sitios Web accesibles son, en general, más “usables”

para todo el mundo. Conceptos como la sencillez, la facilidad de manejo y navega-

ción, y la eficiencia se manejan en ambas disciplinas.

Mejora el acceso en general: las mejoras de usabilidad, de navegación, de estructu-

ración, etc., asociadas a la accesibilidad, constituyen valores en sí mismos que be-

nefician a todos los usuarios de la web en general.

Aumenta el público objetivo: al mejorar el acceso a los contenidos web de forma

general, no se excluyen grupos de personas que potencialmente pueden formar par-

te de los usuarios de nuestras páginas web, lo cual puede redundar en un aumento

de las visitas y, por tanto, de los beneficios.

Mejora la indexación en los buscadores: la necesidad de proporcionar equivalentes

textuales, así como la estructuración y la semántica de los contenidos, tiene como

resultado el enriquecimiento de la información de la web de forma que los conteni-

dos pueden ser indexados más efectivamente por los buscadores.

2.4 Más usuarios, más beneficiarios

La accesibilidad de las páginas web es de vital importancia, en primera medida, para

personas ciegas o con baja visión que utilizan software de lectura de pantalla para

navegar por Internet. Si la codificación de las páginas web no es correcta, el software

no puede interpretar adecuadamente los contenidos y el acceso se ve limitado. Esto

restringe no sólo la posibilidad de acceso a la información publicada, sino también la

realización de trámites y servicios on-line, la utilización de servicios web de comuni-

cación y, en general, toda la amplia gama de funcionalidades que ofrece Internet en la

actualidad.

Los estándares accesibles también incluyen especificaciones que permiten la utili-

zación de las herramientas de Internet por parte de personas con baja visión o con

afecciones particulares, como el daltonismo.

El cumplimiento de estas recomendaciones permite, además, el acceso de personas

con discapacidades motrices que no pueden utilizar dispositivos de entrada estándares

(teclado, mouse), y de usuarios en entornos tecnológicos con restricciones, que utili-

zan software o hardware antiguo, equipos móviles con pantallas pequeñas, conexiones

lentas, etc.

También 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 utilización de diversos dispositivos

electrónicos.

2.5 ¿Cuándo es accesible un sitio web?

Las “Pautas de Accesibilidad al Contenido en la Web” (WCAG)[6] son una especifi-

cación del W3C (World Wide Web Consortium)[7] que proporciona una guía 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 cómo hacer páginas Web accesibles sin sacrificar el diseño,

ofreciendo esa flexibilidad que es necesaria para que la información sea accesible en

diferentes situaciones y proporcionando métodos que permiten su transformación en

páginas útiles e inteligibles.

La especificación contiene catorce pautas, que son los principios generales para el

diseño accesible, y cada una está asociada a uno o más puntos de verificación que

describen cómo aplicar esa pauta a las características particulares de las páginas web.

Cada punto de verificación está asignado a uno de los tres niveles de prioridad es-

tablecidos 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 podrían acceder a la información

del sitio web.

─ Prioridad 2: son aquellos puntos que un desarrollador web debería cumplir ya que,

si no fuese así, a ciertos grupos de usuarios les sería muy difícil el acceso a la in-

formación.

─ Prioridad 3: son aquellos puntos que un desarrollador web debería cumplir ya que,

de otra forma, algunos usuarios experimentarían ciertas dificultades para acceder a

la información.

En función de estos puntos de verificación se establecen los niveles de conformi-

dad:

Nivel de Conformidad “A”: todos los puntos de verificación de prioridad 1 se satis-

facen.

Nivel de Conformidad “Doble A”: todos los puntos de verificación de prioridad 1 y

2 se satisfacen.

Nivel de Conformidad “Triple A”: todos los puntos de verificación de prioridad 1,

2 y 3 se satisfacen.

2.6 Legislación

La Ley de Accesibilidad de la Información en las Páginas Web es un primer paso

hacia la adecuación de la legislación argentina a la Convención sobre los Derechos de

las Personas con Discapacidad, aprobada por la Ley 25.280 del año 2008[9]. En su

artículo 4, la Convención compromete a los Estados Partes a adoptar todas las me-

didas legislativas, administrativas y de otra índole que sean pertinentes para hacer

efectivos los derechos que en ella se reconocen, y en su artículo nueve señala que a

fin de que las personas con discapacidad puedan vivir en forma independiente y par-

ticipar plenamente en todos los aspectos de la vida, los Estados Partes adoptarán las

medidas pertinentes para asegurar el acceso de las personas con discapacidad, en

igualdad de condiciones con las demás, al entorno físico, al transporte, a la infor-

mación y a las comunicaciones, incluyendo el acceso a los sistemas y las tecnologías

de la información, y a las comunicaciones.

De modo que, además de ser un avance en el resguardo de los derechos de las per-

sonas 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 políticas públi-

cas de inclusión 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 ampliación de la conectividad la accesibilidad de los conteni-

dos.

3 Marco metodológico y tecnológico

Hoy en día los sitios web la mayoría de los sitios web, entre ellos Facebook, Twitter,

Youtube, La Nación, etc, nos proveen su Apis’, (Application Programming Interface),

la cual permite el acceso directo a los datos publicados en cada sitio desde cualquier

aplicación. Usa una interfaz RESTful y retorna los datos en formato JSON. Estas nos

permiten no solo a acceder a su información, sino también nos habilita a utilizar mu-

chísimos métodos de sus principales funcionalidades.

Las APIs[10] ofrecen una capa de abstracción, es decir, encapsulan sus mecanis-

mos internos en funciones y procedimientos que utilizamos brindándonos parámetros

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 re-

productor de videos. También es posible crear nuevas aplicaciones que permitan

generar, buscar o clasificar videos en YouTube a través de una interfaz propia. Es-

to nos permite crear una interfaz accesible. La API brinda funciones para obtener

información sobre usuarios y videos.

Google Maps[12] permite insertar mapas en nuestro sitio web. Pero la opción más

interesante es la de modificar los mapas agregando información (como puntos geo-

gráficos o recorridos de interés), gráficos y videos propios, además de funciones

interactivas.

Flickr[13] habilita una generosa colección de métodos para el manejo de fotogra-

fías, galerías, favoritos, grupos, foros de consulta e información de usuario.

Twitter[14] autoriza la integración de la plataforma con sitios web pero también

nos permite crear aplicaciones que procesen información 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 fun-

cionalidades desde ver amigos y fotos hasta enviar mensajes en tiempo real.

Gracias a estas Apis’ nosotros mostramos toda esta información que obtenemos de

una manera más intuitiva, simple y accesible. No modificamos los datos, nada más lo

mostramos de una manera diferente, bajo conceptos de accesibilidad, usabilidad y

experiencia de usuario, cumpliendo con los estándares web de la w3c.

La figura muestra cómo a partir de las Apis’ se fue construyendo una arquitectura

a partir de la utilización de frameworks de construcción y soluciones para el acceso

funcional y representación de las componentes hipermediales. Para este propósito se

utilizó tecnología para JavaScript con la colaboración de frameworks Express de

NODE.JS, implementando el patrón Modelo Vista Controlador a través del frame-

work Angular.js. Para el almacenamiento de datos se utilizó JQuery. El contenido de

las páginas Web se implementó a través de HTML5. Las demás componentes inter-

vienen para el agregado de funcionalidades y propiedades de accesibilidad anterior-

mente mencionadas.

La (figura 1) muestra la arquitectura de las tecnologías que utilizamos para realizar

esta aplicación.

Fig. 1. Arquitectura de las tecnologías 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 conti-

nuación se brindan los detalles relevantes de la tecnología utilizada y la forma de

adaptarla a los objetivos de este trabajo.

Fig. 2. Muestra la conexión entre las Apis’ y nuestra interfaz.

3.1 Extracción de datos mediante las Apis’

La mayoría de los sitios web proveen sus propias Apis’ para la reutilización de sus

habituales servicios. En este caso se utilizaron para la implementación de las siguien-

tes prestaciones:

Login: nos permite utilizar la autenticación del usuario y contraseña 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 información sobre el usua-

rio. (amigos, ubicación geográfica, posts)

Nuestra plataforma utilizará JavaScript como lenguaje de interpretación de las fun-

cionalidades ejecutadas desde el cliente.

3.2 Tecnologías

API (siglas de ‘Application Programming Interface’) es un conjunto de reglas (có-

digo) 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 interacción 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í código que se sabe que está probado y que funciona

correctamente. En el caso de herramientas propietarias (es decir, que no sean de códi-

go abierto), son un modo de hacer saber a los programadores de otras aplicaciones

cómo incorporar una funcionalidad concreta sin por ello tener que proporcionar in-

formación acerca de cómo se realiza internamente el proceso.

Node.js[16](de ahora en adelante Node) es un entorno JavaScript de lado de servi-

dor que utiliza un modelo asíncrono y dirigido por eventos.

Node usa el motor de JavaScript V8 de Google, el cual es actualizado constante-

mente y es uno de los intérpretes más rápidos que puedan existir en la actualidad para

cualquier lenguaje dinámico, como es JavaScript. Esto nos permite mantener muchas

conexiones abiertas y esperando, como por ejemplo pasa en un chat. También node

especialmente bueno en aplicaciones web que necesiten una conexión persistente con

el navegador del cliente. Mediante una serie de técnicas llamadas Comet, es una peti-

ción HTTP mantenida abiertamente que permite a un servidor web enviar datos a un

navegador por Tecnología Push, sin que el navegador los solicite explícitamente, con

esto se puede hacer una aplicación que envíe datos al usuario en tiempo real; es decir,

que el navegador mantenga la conexión siempre abierta y reciba continuamente nue-

vos datos cuando los haya, lo que nos permite por ejemplo actualizar automáticamen-

te las novedades de un muro o tus nuevos posts.

Angular.js[17], este pequeño framework que permite construir aplicaciones usan-

do Javascript siguiendo el patrón MVC (modelo-vista-controlador).

Está construido en torno a la creencia de que la programación declarativa es la que

debe utilizarse para generar interfaces de usuario y enlazar componentes de software,

mientras que la programación imperativa es excelente para expresar la lógica de ne-

gocio. Este framework adapta y amplía el HTML tradicional para servir mejor conte-

nido dinámico a través de un data-binding bidireccional que permite la sincronización

automática de modelos y vistas. Como resultado, AngularJS pone menos énfasis en la

manipulación del DOM y mejora la testeabilidad y el rendimiento.

Los objetivos de diseño:

Disociar la manipulación del DOM de la lógica de la aplicación. Esto mejora la

capacidad de prueba del código.

Considerar a las pruebas de la aplicación como iguales en importancia a la escritu-

ra de la aplicación. La dificultad de las pruebas se ve reducida dramáticamente por

la forma en que el código está estructurado.

Disociar el lado del cliente de una aplicación del lado del servidor. Esto permite

que el trabajo de desarrollo avance en paralelo, y permite la reutilización de ambos

lados.

Guiar a los desarrolladores a través de todo el camino de la construcción de una

aplicación: desde el diseño de la interfaz de usuario, a través de la escritura de la

lógica del negocio, hasta las pruebas.

Angular sigue el patrón MVC de ingeniería de software y alienta la articulación

flexible entre la presentación, datos y componentes lógicos. Con el uso de la inyec-

ción de dependencias, Angular lleva servicios tradicionales del lado del servidor, tales

como controladores dependientes de la vista, a las aplicaciones web del lado del clien-

te. En consecuencia, gran parte de la carga en el backend se reduce, lo que conlleva a

aplicaciones web mucho más ligeras. También nos proporciona una forma para traba-

jar con servicios REST desde las Apis’ para la recuperación y actualización de datos

de los modelos que serán guardados en el servidor.

Fig. 3. Relaciones entre los diferentes módulos

En JavaScript, la interacción con el usuario se consigue mediante la captura de los

eventos que éste produce. Un evento es una acción del usuario ante la cual puede

realizarse algún proceso, como por ejemplo, el pasar por arriba de una etiqueta, que se

encuentra en la aplicación, 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 más 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 botón del panel

lateral se puede observar que el botón se agranda o también pasando por arriba de las

imágenes de tus amigos podes saber su nombre y apellido, mediante mensajes de voz

y también puedes ver un efecto de transición y ver sus datos principales, como edad,

lugar donde vive, que estudia, etc.

HTML5, es la quinta revisión importante del lenguaje básico de la World Wide

Web. Nos permite definir la estructura una página 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 versión,

son las que nos ofrecen la posibilidad de definir las reglas y estilos de representación

en diferentes dispositivos, ya sean pantallas de equipos de escritorio, portátiles, móvi-

les, impresoras u otros dispositivos capaces de mostrar contenidos web. Las hojas de

estilo nos permiten definir de manera eficiente la representación de nuestras páginas y

es uno de los conocimientos fundamentales que todo diseñador web debe manejar a la

perfección 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 tamaño del dispositivo en el que

se visualice de forma nativa, es decir, automáticamente se adapta al tamaño de un

ordenador o de una Tablet sin que el usuario tenga que hacer nada, esto se denomina

diseño adaptable o Responsive Design.

4 Prototipos

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

Fig. 5. Prototipo de Twitter+.

5 Referencias

1. Organización 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-2014-

10-09.html

3. Plan Nacional Contra la Discriminación (Decreto Nacional 1086/2005),

http://www.legischubut2.gov.ar/digesto/lxl/I-533-ANEXO-A.pdf.

4. la Ley de Accesibilidad de la Información en las Páginas Web,

http://www.prensa.argentina.ar/2013/04/05/39599-reglamentaron-la-ley-de-acceso-a-la-

web-de-personas-con-discapacidad.php.

5. Instituto Nacional de Tecnologías de la Comunicación (INTECO) de España, Guía prácti-

ca de comprobación de accesibilidad, http://www.urb-

al3.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. Legislación argentina a la Convención sobre los Derechos de las Personas con Discapaci-

dad, aprobada por la Ley 25.280 del año 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 aplicación, https://www.youtube.com/yt/dev/api-resources.html

12. Google developer, documentación sobre la api que provee google para el desarrollo de una

aplicación, https://developers.google.com/gmail/api/

13. Flickr developer, documentación sobre la api que provee twitter para el desarrollo de una

aplicación, https://www.flickr.com/services/developer

14. Twitter developer, documentación sobre la api que provee twitter para el desarrollo de una

aplicación https://dev.twitter.com/

15. Facebook developer, documentacion sobre la api que provee facebook para el desarollo de

una aplicación https://developers.facebook.com/

16. Node.js, https://nodejs.org/

17. Anjular.js, https://angularjs.org/

18. Bootstrap, http://getbootstrap.com/