Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de...

23
Usabilidad y accesibilidad de sitios web Hugo Carrión Mayo, 2012

Transcript of Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de...

Page 1: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

Usabilidad y accesibilidad de sitios web

Hugo Carrión Mayo, 2012

Page 2: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

2

Contenido

Usabilidad y accesibilidad de sitios web ....................................................................................... 3 Descripción del curso ................................................................................................................ 3 Objetivos .................................................................................................................................... 3 ContenidoIntroducción y diseño centrado en el usuario (2 horas) ............................................ 3 Dirigido a .................................................................................................................................... 3 Requisitos del participante ......................................................................................................... 4 Metodología ............................................................................................................................... 4 Evaluación ................................................................................................................................. 4

Introducción y diseño centrado en el usuario ................................................................................ 5 Diseño de soluciones web ......................................................................................................... 5

Arquitectura de la información ....................................................................................................... 7 Audiencia ................................................................................................................................... 7 Organización de la información ................................................................................................. 7 Sistemas de navegación ............................................................................................................ 8 Diseño conceptual ..................................................................................................................... 9 Diseño visual. Página de inicio ................................................................................................ 10

Criterios de usabilidad web ......................................................................................................... 12 Conceptos generales. Su necesidad en el diseño web ........................................................... 12 Diseño de página. Separación del contenido y el formato ...................................................... 13 Los tiempos de respuestas en un sitio web ............................................................................. 14 Usabilidad en los enlaces web ................................................................................................ 14 El diseño de contenido ............................................................................................................ 15 La simplicidad en el diseño web .............................................................................................. 15 La usabilidad en el proceso de desarrollo web ....................................................................... 16

Evaluación de la usabilidad web ................................................................................................. 18 Introducción ............................................................................................................................. 18 Evaluación heurística ............................................................................................................... 18 Evaluación de usuarios ............................................................................................................ 18 Criterios y formas para evaluación .......................................................................................... 19 Uso de herramientas para la evaluación ................................................................................. 19

Criterios de accesibilidad web ..................................................................................................... 20 Terminología ............................................................................................................................ 20 Pautas de accesibilidad al contenido en la web ...................................................................... 20 Iniciativa de Accesibilidad Web – WAI .................................................................................... 20 Soluciones de accesibilidad ..................................................................................................... 21 Recursos para la accesibilidad ................................................................................................ 22

Page 3: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

3

Usabilidad y accesibilidad de sitios web

Descripción del curso En la actualidad el uso generalizado de internet para el acceso a información, realización de transacciones y la comunicación en general, exigen que los sitios web sean más atractivos y funcionalmente más eficientes. En este contexto la usabilidad web es de vital importancia para asegurar la accesibilidad, la interactividad y operatividad necesaria para que la experiencia del usuario sea satisfactoria.

Objetivos El participante al culminar el curso estará en capacidad de:

• Conocer la terminología y definiciones en torno al concepto de la usabilidad web. • Entender los fundamentos del diseño centrado en el usuario y la arquitectura de la

información como conceptos habilitadores de la usabilidad web. • Incorporar criterios de usabilidad en el desarrollo de soluciones web.

Contenido • Introducción y diseño centrado en el usuario (2 horas) • Diseño de soluciones web • El papel del usuario • Metodología de DCU

Arquitectura de la información (4 horas)

• Audiencia • Organización de la información • Sistemas de navegación • Diseño conceptual • Página de inicio

Criterios de usabilidad web (8 horas)

• Conceptos generales. Su necesidad en el diseño web • Diseño de página. Separación del contenido y el formato • Actualización en el uso de tecnologías • Los tiempos de respuestas en un sitio web • Usabilidad en los enlaces web • El diseño de contenido • Animaciones, video y audio • La simplicidad en el diseño web • La usabilidad en el proceso de desarrollo web

Evaluación de la usabilidad web (6 horas)

• Evaluación heurística • Evaluación de usuarios • Criterios y formas para evaluación • Uso de herramientas para la evaluación

Criterios Accesibilidad (4 horas)

• Terminología • Pautas de accesibilidad al contenido en la web • Iniciativa de Accesibilidad Web – WAI • Soluciones de accesibilidad • Recursos para la accesibilidad

Dirigido a Profesionales de la informática y la comunicación responsables del diseño y mantenimiento de sitios web institucionales.

Page 4: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

4

Requisitos del participante Los participantes deben tener conocimientos sólidos de informática básica y tener experiencia en la navegación web y uso de servicios web.

Metodología Se empleará una metodología de taller la cual permitirá que cada participante pueda asimilar los conceptos mediante la práctica. La metodología consiste principalmente en la facilitación del curso con un enfoque totalmente práctico y participativo, que facilitará el acercamiento y conocimiento a la usabilidad web. Se presentarán exposiciones sobre los fundamentos teóricos las mismas que serán interactivas, se despejarán las dudas e inquietudes el momento que se presenten.

Evaluación La evaluación de los participantes consistirá en:

• Presentación de proyecto grupal • Examen final

Page 5: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

5

Introducción y diseño centrado en el usuario Temas a tratar • Diseño de soluciones web • El papel del usuario • Metodología de DCU

Diseño de soluciones web El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web y páginas web. No es simplemente una aplicación del diseño convencional, ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen, enlaces y vídeo. Se lo considera dentro del diseño multimedia. La unión de un buen diseño con una jerarquía bien elaborada de contenidos aumenta la eficiencia de la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos, característica destacable del medio. El diseño web ha visto amplia aplicación en los sectores comerciales de Internet especialmente en la World Wide Web. Asimismo, a menudo la web se utiliza como medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra. El diseño de páginas web trata básicamente de realizar un documento con información hiperenlazado con otros documentos y asignarle una presentación para diferentes dispositivos de salida (en una pantalla de computador, en papel, en un teléfono móvil, etc). Estos documentos o páginas web pueden ser creadas:

• Creando archivos de texto en HTML, PHP, Asp, Aspx, JavaScript, JSP, Python, Ruby.

• Utilizando un programa WYSIWYG o WYSIWYM de creación de páginas. • utilizando lenguajes de programación del lado servidor para generar la página web.

Etapas Para el diseño de páginas web debemos tener en cuenta tres etapas:

• La primera, es el diseño visual de la información que se desea editar. En esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un bosquejo o prediseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.

• La segunda, es la estructura y relación jerárquica de las páginas del sitio web, una

vez que se tiene este boceto se pasa a 'escribir' la página web. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertexto o HTML. Los enlaces que aparecen subrayados son hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con información relacionada. La importancia de la estructura y arborescencia web radica en que los visitantes no siempre entran por la página principal o inicial y en ese caso el sitio debe darle la respuesta a lo que busca rápido, además permitirle navegar por el sitio.

• La tercera, etapa consiste en el posicionamiento en buscadores o SEO. Ésta

consiste en optimizar la estructura del contenido para mejorar la posición en que aparece la página en determinada búsqueda.

Page 6: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

6

El HTML consta de una serie de elementos que estructuran el texto y son presentados en forma de hipertexto por agente de usuario o navegadores. Esto se puede hacer con un simple editor de textos (debe guardarse como texto plano, sin ningún tipo de formato y con extensión .html o .htm). Aprender HTML es relativamente fácil, así que es sencillo crear páginas web de este modo. Esta era la única manera de generarlas hasta que aparecieron, a mediados de 1996, algunos editores visuales de HTML, como MS FrontPage y Adobe Dreamweaver. Con estas herramientas no es necesario aprender HTML (aunque sí aconsejable), con lo cual el desarrollador se concentra en lo más importante, el diseño del documento. Todo esto teniendo en cuenta el nivel de programación en el diseño de las aplicaciones y del impacto visual que se quiere generar en el usuario.

Fundamentos Un correcto diseño web implica conocer cómo se deben utilizar cada uno de los elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de los estándares establecidos por la W3C y en lo referente a la web semántica. Debido a la permisibilidad de algunos navegadores web como Internet Explorer, esta premisa original se ha perdido. Por ejemplo, este navegador permite que no sea necesario cerrar las etiquetas del marcado, utiliza código propietario, etc. Esto impide que ese documento web sea universal e independiente del medio que se utilice para ser mostrado. La web semántica, por otra parte, aboga por un uso lógico de los elementos según el significado para el que fueron concebidas. Por ejemplo se utilizará el elemento <P> para marcar párrafos, y <TABLE> para tabular datos (nunca para disponer de manera visual los diferentes elementos del documento). En su última instancia, esto ha supuesto una auténtica revolución en el diseño web puesto que apuesta por separar totalmente el contenido del documento de la visualización. De esta forma se utiliza el documento HTML únicamente para contener, organizar y estructurar la información y las hojas de estilo CSS para indicar como se mostrará dicha información en los diferentes medios (como por ejemplo, una pantalla de computadora, un teléfono móvil, impreso en papel, leída por un sintetizador de voz, etc.). Por lógica, esta metodología beneficia enormemente la accesibilidad del documento.

Accesibilidad El diseño web debe seguir unos requerimientos mínimos de accesibilidad web que haga que sus sitios web o aplicaciones puedan ser visitados por el mayor número de personas. Para conseguir estos objetivos de accesibilidad se han desarrollado pautas como las del W3C: Pautas de accesibilidad al contenido Web 1.0 WCAG.

1. Conocer a fondo a los usuarios finales, normalmente usando investigación cualitativa o investigación cuantitativa

2. Diseñar un producto que resuelva sus necesidades y se ajuste a sus capacidades, expectativas y motivaciones

3. Poner a prueba lo diseñado, normalmente usando test de usuario

Page 7: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

7

Arquitectura de la información Temas a tratar

Audiencia

Organización de la información

Sistemas de navegación

Diseño conceptual

Página de inicio

Audiencia A continuación se hacen algunas definiciones de audiencia, las que, sin importar las características del sitio, siempre deberán estar presentes, y por lo mismo, deben traducirse en acciones para poder atenderlas adecuadamente.

Por capacidad física: la audiencia del sitio incluirá personas con discapacidades físicas, por lo que una de las metas que debe tener todo sitio es permitir el acceso de ellos, a través del cumplimiento de las normas de Accesibilidad que se han recomendado como estándares internacionales.

Por capacidad técnica: la audiencia que llegue al sitio se dividirá de acuerdo a la experiencia técnica que tenga; por ello se deben plantear accesos simples mediante enlaces y otros más complejos, por ejemplo, mediante el uso de buscador.

Por conocimiento de la institución: los usuarios del sitio se dividirán entre quienes conocen la institución y quienes no la conocen. Por lo anterior, los primeros siempre sabrán dónde buscar lo que necesitan usando la terminología, siglas y nombres de departamentos internos; los segundos, en tanto, no entenderán nada de la nomenclatura interna y les será muy difícil acceder a la información que se les ofrezca de esa manera.

Por necesidades de información: los usuarios del sitio también se dividirán entre quienes llegan a buscar contenidos determinados y quienes sólo llegan a ver si existe algo que les pueda servir en lo que estén realizando.

Por ubicación geográfica: dentro de la audiencia siempre habrá usuarios que ingresan al sitio web desde lugares diferentes, por lo que los contenidos deben responder también a esta diversidad.

Organización de la información Arquitectura de la Información (AI) es la disciplina y arte encargada del estudio, análisis, organización, disposición y estructuración de la información en espacios de información, y de la selección y presentación de los datos en los sistemas de información interactivos y no interactivos. En relación con la World Wide Web el Information Architecture Institute, define la Arquitectura de la Información como:

El diseño estructural en entornos de información compartida.

El arte y la ciencia de organizar y rotular sitios web, intranets, comunidades en línea y software para promover la usabilidad y la ubicabilidad (la característica de ser encontrado a través de las búsquedas en Internet).

Una comunidad emergente orientada a aplicar los principios del diseño y la arquitectura en el entorno digital.

La Arquitectura de la Información trata indistintamente del diseño de: sitios web, interfaces de dispositivos móviles o gadgets (como los lectores de mp3), CD interactivos, videoclips digitales, relojes, tableros de instrumentos de aviones de combate o civiles, interfaces de máquinas dispensadoras, interfaces de juegos electrónicos, etc. (Laverde, A. 2005)

Page 8: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

8

Su principal objetivo es facilitar al máximo los procesos de comprensión y asimilación de la información, así como las tareas que ejecutan los usuarios en un espacio de información definido. La "arquitectura de la información" es un proceso iterativo, transversal, que se da a lo largo de todo el diseño del sitio y en cada una de sus fases, para asegurarse de que los objetivos de su producción y del desarrollo de la interfaz se cumplen de manera efectiva. Con el fin de que la asimilación de contenidos por parte del usuario sea eficiente y efectiva, y para que el sitio sea accesible y usable, la Arquitectura de la Información como proceso en general, se encarga, durante el desarrollo de definir:

El objeto, propósito y fines del sistema de información o sitio

La definición del público objetivo y los estudios de la audiencia.

La realización de análisis competitivos.

El diseño de la interacción.

El diseño de la navegación, esquemas de organización y facetación de los contenidos

El etiquetado o rotulado de los contenidos para acceder a la información.

La planificación, gestión y desarrollo de contenidos.

La facilidad de búsqueda y el diseño de la interfaz de búsqueda.

La usabilidad.

La accesibilidad

El feedback del resultado y los procesos de reingeniería del sitio.

Sistemas de navegación Una pregunta que normalmente se hace un usuario al visitar un sitio web es “¿en dónde estoy?” El portal debe estar en la capacidad de mostrar en todo momento a los usuarios su ubicación dentro del sitio, no solo para responder esta pregunta, también debido a que los usuarios que acceden a una página interna a través de un motor de búsqueda querrán saber exactamente dónde están. Mostrar de forma clara al usuario el lugar donde se encuentra depende de varios sistemas de navegación. En ellos se debe indicar el lugar que ocupa la página actual dentro de toda la jerarquía de contenidos del portal. Algunos de los mecanismos de navegación que pueden indicar al usuario en dónde se encuentra son:

• Navegación global: En esta se debe mostrar la sección principal a la cual pertenece la página actual.

• Navegación de contexto: En esta se debe mostrar la sub sección o sub secciones a la cuales pertenece la página actual.

• Ruta de migas: Muestra al usuario el camino que debería recorrer para llegar desde la página de inicio hasta su ubicación actual.

• URL limpia: Una dirección clara también da una idea al usuario de las secciones a las cuales pertenece la página donde se encuentra.

Navegación global La navegación global está compuesta generalmente por las categorías principales o por el denominado “menú principal” del sitio web. Esta navegación responde a la necesidad concreta del usuario de saber a dónde dirigirse y lo que puede hacer dentro del sitio. Al presentar la estructura de navegación global se debe garantizar su consistencia, que aparezca de la misma forma y en la misma ubicación a lo largo de todo el sitio web. El ofrecer una navegación global consistente le permite al usuario contar con un mecanismo de navegación siempre presente, fácil de recordar y a la mano. Seguir esta práctica también reduce el fenómeno de las páginas huérfanas, páginas individuales en las cuales el usuario no puede establecer claramente a qué sitio pertenecen, y las opciones de navegación disponibles.

Page 9: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

9

Si no existe una navegación global consistente a lo largo de todo el sitio, se estará aumentando el riesgo de que el usuario se desoriente dentro del portal.

Navegación contextual La navegación de contexto indica al usuario los lugares del sitio a los que se puede dirigir dentro de su nivel de navegación actual o local. Este menú se presenta cuando el usuario visita las secciones principales del sitio y muestra las subsecciones o páginas que pertenecen a la sección principal actual. Un menú de opciones contextuales puede mejorar considerablemente la experiencia de usuario y hacer mucho más sencilla la exploración del sitio por parte del usuario. Como un estándar de facto el usuario espera encontrar el menú secundario o de contexto a un costado de la interfaz, sin embargo esquemas diferentes pueden funcionar siempre que sean claros y consistentes. Las secciones con grandes cantidades de información así como las estructuras de sitio profundas se pueden ver muy beneficiadas de la presencia de una navegación contextual.

Ruta de migas La ruta de migas es una lista de enlaces que se ubica generalmente en la parte superior de la página y que muestra la ruta que ha seguido el usuario hasta el lugar dónde se encuentra. Aunque es probable que el usuario haya ingresado a una página interna a través de un motor de búsqueda, la ruta de migas muestra también la jerarquía de contenidos del sitio y funciona como un mecanismo de navegación auxiliar. Incluir de forma adecuada una ruta de migas en un sitio web tiene los siguientes beneficios:

• Permite al usuario saber su ubicación actual dentro del sitio. • En caso de que el usuario haya seguido una ruta de navegación, responde a • las preguntas ¿dónde estoy? y ¿dónde he estado? • Reduce el riesgo de tener páginas huérfanas y permite al usuario acceder • fácilmente a secciones relacionadas.

Para que la ruta de migas sea coherente se debe garantizar que en todas las páginas corresponda fielmente a la jerarquía de contenidos del sitio, también es importante diseñarla de modo que sea reconocible, sencilla y fácil de usar.

URL Limpios El URL es el la abreviatura de Uniform Resource Locator (Localizador Uniforme de Recursos), es el nombre técnico con el que se conoce a la comúnmente llamada “dirección”. Un esquema de URL limpios tiene las siguientes características:

• Corresponde a la jerarquía del sitio • No incluye caracteres especiales como $, &, ?,= entre otros.

Presentar los URL de una manera limpia y ordenada puede ayudar al usuario a reconocer su ubicación dentro del sitio, incluso puede convertirse en un mecanismo de navegación que permita al usuario visitar la sección anterior en jerarquía. El posicionamiento en motores de búsqueda también se puede ver beneficiado por el cumplimiento de esta práctica, algunos como Google, muestran el URL en los resultados de búsqueda y lo toman en cuenta para generar los resultados de búsqueda. Un sitio web con URL limpios en general tiene un mejor aspecto y es un indicador de que el sitio se ha preocupado por seguir una convención de la web.

Diseño conceptual

Page 10: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

10

El objetivo de la fase de Diseño Conceptual es definir el esquema de organización, funcionamiento y navegación del sitio. No se especifica qué apariencia va a tener el sitio, sino que se centra en el concepto mismo del sitio: su arquitectura de información. Los sitios web son sistemas hipermedia formados por conjuntos de páginas interrelacionadas por enlaces unidireccionales, pudiendo cada una de estas páginas contener sub-elementos con entidad propia, contenidos multimedia y herramientas interactivas. La "estructura" del sitio web se refiere precisamente a las conexiones y relaciones entre páginas, a la topología de la red de páginas, así como a la granularidad de los elementos de información contenidos en las páginas; y la "navegación" a las posibilidades y forma en que cada página presenta las opciones de desplazamiento hacia otras páginas. La definición de la estructura del sitio puede hacerse desde dos enfoques diferentes y complementarios: aproximación descendente y ascendente. En la descendente se trata de estructurar del "todo" a las "partes", dividir los contenidos en páginas y definir los enlaces entre páginas. En la Ascendente, por el contrario, se definen los bloques mínimos de información, estructuración que va más allá de la propia segmentación de información en páginas. Una vez definida la estructuración del sitio es necesario documentarla, para así tener un modelo de referencia sobre el que sustentar el desarrollo del sitio. La forma de documentar arquitecturas se suele hacer a través de grafos y esquemas, con el objetivo de que sean de fácil y rápida comprensión por todos los miembros del equipo de desarrollo. Si la arquitectura es ascendente normalmente se documentará a través de diagramas entidad-relación. Por otro lado, cuando la arquitectura a documentar es la descendente, para sitios web proponemos el uso del vocabulario gráfico de Garret (2002). A través de unas sencillas convenciones gráficas para la diagramación de la arquitectura, podemos definir la estructura de la información así como la navegación del sitio. Otras tareas a llevar a cabo por el Arquitecto de Información o diseñador en la fase de Diseño Conceptual son: Definir sistemas de clasificación para los contenidos; Elaborar índices y mapas del sitio; Aplicar metadatos a cada una de las páginas y sub-elementos de información; y Definir el Sistema de Rotulado- Entre las técnicas de Diseño Centrado en el Usuario a aplicar en la etapa de Diseño Conceptual destacamos, por su utilidad y facilidad de ser llevada a cabo, la técnica de "card sorting" u ordenación de tarjetas. Ésta se basa en la observación de cómo los usuarios agrupan y asocian entre sí un número predeterminado de tarjetas etiquetadas con las diferentes categorías o secciones temáticas del sitio web. De esta forma, partiendo del comportamiento de los propios usuarios, es posible organizar y clasificar la información de un sitio web conforme a su modelo mental.

Diseño visual. Página de inicio En esta fase se especifica el aspecto visual del sitio web: composición de cada tipo de página, aspecto y comportamiento de los elementos de interacción y presentación de elementos multimedia. Con el objetivo de evitar la sobrecara informativa, en el diseño de cada interfaz se debe tener en cuenta el comportamiento del usuario en el barrido visual de la página, distribuyendo los elementos de información y navegación según su importancia en zonas de mayor o menor jerarquía visual - por ejemplo, las zonas superiores del interfaz poseen más jerarquía visual que las inferiores.

Además de la posición de cada elemento en la interfaz, existen otras técnicas para jerarquizar información como son: uso del tamaño y espacio ocupado por cada elemento para otorgarle importancia en la jerarquía visual, utilización del contraste de color para discriminar y distribuir

Page 11: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

11

información, uso de efectos tipográficos para enfatizar contenidos, rotura de la simetría y uso de efectos de relieve / profundidad para resaltar elementos, etc. Además de evitar la sobrecarga informativa jerarquizando los contenidos mediante las técnicas descritas, para evitar la sobrecarga memorística se recomienda definir menús de navegación con un número de opciones reducido, normalmente no más de nueve diferentes. Otro aspecto importante en el diseño visual del sitio es la accesibilidad. En el uso de colores, por ejemplo, se debe ofrecer suficiente contraste entre texto y fondo para no dificultar la lectura, e igualmente seleccionar combinaciones de colores teniendo siempre en cuenta las discapacidades visuales en la percepción del color que pudieran presentar nuestros usuarios. Al utilizar imágenes en el diseño, por motivos de accesibilidad y comprensibilidad, se debe cuidar su resolución y tamaño, así como en fotografías la no pérdida de significación o contexto por recorte o minimización excesiva de la imagen. Desde una perspectiva más amplia del diseño visual del sitio es importante mantener una coherencia y estilo común entre todas las páginas, proporcionando una consistencia visual a todo el sitio. Para asegurar que esta coherencia se cumple, es útil elaborar un libro o guía de estilo que sirva de documento referencia para todo el equipo de desarrollo.

Page 12: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

12

Criterios de usabilidad web Temas a tratar

• Conceptos generales. Su necesidad en el diseño web • Diseño de página. Separación del contenido y el formato • Los tiempos de respuestas en un sitio web • Usabilidad en los enlaces web • El diseño de contenido • La simplicidad en el diseño web • La usabilidad en el proceso de desarrollo web

Conceptos generales. Su necesidad en el diseño web A partir de la conceptualización llevada a cabo por la ISO, se infieren los principios básicos en los que se basa la usabilidad:

1. Facilidad de Aprendizaje: facilidad con la que nuevos usuarios desarrollan una interacción efectiva con el sistema o producto. Está relacionada con la predicibilidad, sintetización, familiaridad, la generalización de los conocimientos previos y la consistencia.

2. Facilidad de Uso: facilidad con la que el usuario hace uso de la herramienta, con

menos pasos o más naturales a su formación específica. Tiene que ver con la eficacia y eficiencia de la herramienta.

3. Flexibilidad: relativa a la variedad de posibilidades con las que el usuario y el sistema

pueden intercambiar información. También abarca la posibilidad de diálogo, la multiplicidad de vías para realizar la tarea, similitud con tareas anteriores y la optimización entre el usuario y el sistema.

4. Robustez: es el nivel de apoyo al usuario que facilita el cumplimiento de sus objetivos.

Está relacionada con la capacidad de observación del usuario, de recuperación de información y de ajuste de la tarea al usuario.

En informática, la usabilidad está muy relacionada con la accesibilidad, hasta el punto de que algunos expertos consideran que una forma parte de la otra o viceversa. Uno de estos expertos y gurú de la usabilidad en los entornos web es Jakob Nielsen, quien definió la usabilidad en el 2003 como "un atributo de calidad que mide lo fáciles de usar que son las interfaces web".

Otra definición clarificadora es la de Redish (2000), para quien es preciso diseñar sitios web para que los usuarios sean capaces de "encontrar lo que necesitan, entender lo que encuentran y actuar apropiadamente… dentro del tiempo y esfuerzo que ellos consideran adecuado para esa tarea". La usabilidad también está más relacionada con la ergonomía y los factores humanos. La ergonomía parte de los principios del diseño universal o diseño para todos. La buena ergonomía puede lograrse mediante el diseño centrado en el usuario (que no necesariamente dirigido por él), aunque se emplean diversas técnicas. El diseñador de ergonomía proporciona un punto de vista independiente de las metas de la programación porque el papel del diseñador es actuar como defensor del usuario. Por ejemplo, tras interactuar con los usuarios, el diseñador de ergonomía puede identificar necesidades funcionales o errores de diseño que no hayan sido anticipados. La ergonomía incluye consideraciones como:

• ¿Quiénes son los usuarios, cuáles sus conocimientos, y qué pueden aprender? • ¿Qué quieren o necesitan hacer los usuarios? • ¿Cuál es la formación general de los usuarios? • ¿Cuál es el contexto en el que el usuario está trabajando?

Page 13: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

13

• ¿Qué debe dejarse a la máquina? ¿Qué al usuario? • Las respuestas a estas preguntas pueden conseguirse realizando análisis de

usuarios y tareas al principio del proyecto. • Otras consideraciones incluyen: • ¿Pueden los usuarios realizar fácilmente sus tareas previstas? Por ejemplo,

¿pueden los usuarios realizar las tareas previstas a la velocidad esperada? • ¿Cuánta preparación necesitan los usuarios? • ¿Qué documentación u otro material de apoyo están disponible para ayudar al

usuario? ¿Puede éste hallar las respuestas que buscan en estos medios? • ¿Cuáles y cuántos errores cometen los usuarios cuando interactúan con el

producto? • ¿Puede el usuario recuperarse de los errores? ¿Qué han de hacer los usuarios

para recuperarse de los errores? ¿Ayuda el producto a los usuarios a recuperarse de los errores? Por ejemplo, ¿muestra el software mensajes de error informativos y no amenazantes?

• ¿Se han tomado medidas para cubrir las necesidades especiales de los usuarios con discapacidades? (Es decir, ¿se ha tenido en cuenta la accesibilidad?)

Beneficios de la usabilidad Entre los principales beneficios se encuentran:

• Reducción de los costes de aprendizaje. • Disminución de los costes de asistencia y ayuda al usuario. • Disminución en la tasa de errores cometidos por el usuario y del retrabajo. • Optimización de los costes de diseño, rediseño y mantenimiento. • Aumento de la tasa de conversión de visitantes a clientes de un sitio web. • Aumento de la satisfacción y comodidad del usuario. • Mejora la imagen y el prestigio. • Mejora la calidad de vida de los usuarios, ya que reduce su estrés, incrementa la

satisfacción y la productividad.

Diseño de página. Separación del contenido y el formato ¿Porqué es importante separar el contenido del formato?. Si lo hacemos, será fácil modificar o aplicar un nuevo diseño a la web sin tener que cambiar todas las páginas de la misma. Hay diversas estrategias para independizar el contenido y el diseño de la web. Veamos algunas:

Usar hojas de estilos CSS Hace unos años cuando diseñábamos una página con HTML estábamos obligados a mezclar el contenido (aquello que queremos expresar) con el formato de presentación. De esta manera era difícil aplicar normas de estilo coherentes y aún era más difícil mantener y hacer cambios de estilo en la web. Hoy en día todos los navegadores de Internet ya soportan la utilización de hojas de estilo CSS (Cascade Style Sheet). Con CSS podemos crear un fichero que incluye todos los formatos que hace servir nuestra web. De esta manera, concentramos en un único lugar, todas (o casi todas) las directrices de diseño de nuestra página web. Si hemos aplicado correctamente la norma de separación de forma y contenido, tendremos la garantía de que cambiando un determinado formato en la hoja de estilos CSS, el cambio se propagará en toda la web de forma coherente.

Usar una base de datos para hacer la gestión de contenidos Esta estrategia tiene ventajas más allá de la separación de diseño y contenido pero también ayuda en este objetivo. Si tenemos un sitio web con mucha información y además muy cambiante, una buena estrategia seria el decidir que el contenido del web se almacene en una base de datos de la web (por ejemplo en una base de datos MySql). Cuando los usuarios visitan una página de nuestro web, ésta hace una consulta a la base de datos y muestra el contenido. Aquí la separación de forma y contenido es muy clara. A estas páginas se les suele llamar como “páginas dinámicas” y suelen estar programadas en lenguajes de programación como el PHP.

Page 14: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

14

La principal ventaja de este sistema es que facilita el mantenimiento del contenido de la web ( a través de sencillos formularios de entrada de información) y sobretodo que permite a usuarios no técnicos el mantenimiento de la información ofrecida por el sitio web. Ejemplos típicos de aplicación de esta estrategia lo encontramos en sitios web que ofrecen un catálogo de productos o servicios amplio y cambiante.

Los tiempos de respuestas en un sitio web Un sitio web que tarda demasiado tiempo en cargar eventualmente puede ser abandonado por el usuario. La respuesta rápida de un sitio está relacionada con la necesidad que tiene el visitante de recibir una respuesta a sus acciones en un tiempo prudente. Las páginas que tardan demasiado en cargar pueden dar la impresión de que se encuentran fuera del aire, y los usuarios que tengan conexiones a internet demasiado lentas podrían decidir buscar en algún otro sitio que les proporcione lo que buscan sin esperas. El rendimiento es también un factor que aporta a la experiencia de usuario. Un portal rápido es percibido en algunas ocasiones como un portal más fácil de utilizar. Google decidió incluir en su algoritmo de ordenamiento para el motor búsqueda, el tiempo que tardan los sitios web en cargar. La razón la resumieron en las siguientes palabras: “Los sitios rápidos producen usuarios felices, y hemos visto en nuestros estudios que cuando un sitio responde lentamente, los visitantes gastan menos tiempo en él.” Google y Yahoo, ofrecen herramientas para evaluar el rendimiento de una página, y obtener recomendaciones. Estas herramientas son gratuitas y están disponibles en línea.

Usabilidad en los enlaces web Los enlaces son parte esencial de internet. Representan la conexión entre dos páginas o contenidos y son el principio básico de la navegación. Por su importancia en la experiencia de usuario, los enlaces deben ser claros, reconocibles y sin lugar a ambigüedades. Algunas sugerencias a tener en cuenta para garantizar buenos enlaces son:

• Usar títulos de enlaces significativos, que indiquen claramente el contenido al cual conducen.

• Emplear un lenguaje sencillo y cercano al usuario en la formulación de enlaces. No usar terminología técnica ni lenguaje especializado.

• No usar palabras como “haga clic”, el usuario ya sabe que los enlaces son para hacer clic en ellos.

• Utilizar en el enlace las palabras mínimas necesarias para que el usuario comprenda su propósito. Los enlaces cortos son más fáciles de escanear y leer.

Ejemplos de enlaces mal formulados:

✗ Ir a la sección de noticias

✗ Haga click aquí para descargar el instructivo de impuesto predial

✗ Para ingresar al sistema de trámites en lineas haga click aquí

Los mismos ejemplos con correcciones:

✔ Visite nuestra sección de Noticias

✔ Descargar el instructivo de impuesto predial

✔ Ingresar al sistema de trámites en línea

Page 15: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

15

En sus inicios, los navegadores diferenciaban los textos de enlace, a través del subrayado y el color (azul). De esta manera, los usuarios se acostumbraron a que cuando observaban un texto subrayado y azul, significaba que era un enlace. Con el invento de las hojas de estilo en cascada CSS, los diseñadores pudieron quitarle a los enlaces el subrayado y, además, ponerle subrayado a los textos (aunque no fueran enlaces). El resultado: un usuario confundido, que no diferencia un enlace de un texto normal. Se debe evitar el uso del subrayado para destacar algún texto no hipervinculado. Si se trata de destacar dicho texto, el diseñador puede recurrir a otro tipo de cambios tipográficos, como el énfasis moderado (etiqueta <em>)o el énfasis fuerte (etiqueta <strong>).

El diseño de contenido En el diseño de contenidos hipermedia se debe mantener un equilibrio entre lo que serían contenidos que no aprovechasen las nuevas posibilidades hipertexto y multimedia, y lo que serían contenidos caóticos o desorientativos debido a un uso excesivo y no sosegado de las posibilidades hipermedia. Sin prescindir de las capacidades que ofrece el nuevo medio, de lo que se trata es de diseñar contenidos interrelacionados y vinculados, manteniendo cierta coherencia informativa, comunicacional y organizativa. La escritura hipertextual se debe realizar de forma diferente a la tradicional. El nuevo medio y sus características obligan a ser concisos, precisos, creativos y estructurados a la hora de redactar. Debemos conocer a quién nos dirigimos y adaptar el lenguaje, tono y vocabulario utilizado al usuario objetivo. Algunos consejos a seguir en el diseño y redacción de contenidos son:

• Seguir una estructura piramidal : La parte más importante del mensaje, el núcleo, debe ir al principio.

• Permitir una fácil exploración del contenido : El lector en entornos Web, antes de empezar a leer, suele explorar visualmente el contenido para comprobar si le interesa.

• Un párrafo = una idea : Cada párrafo es un objeto informativo. Se deben trasmitir ideas, mensajes... evitando párrafos vacíos o varios mensajes en un mismo párrafo.

• Ser conciso y preciso : Al lector no le gusta leer en pantalla. • Vocabulario y lenguaje : Se debe utilizar el mismo lenguaje del usuario, no el de la

empresa o institución. El vocabulario debe ser sencillo y fácilmente comprensible. • Tono: Cuanto más familiar y cercano (sin llegar a ser irrespetuoso) sea el tono

empleado, más fácil será que el lector preste atención. • Confianza: La mejor forma de ganarse la confianza del lector es permitiéndole el

diálogo, así como conocer cuanta más información posible acerca del autor.

La simplicidad en el diseño web Para obtener un buen diseño web hay que eliminar los elementos innecesarios tanto de diseño, contenido como de código. Un diseño basado en la simplicidad tiene las de ganar frente a uno recargado. A continuación propongo una serie de consejos para cumplir este objetivo:

1. Que el sitio web sea fácil de navegar Las secciones y páginas no deben ser demasiadas y ni los elementos de navegación. Por ejemplo, lo apropiado sería tener sólo un menú principal de navegación. Debemos proporcionar al usuario lo que busca de una forma sencilla, sin complicar las rutas y con el menor número de clics posible.

Page 16: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

16

2. Pocos elementos aumentan la velocidad de carga de la página Una página repleta de imágenes pesadas y multitud de menús, haría que el usuario abandonara la página o incluso en los peores casos la maldijera. El tiempo de espera es un factor muy importante a la hora de crear una actitudes en los usuarios.

3. Contenido fácilmente escaneable De un primer vistazo, se deben reconocer la mayoría de los contenidos del site y qué es lo que van a encontrar en él. Debemos evitar los contenidos ocultos en todo momento. Los sitios deben ser amigables para el usuario, como en un hotel, que si la estancia ha sido satisfactoria, hay muchas posibilidades de regresar.

4. Las webs sencillas son más fáciles de construir y diseñar No es aconsejable ni laberintos ni códigos enrevesados.

5. Crea hojas de estilo para el código con estilos optimizados. Seguro que de los 300 estilos que has creado, hay estilos duplicados. Elimínalos.

6. El tamaño de las cosas sí importa. Optimiza el tamaño de las imágenes, esto implica tener más espacio en el servidor y por consiguiente poder obtener más visitas sin que se caiga. Ahora hay que llevarlo a cabo en cada diseño, eliminando elementos decorativos innecesarios y preguntándonos ¿es este texto o esta imagen tan relevante para mi web?. Además debemos asegurarnos de que tanto nuestro código como nuestra visión de la web en al pantalla, se rige por la simplicidad.

La usabilidad en el proceso de desarrollo web El ciclo de vida que se utiliza para el desarrollo de sitios web debe combinar aspectos del proceso de desarrollo de software, y del proceso de publicación. Las características del hipertexto establecen particularidades que obligan a tener en cuenta ambos esquemas al estudiar la usabilidad del web. Las grandes fases en que puede dividirse serían las correspondientes a Análisis, Diseño, Desarrollo y Mantenimiento.

Fase Tareas Métodos de usabilidad

Análisis de requerimientos Definición de objetivos del sitio Creación de modelo de negocio Definición de audiencias y usuarios Análisis de necesidades de usuario

Generación de ideas Grupos de enfoque Entrevistas Cuestionarios Observación de campo Estudios previos Normas y estándares

Diseño conceptual y prototipado

Análisis de tareas de usuario Definición de flujos de trabajo Definición de arquitectura de la información Definición de la gestión de Contenidos Diseño y prototipado de interfaces de usuario Documentación de procesos y manuales

Análisis de tareas Test de prototipos Paseos cognitivos Desarrollo de escenarios Listas de control Evaluación heurística de Expertos Test de usuarios Observación Compilación de manuales y normas internas

Desarrollo Creación de interfaces de Usuario Desarrollo de los componentes de diseño gráfico

Evaluación heurística de expertos Inspección (normas, características y consistencia)

Page 17: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

17

Fase Tareas Métodos de usabilidad

Desarrollo de contenidos informativos Desarrollo de aplicaciones para interacción

Listas de control

Mantenimiento Producción de contenidos Revisiones

Control de logs Evaluación heurística por expertos Paseos cognitivos Test de usuarios

Page 18: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

18

Evaluación de la usabilidad web Tenas a tratar

• Evaluación heurística • Evaluación de usuarios • Criterios y formas para evaluación • Uso de herramientas para la evaluación

Introducción La usabilidad del sitio web es una cualidad que debe estar en constante evolución. Las tendencias y motivaciones de los usuarios son susceptibles de cambiar, como lo hacen las tecnologías. La constante evaluación del sitio web permite obtener datos que apoyen la toma de decisiones. El mejor diseño es aquel que evoluciona constantemente a medida que los usuarios lo usan, el que aprovecha la información y las estadísticas de uso para aumentar su calidad. Las siguientes son solo algunas de las evaluaciones que pueden realizarse en un sitio web y que permiten tener una idea del éxito, impacto y facilidad de uso.

• Test con usuarios: los test con usuarios realizados después de la implementación de un sitio aportan información real sobre la utilidad que este representa. Es importante planear dichas evaluaciones de una manera correcta, acorde a los objetivos del sitio y previamente identificar tareas y necesidades de los usuarios.

• Evaluación de las páginas más visitadas: estudiar cuáles son las secciones más visitadas y aquellas que reciben menos visitas permite obtener ideas de cuáles secciones tienen un mayor llamado a la acción o son más visibles. También permite definir estrategias para posicionar contenidos que sean estratégicos para la entidad.

• Encuestas a usuarios: las encuestas son un elemento que permite medir la satisfacción del usuario. Dichas encuestas deben ser elaboradas teniendo en cuenta las motivaciones de los usuarios. Es clave generar encuestas que sean directas, y que permitan al usuario expresar su opinión de una manera sencilla y ágil.

• Pruebas A/B: las pruebas de tipo A/B permiten medir la efectividad de una propuesta frente a otra. Es útil para evaluar qué tan útiles pueden ser los nuevos cambios propuestos en el sitio web.

Evaluación heurística Es un análisis y examen sistemático y detallado de la interfaz del producto realizado por expertos según unos principios de usabilidad reconocidos. Los especialistas realizan una evaluación aplicando una lista de criterios y sus conocimientos sobre la experiencia de los usuarios y las mejores prácticas del sector.

Proceso de la evaluación experta: • Estudiar la audiencia objetivo y las tareas típicas. • Navegación exploratoria por las páginas de la interfaz. • Examinar la interfaz de las páginas, siguiendo una lista de criterios establecidos. • Agrupar la lista de problemas de usabilidad y asignar la gravedad según su

importancia y frecuencia.

• Analizar los resultados y buscar soluciones.

Evaluación de usuarios Es una prueba de observación con usuarios reales mientras utilizan y realizan tareas con el producto. Es una manera directa de obtener información de los usuarios, analizando más lo que hacen que las opiniones.

Page 19: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

19

Proceso del test de usabilidad con usuarios:

• Definir los objetivos e intereses a evaluar. • Identificar perfiles del panel de usuarios y reclutar participantes. • Definición de escenarios y tareas de los test. • Preparación y realización de test. • Análisis de resultados y propuesta de soluciones.

Criterios y formas para evaluación Las cinco cuestiones esenciales que se deben plantear para evaluar la usabilidad de un diseño

web son:

1. Respecto a la curva de aprendizaje para el uso del interfaz web: ¿Cuán fácil es para los usuarios realizar las tareas básicas en la interfaz la primera vez que entran en ella?

2. Respecto a la eficacia del interfaz web: ¿Cúande rápido pueden realizar, los usuarios experimentados, las tareas o acciones que ofrece el diseño?

3. Respecto a la facilidad para memorizar las funcionalidades del interfaz web: Cuándo los usuarios vuelven a la interfaz después de un período de no utilización, ¿recuerdan cómo utilizarlo de forma eficaz o precisan de un nuevo periodo de aprendizaje?

4. Respecto a los errores cometidos por el usuario durante el uso del interfaz web: ¿Cuántos errores cometen los usuarios, Cuán graves son estos errores y cuán fácil es para ellos solventarlos?

5. Respecto a la satisfacción del usuario: ¿Está safisfecho el usuario utilizando el diseño web?

Uso de herramientas para la evaluación La Arquitectura de Información es uno de los componentes más importantes dentro de la usabilidad de un sitio web y la experiencia de usuario. Su relación directa con la facilidad que tendrá el usuario para encontrar lo que busca (Encontrabilidad), es quizás la razón por la que diversos estudios demuestran que la gran mayoría de errores en pruebas de usuario se deben a problemas de Arquitectura de Información. Los resultados del proceso de Arquitectura pueden ser comprobados con los usuarios a través de diversas técnicas de investigación y evaluación, algunas de estas son:

• Card Sorting. El Card Sorting generalmente es usado para probar los mapasde navegación o blueprints. Permite a través de una técnica de agrupación de tarjetas, obtener información acerca del mapa mental de los usuarios o probar una estructura ya existente por medio de lo que se denomina un Card Sorting cerrado.

• Tree Testing. Este test se emplea para probar específicamente mapas o estructuras de sitio. El usuario recibe una tarea, y se le presenta el mapa del sitio para que intente encontrar lo que busca. La clave del test está en mostrar la estructura del sitio por niveles de jerarquía, con lo que es posible medir el porcentaje de usuarios que llegaron directamente al objetivo, el porcentaje de retrocesos, entre otros.

• Test de 5 segundos. El principio de este test es ver cómo reaccionan los usuarios en un margen de tiempo reducido. Los test de 5 segundos presentan al usuario opciones y exigen una respuesta antes del tiempo estipulado. Es usado para comprobar por ejemplo rótulos a usar en las categorías, o incluso para identificar qué elementos de la interfaz son memorizados con mayor facilidad.

Page 20: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

20

Criterios de accesibilidad web Temas de tratar

• Terminología • Pautas de accesibilidad al contenido en la web • Iniciativa de Accesibilidad Web – WAI • Soluciones de accesibilidad • Recursos para la accesibilidad

Terminología La accesibilidad web se refiere a la capacidad de acceso a la Web y a sus contenidos por todas las personas independientemente de la discapacidad (física, intelectual o técnica) que presenten o de las que se deriven del contexto de uso (tecnológicas o ambientales). Esta cualidad está íntimamente relacionada con la usabilidad. Las limitaciones en la accesibilidad de los sitios Web pueden ser:

• Visuales: En sus distintos grados, desde la baja visión a la ceguera total, además de problemas para distinguir colores (Daltonismo).

• Motrices: Dificultad o la imposibilidad de usar las manos, incluidos temblores, lentitud muscular, etc, debido a enfermedades como el Parkinson, distrofia muscular, parálisis cerebral, amputaciones.

• Auditivas: Sordera o deficiencias auditivas. • Cognitivas: Dificultades de aprendizaje (dislexia, discalculia, etc) o discapacidades

cognitivas que afecten a la memoria, la atención, las habilidades lógicas, etc.

Pautas de accesibilidad al contenido en la web El máximo organismo dentro de la jerarquía de Internet que se encarga de promover la accesibilidad es el World Wide Web Consortium (W3C), en especial su grupo de trabajo Web Accessibility Initiative (WAI). En 1999 el WAI publicó la versión 1.0 de sus pautas de accesibilidad Web. Con el paso del tiempo se han convertido en un referente internacionalmente aceptado. En diciembre del 2008 las WCAG 2.0 fueron aprobadas como recomendación oficial. Estas pautas se dividen en tres bloques:

• Pautas de Accesibilidad al Contenido en la Web (WCAG): Están dirigidas a los webmasters e indican cómo hacer que los contenidos del sitio Web sean accesibles.

• Pautas de Accesibilidad para Herramientas de Autor (ATAG): Están dirigidas a los desarrolladores del software que usan los webmasters, para que estos programas faciliten la creación de sitios accesibles.

• Pautas de Accesibilidad para Agentes de Usuario (UAAG): Están dirigidas a los desarrolladores de Agentes de usuario (navegadores y similares), para que estos programas faciliten a todos los usuarios el acceso a los sitios Web.

Iniciativa de Accesibilidad Web – WAI

Pautas 1.0 1. Proporcione alternativas equivalentes para el contenido visual y auditivo 2. No se base sólo en el color 3. Utilice marcadores y hojas de estilo y hágalo apropiadamente 4. Identifique el idioma usado 5. Cree tablas que se transformen correctamente 6. Asegúrese de que las páginas que incorporen nuevas tecnologías se transformen

correctamente 7. Asegure al usuario el control sobre los cambios de los contenidos tempo-dependientes 8. Asegure la accesibilidad directa de las interfaces incrustadas

Page 21: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

21

9. Diseñe para la independencia del dispositivo 10. Utilice soluciones provisionales 11. Utilice las tecnologías y pautas W3C 12. Proporcione información de contexto y orientación 13. Proporcione mecanismos claros de navegación 14. Asegúrese de que los documentos sean claros y simples

Pautas 2.0 1 Perceptibilidad 1.1 Proporcione alternativas textuales para todo contenido no textual, de manera que pueda

modificarse para ajustarse a las necesidades de las personas, como por ejemplo en una letra mayor, braille, voz, símbolos o un lenguaje más simple.

1.2 Proporcione alternativas sincronizadas para contenidos multimedia sincronizados dependientes del tiempo.

1.3 Cree contenidos que puedan presentarse de diversas maneras (como por ejemplo una composición más simple) sin pérder la información ni su estructura.

1.4 Haga más fácil para los usuarios ver y oir el contenido, incluyendo la separación entre primer plano y fondo.

2 Operabilidad 2.1 Haga que toda funcionalidad esté disponible a través del teclado. 2.2 Proporcione a los usuarios con discapacidades el tiempo suficiente para leer y usar un contenido. 2.3 No diseñe un contenido de manera que se sepa que puede causar ataques. 2.4 Proporcione medios que sirvan de ayuda a los usuarios con discapacidades a la hora de navegar, localizar contenido y determinar dónde se encuentran. 3 Comprensibilidad 3.1 Haga el contenido textual legible y comprensible. 3.2 Cree páginas web cuya apariencia y operabilidad sean predecibles. 3.3 Ayude a los usuarios a evitar y corregir errores. 4 Robustez 4.1 Maximice la compatibilidad con agentes de usuario actuales y futuros, incluyendo tecnologías asistivas.

Soluciones de accesibilidad Cuando los sitios web están diseñados pensando en la accesibilidad, todos los usuarios pueden acceder en condiciones de igualdad a los contenidos.

• Por ejemplo, cuando un sitio tiene un código XHTML semánticamente correcto, se proporciona un texto equivalente alternativo a las imágenes y a los enlaces se les da un nombre significativo, esto permite a los usuarios ciegos utilizar lectores de pantalla o líneas Braille para acceder a los contenidos.

• Cuando los vídeos disponen de subtítulos, los usuarios con dificultades auditivas podrán entenderlos plenamente. Si los contenidos están escritos en un lenguaje sencillo e ilustrados con diagramas y animaciones, los usuarios con dislexia o problemas de aprendizaje están en mejores condiciones de entenderlos.

• Si el tamaño del texto es lo suficientemente grande, los usuarios con problemas visuales puedan leerlo sin dificultad. De igual modo, el tamaño de los botones o las áreas activas adecuado puede facilitar su uso a los usuarios que no pueden controlar el ratón con precisión. Si se evitan las acciones que dependan de un dispositivo concreto (pulsar una tecla, hacer clic con el ratón) el usuario podrá escoger el dispositivo que más le convenga.

Las ayudas técnicas, también llamadas tecnologías de apoyo, son los dispositivos empleados por las personas con discapacidad para prevenir, compensar, mitigar o neutralizar la discapacidad que poseen.

Page 22: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

22

Las siguientes son algunas de las tecnologías de apoyo que usan los usuarios discapacitados para navegar de la web:

• Un programa lector de pantalla, que puede leer usando síntesis de voz, los elementos que se muestran en el monitor (de gran ayuda para los usuarios con dificultades de aprendizaje o lectura), o que puede leer todo lo que está pasando en el PC (utilizado por los usuarios ciegos y de visión reducida).

• Líneas Braille, que consiste en dispositivo hardware que convierte el texto en caracteres Braille.

• Un programa magnificador de pantalla que amplía lo que se muestra en el monitor de la computadora, haciéndolo más fácil de leer para los usuarios de visión reducida.

• Eldy es un software que convierte cualquier computadora personal o PC estándar en un equipo fácil de usar para las personas que nunca han usado una computadora antes.

Recursos para la accesibilidad

• Software par adultos mayores Eldy http://www.eldy.eu/ • Sintetizador Vozme http://vozme.com • Versión WCAG 1.0 http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/

Page 23: Usabilidad y accesibilidad de sitios web - · PDF fileen la navegación web y uso de servicios web. Metodología ... Todo esto teniendo en cuenta el nivel de programación en el diseño

23

Material de lectura y consulta