ACCESIBILIDAD EN EL DISEÑO DE PÁGINAS WEB

ACCESSIBILITY IN THE WEB PAGE DESIGN

Fecha de recepción: 11 de agosto de 2012
Fecha de aceptación: 1 de septiembre de 2012

Carlos Alberto Vanegas

Ingeniero de Sistemas, Universidad Incca de Colombia. Especialista en Ingeniería de Software, Universidad Distrital Francisco José de Caldas. Magíster en Ingeniería de Sistemas, Universidad Nacional de Colombia. Docente investigador del grupo CompuParalela adscrito a la Facultad Tecnológica de la Universidad Distrital Francisco José de Caldas. Correo electrónico: cavanegas@udistrital.edu.co

Sonia Alexandra Pinzón Núñez

Ingeniera de Sistemas, Universidad Antonio Nariño de Bogotá. Especialista en Multimedia Educativa, Universidad Antonio Nariño. Especialista en Educación en Tecnología, y magíster en Ciencias de la Información y las Telecomunicaciones, Universidad Distrital., Docente investigadora del grupo Metis adscrito a la Facultad Tecnológica de la Universidad Distrital Francisco José de Caldas. Correo electrónico: spinzon@udistrital.edu.co


Resumen

El uso de internet se ha socializado de forma que existe un gran número de usuarios que utilizan muchos de los servicios que se publican en la Web, aunque algunas personas con algún tipo de discapacidad tienen dificultades para acceder y utilizar dichos servicios porque la mayoría de los sitios web carecen de accesibilidad (término utilizado para describir el grado en que un objeto, sitio, servicio, elemento puede ser utilizado por una persona independientemente de sus capacidades físicas o técnicas). Dada esta situación, las entidades que se encargan de regular y plantear normas con respecto al diseño y la implementación web, entre estas el consorcio World Wide Web (W3C), han desarrollado proyectos e investigaciones al respecto. Una de estas propuestas es la iniciativa de accesibilidad web (WAI), cuyo objetivo es facilitar el acceso de las personas con discapacidad, proporcionando especificaciones para el diseño web accesible, llamadas Pautas de Accesibilidad al Contenido Web (WCAG por su sigla en inglés). En este artículo se describen las recomendaciones para diseñar sitios web accesibles que permitan a las personas con algún tipo de discapacidad observar, entender, interactuar y navegar por un sitio web, y además indicar lo importante que es diseñar un sitio web accesible para que un mayor número de personas puedan interactuar con dicho sitio.

Palabras Clave:

accesibilidad, conocimientos, contenido, pautas, prioridad.


Abstract

The use of internet has been socialized in a way that there are a large number of users that use many of the services published on the web, although it is a fact that for some people with disabilities, there are difficulties in accessing and using these services because most of the Web sites have not accessibility. (Term used to describe an object degree to which an object, site, service, item can be used or accessed by a person despite their physical or technical capabilities ). Because of that situation, entities that are responsible for regulating and raising standards related to the Web design and implementations, including the World Wide Web Consortium (W3C), have developed projects and do research about it.

One of these proposals is the Web Accessibility Initiative (WAI), which aims to facilitate access to people with disabilities, providing specifications for accessible Web design called Web Content Accessibility Guidelines (WCAG). This article describes the recommendations for designing accessible Web sites that allows people with disabilities observe, understand, interpret, and navigates through a Web site, this article also indicate how important it is to design an accessible Web site so that a greater number of people can interact with the site.

Keywords:

Accessibility, content, guidelines, knowledge, priorities.


1. Accesibilidad

Al recurrir a las definiciones más genéricas sobre accesibilidad pueden encontrarse las siguientes: la accesibilidad es la facilidad que tiene cualquier persona para utilizar o manipular un ente, acceder a un servicio o visitar un lugar independientemente de sus capacidades físicas o de sus conocimientos [1]. También se puede describir la accesibilidad como la cualidad que tiene algo de ser usado o conocido sin que las limitaciones (físicas, tecnológicas o estructurales) que un usuario pueda tener presuman una barrera. Así, una herramienta es accesible cuando el usuario no necesita tener, de forma permanente u ocasional, un nivel de inteligencia, audición, visión, movilidad o capacidad de memorización determinado [2].

2. Accesibilidad web

La accesibilidad significa dar acceso a la Web al máximo número de personas independientemente de sus conocimientos, habilidades, cultura, idioma, localización geográfica, hardware, software y los protocolos de comunicación que utilice [3]. En otras palabras, la accesibilidad se refiere al diseño de las páginas web para permitir que las personas con algún tipo de discapacidad puedan observar, entender, interactuar y navegar por un sitio web, sin tener en cuenta el navegador, la resolución de la pantalla o la configuración del equipo. La accesibilidad incluye diferentes tipos de discapacidad (visual, auditiva, física, tecnológica, cognitiva, etcétera). La accesibilidad no solo debe favorecer a las personas con discapacidad, sino también a personas sin discapacidad, empresas u organizaciones, porque debe ser flexible con el objetivo de satisfacer necesidades, situaciones y preferencias [4]. Por esto la accesibilidad es importante porque la Web es un recurso sustancial en la actualidad en distintos aspectos (educación, salud, política, comercio, etc.) y debe proporcionar un acceso neutral con igualdad de posibilidades para todos los usuarios.

Por lo anterior existen muchas organizaciones dedicadas a definir las pautas para el desarrollo y diseño en la Web, entre ellas el Consorcio W3C, que ha dispuesto iniciativas como la WAI (Web Accesibility Initiative) que llevan a promover investigaciones y desarrollo de diseño web para facilitar el acceso a personas con discapacidad.

3. Pautas para el diseño de páginas web accesibles

El consorcio World Wide Web (W3C) es una organización internacional que desarrolla estándares y pautas web; es liderado por el inventor de la Web, Tim Berners Lee, y el director ejecutivo, Jeffrey Jaffe, y su objetivo primordial es direccionar la Web hacia su máximo potencial a través del desarrollo de protocolos y pautas que aseguren el crecimiento futuro de esta [5].

W3C desarrolló la Iniciativa de Accesibilidad Web (WAI, Web Accessibility Initiative) [6], cuyo objetivo es facilitar el acceso de las personas con discapacidad, proporcionando especificaciones para el diseño web accesible llamadas Pautas de Accesibilidad al Contenido Web (WCAG, Web Content Accessibility Guidelines) [7]. Estas pautas describen recomendaciones para el diseño de páginas web accesibles, las cuales proporcionan la flexibilidad necesaria para que la información sea accesible.

Las WCAG están pensadas para desarrolladores de páginas web, desarrolladores de herramientas de autor para la Web y desarrolladores de herramientas de evaluación de accesibilidad web. Todos ellos deben basarse en varios componentes que se interrelacionan para que la Web sea accesible a las personas con discapacidad [8]. Estos componentes incluyen:

WCAG describe catorce pautas que proporcionan una guía para el diseño de páginas web. Cada pauta contiene una serie de puntos de verificación que ayudan a la detección de posibles errores y cada punto de verificación está asignado a uno de los tres niveles de prioridad establecidos por las pautas de accesibilidad al contenido de la Web [3]. Estos niveles de prioridad son:

Con relación a los puntos de verificación se establecen los siguientes niveles de conformidad:

Estas pautas hacen que las páginas web sean accesibles sin desmejorar el diseño y permiten la flexibilidad suficiente para que la información sea accesible y proporcione métodos para que las páginas sean útiles y comprensibles.

4. Las catorce pautas de accesibilidad al contenido de la Web

A continuación se describen en forma breve las catorce pautas de accesibilidad y sus respectivos puntos de verificación, así como su nivel de prioridad [9].

  1. 3.1 Cuando exista un marcador apropiado, usar marcadores en vez de imágenes para transmitir la información (prioridad 2): evitar la utilización de imágenes para representar texto; se debe utilizar texto y hojas de estilo para modificar su apariencia.
  2. 3.2 Crear documentos que estén validados por las gramáticas formales publicadas (prioridad 2): incluir una definición de tipo de documento (DTD) al comienzo de la página, para describir un formato de datos común y mantener la coherencia entre todas las páginas que utilicen el mismo DTD.
  3. 3.3 Utilizar hojas de estilo para controlar la maquetación y la presentación (prioridad 2): hojas de estilo, por ejemplo, para el estilo de fuente, la ubicación del texto e imágenes de la página.
  4. 3.4 Utilizar unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo (prioridad 2): utilizar medidas con valores porcentuales (% o em), en lugar de medidas absolutas, por ejemplo pt (puntos) o cm (centímetros).
  5. 3.5 Utilizar elementos de encabezado para transmitir la estructura lógica y usarlos de acuerdo con la especificación (prioridad 2): no emplear etiquetas de encabezado (h1, h2,…., h6) para crear efectos de texto; estos solo se deben usar para definir una estructura de temas.
  6. 3.6 Marcar correctamente las listas y los ítems de las listas (prioridad 2): anidar correctamente las etiquetas HTML ol, ul, dl; además estos no deben utilizarse para agregar sangrías al texto.
  7. 3.7 Marcar las citas (prioridad 2): no utilizar etiquetas de citas para sangrías, por ejemplo blockquote.
  1. 4.1 Identificar los cambios en el idioma del texto del documento y en cualquier texto equivalente (prioridad 1): al utilizar varios idiomas en una página, usar el atributo lang cada vez que se cambie el idioma.
  2. 4.2 Especificar la expansión de cada abreviatura o acrónimo cuando aparezcan por primera vez (prioridad 3): cuando se use una abreviatura o acrónimo por primera vez, es necesario marcarla con abbr o acronym agregando la descripción en el atributo title.
  3. 4.3 Identificar el idioma principal de un documento (prioridad 3): identificar el idioma principal de la página en la etiqueta o con un encabezado HTTP con el atributo lang.
  • Pauta 6: asegurar que las páginas que incorporan nuevas tecnologías se transformen correctamente: al utilizar nuevas tecnologías se debe asegurar que funcionen en navegadores antiguos. Sus puntos de verificación son:
    1. 6.1 Organizar el documento de forma que pueda ser leído sin hoja de estilo (prioridad 1): el contenido debe estructurarse lógicamente, de forma que la organización pueda ser leída cuando se desconecten o no se soporten las hojas de estilo.
    2. 6.2 Asegurarse que los equivalentes de un contenido dinámico son actualizados cuando cambia el contenido dinámico (prioridad 1): se debe tener texto alternativo cuando un script (guion o conjunto de instrucciones ) no pueda ser habilitado.
    3. 6.3 Asegurarse de que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts, applets u otros objetos programados (prioridad 1): certificar que todos los enlaces que tengan scripts funcionen cuando estos se desconecten o no se soporten, agregando elementos textuales o no textuales a marcas como object y applet.
    4. 6.4 Para los scripts y applets, asegurarse de que los manejadores de evento sean independientes del dispositivo de entrada (prioridad 2): todos los manejadores de eventos o acciones deben ser independientes de los dispositivos; por ejemplo, un manejador de eventos no debe depender de las coordenadas del ratón.
    5. 6.5 Cerciorarse de que los contenidos dinámicos son accesibles o proporcionar una página o presentación alternativa (prioridad 2): ofrecer páginas o información que permitan obtener accesibilidad.
  • Pauta 7: garantizar que el usuario controle los cambios de los contenidos tempodependientes: asegurarse de que, en todas las páginas donde existan movimientos, parpadeos o desplazamientos que se actualizan automáticamente, estos puedan ser detenidos por el usuario. Los puntos de verificación son:
    1. 7.1 Evitar provocar destellos en la pantalla (prioridad 1): en las páginas se deben evitar contenidos con destellos en la pantalla.
    2. 7.2 Evitar el parpadeo del contenido (prioridad 2): en las páginas se deben evitar contenidos con parpadeos, especialmente en animaciones o videos.
    3. 7.3 Evitar los movimientos en las páginas (prioridad 2): proporcionar dentro de un script o un applet que un usuario pueda pausar o actualizar un movimiento o animación.
    4. 7.4 No crear páginas que se actualicen automáticamente de forma periódica (prioridad 2): no diseñar páginas que se actualicen o cambien sin que el usuario lo requiera.
    5. 7.5 No utilizar marcadores para redirigir las páginas automáticamente. En su lugar, configurar el servidor para que ejecute esta posibilidad (prioridad 2): se debe reemplazar la página que será redirigida por una página estática que contenga un vínculo normal a una nueva página.
  • Pauta 8: asegurar la accesibilidad directa de las interfaces de usuario incrustadas: la interfaz de usuario debe tener los principios de accesibilidad. Sus puntos de verificación son:
    1. 8.1 Hacer los elementos de programación, tales como scripts y applets, directamente accesibles o compatibles con las ayudas técnicas (prioridad 1 si la funcionalidad es importante y no se presenta en otro lugar; de otra manera, prioridad 2): el usuario debe tener interacción con los applets o scripts que estén dentro de una página.
  • Pauta 9: diseñar para la independencia del dispositivo: permitir que el usuario pueda interactuar con un dispositivo de entrada o de salida preferido. Los puntos de verificación son:
    1. 9.1 Proporcionar mapas de imagen controlados por el cliente en lugar del servidor (prioridad 1): se deben proporcionar alternativas u opciones que el cliente pueda manipular cuando un mapa de imagen está del lado del servidor.
    2. 9.2 Garantizar que cualquier elemento que tiene su propia interfaz pueda manejarse de forma independiente del dispositivo: ofrecer mecanismos de entrada y salida redundantes para cada dispositivo que sea soportado, es decir que los applets o scripts generados puedan usarse tanto con el teclado como con el ratón u otro dispositivo externo.
    3. 9.3 Para los scripts, especificar manejadores de evento lógicos en vez de manejadores de evento dependientes de dispositivos (prioridad 2): emplear manejadores de eventos en el nivel de aplicación en vez de manejadores de eventos a nivel de usuarios por ejemplo: onfocus, onblur y onselect.
    4. 9.4 Crear un orden lógico para navegar con el tabulador a través de vínculos, formularios y objetos (prioridad 3): la navegación por la página debe ser en un orden secuencial y lógico en los menús o en los elementos que contenga la página utilizando el atributo tabindex.
    5. 9.5 Proporcionar atajos de teclado para los vínculos más importantes (prioridad 3): también debe poderse acceder a los vínculos de la página por medio del teclado utilizando el atributo accesskey.
  • Pauta 10: utilizar soluciones provisionales: utilización de soluciones de accesibilidad que permitan que las ayudas técnicas y los navegadores antiguos funcionen correctamente. Sus puntos de verificación son:
    1. 10.1 No provocar apariciones repentinas de nuevas ventanas y no cambiar la ventana actual sin informar al usuario (prioridad 2): no crear contenidos donde aparezcan nuevas ventanas sin que exista la interacción del usuario o en el caso de applets que se ejecuten en otras ventanas.
    2. 10.2 Para todos los controles de formularios con etiquetas asociadas, asegurarse de que la etiqueta está puesta adecuadamente (prioridad 2): se deben asociar etiquetas a cada control utilizando label con el atributo for.
    3. 10.3 Proporcionar un texto lineal alternativo para todas las tablas que maquetan texto en paralelo (prioridad 3): no se deben utilizar tablas para maquetar páginas y en las celdas de las tablas en lo posible el texto no se debe extender a más de una línea. Si esto ocurriera es necesario definir la forma en que se deberá leer el texto dentro de la tabla; para ello el atributo dir especifica la secuencia de la disposición de las columnas; si se asigna el valor rtl indica que la lectura se hará de derecha a izquierda.
    4. 10.4 Incluir caracteres por defecto en los cuadros de edición y áreas de texto (prioridad 3): es una buena práctica incluir texto en los campos de texto o en las áreas de texto de los formularios.
    5. 10.5 Incluir caracteres imprimibles (rodeados de espacios), que no sirvan como vínculo, entre los vínculos contiguos (prioridad 3): en los vínculos de navegación de una página se debe permitir que los usuarios puedan pasar por alto el conjunto de vínculos asociados; para ello se utiliza la etiqueta map de HTML 4.01 con el atributo title.
  • Pauta 11: utilizar las tecnologías y pautas W3C: utilizar tecnologías W3C con las pautas de accesibilidad donde no sea posible proporcionar una alternativa para que el contenido sea accesible. Los puntos de verificación son:
    1. 11.1 Utilizar tecnologías W3C cuando estén disponibles y sean apropiadas para la tarea y usar las últimas versiones que sean soportadas (prioridad 2): utilizar tecnologías W3C revisadas teniendo en cuenta la accesibilidad, que además han sido construidas con características de accesibilidad. (Se pueden consultar las últimas tecnologías disponibles en www.w3.org/TR/).
    2. 11.2 Evitar características desaconsejadas por las tecnologías W3C (prioridad 2): utilizar etiquetas HTML y hojas de estilo que no estén desaconsejadas. (Consultar guía de referencia W3C en www.w3c.es/divulgacion/ guiasreferencia/xhtml1/).
    3. 11.3 Proporcionar la información de modo que los usuarios puedan recibir los documentos según sus preferencias (prioridad 3): incluir vínculos de los contenidos en otros idiomas o en las hojas de estilo y agregar características alternativas de apariencia y audición del contenido.
    4. 11.4 Si no se puede crear una página accesible, proporcionar un vínculo a una página alternativa que use tecnologías W3C (prioridad 1): si no se puede garantizar la accesibilidad en una página, es necesario crear vínculos a otras páginas que usen la tecnología W3C y que proporcionen la misma funcionalidad de manera accesible.
  • Pauta 12: proporcionar información de contexto y orientación: proporcionar información sobre la relación entre los elementos de una página. Los puntos de verificación son:
    1. 12.1 Titular cada marco para facilitar su identificación y navegación (prioridad 1): cada marco que se incluya en una página debe contener un título descriptivo; utilizar el atributo title.
    2. 12.2 Describir el propósito de los marcos y cómo estos se relacionan entre sí, si no resulta obvio solamente con el título del marco (prioridad 2): los títulos de los marcos deben describir claramente el objetivo del marco y las relaciones existentes si las hay.
    3. 12.3 Dividir los bloques largos de información en grupos más manejables cuando sea natural y apropiado (prioridad 2): agrupar la información relacionada en bloques contextuales; utilizar fieldset y optgroup para agrupar controles o listas.
    4. 12.4 Asociar explícitamente las etiquetas con sus controles (prioridad 2): cada etiqueta debe ser asociada en forma clara con cada uno de los controles que relaciona.
  • Pauta 13: proporcionar mecanismos claros de navegación: los mecanismos de navegación de la página deben ser secuenciales y lógicos para que el usuario encuentre lo que está buscando. Sus puntos de verificación son:
    1. 13.1 Identificar claramente el objetivo de cada vínculo (prioridad 2): cada vínculo debe tener un significado coherente que especifique el destino del mismo.
    2. 13.2 Proporcionar metadatos para añadir información semántica a las páginas y sitios (prioridad 2): se debe proporcionar información sobre el propio documento; por ejemplo, utilizar las etiquetas title, address o meta.
    3. 13.3 Proporcionar información sobre la maquetación general de un sitio (prioridad 2): describir claramente el sitio web, explicando todas las características de accesibilidad; crear un mapa del sitio o tabla de contenido.
    4. 13.4 Utilizar mecanismos de navegación de forma coherente (prioridad 2): la navegación en la página debe ser secuencial y de modo coherente se pueden agregar descripciones a cada vínculo para facilitar su uso
    5. 13.5 Proporcionar barras de navegación para destacar y dar acceso al mecanismo de navegación (prioridad 3): los mecanismos de navegación deben contener un conjunto de caminos que el usuario pueda seguir en el sitio web, como barras de navegación, mapas del sitio, funciones de búsqueda, etcétera.
    6. 13.6 Agrupar los vínculos relacionados (prioridad 3): todos los vínculos que se relacionen entre sí deben estar agrupados; esto facilita la aplicación del punto de revisión 10.5.
    7. 13.7 Si se proporcionan funciones de búsqueda, permitir diferentes tipos de búsquedas para diversos niveles de habilidad y preferencias (prioridad 3): en las funcionalidades de búsqueda se deben ofrecer mecanismos que satisfagan diferentes niveles de habilidad y distintas preferencias, como revisores de ortografía, búsquedas por similitud, entre otros.
    8. 13.8 Localizar, al principio de los encabezamientos, párrafos, listas, etcétera, la información que los diferencia (prioridad 3): los encabezamientos y las descripciones de los vínculos deben ser claros, concisos y coherentes y en los párrafos o listas comenzar por la información más importante que permita identificar el contenido rápidamente.
    9. 13.9 Proporcionar información sobre las colecciones de documentos (prioridad 3): utilizar el elemento link para identificar grupos de documentos o utilizar archivos .zip para empaquetar haciendo la correspondiente descripción.
    10. 13.10 Proporcionar una manera de saltar sobre un ASCII art de varias líneas (prioridad 3): no realizar dibujos con caracteres; preferiblemente utilizar imágenes reales, y en el caso de ser necesario su uso utilizar vínculos y descripciones que faciliten pasarlos por alto.
    1. 14.1 Utilizar el lenguaje apropiado más claro y simple para el contenido de un sitio (prioridad 1): el lenguaje debe ser claro, comprensible y lo menos técnico posible.
    2. 14.2 Complementar el texto con presentaciones gráficas o auditivas cuando ello facilite la comprensión de la página (prioridad 3): en lo posible el texto se debe complementar con presentaciones gráficas o auditivas que ayuden a una mejor comprensión.
    3. 14.3 Crear un estilo de presentación que sea coherente para todas las páginas (prioridad 3): el diseño de cada página de un sitio web debe contener un mismo tipo de presentación; para ello se pueden usar las hojas de estilo.

    5. Validar la accesibilidad de un sitio web

    Cuando se diseña un sitio web, la evaluación o validación de la accesibilidad permite encontrar los posibles problemas de accesibilidad, con el fin de resolverlos. Existen varias herramientas de evaluación que ayudan en el proceso de accesibilidad; sin embargo, ninguna herramienta es infalible para determinar en un 100 % si un sitio web es accesible. También es necesaria la evaluación humana para evaluar el cumplimiento de las pautas de accesibilidad.

    Las herramientas de validación se pueden dividir en dos categorías: validación de gramática y validación de la accesibilidad [1]. Las herramientas de validación de gramática permiten comprobar que en las páginas web el código HTML y las hojas de estilo gramaticalmente están bien formadas y son válidas. Las herramientas de validación de la accesibilidad sirven para identificar de manera automática problemas de accesibilidad.

    Algunas de las herramientas de validación gramatical son:

    Y como herramientas de validación de accesibilidad, se pueden encontrar entre otras:

    6. Conclusiones

    1Herramienta que facilita la revisión del contraste de color. Disponible en: www.visionaustralia.org.au/ info.aspx?page=628

    2Los marcadores delimitan elementos de una página web: imágenes, párrafos, entre otros; la mayoría de estos aparecen entre los símbolos “<” y “>” .

    Referencias

    [1] Accesibilidad web. Disponible en www.agesic.gub.uy/innovaportal/ file/549/1/Capitulo_3_Accesibilidad_ v1_0.pdf

    [2] Qué es la accesibilidad. Disponible en http://portal.lacaixa.es/accesibilidad/ queesaccesibilidad_es.html

    [3] Guía breve de accesibilidad web. Disponible en http://w3c.es/divulgacion/ guiasbreves/Accesibilidad

    [4] Introducción a la accesibilidad web. Disponible en http://w3c.es/Traducciones/es/WAI/ intro/accessibility.

    [5] W3C. Disponible en www.w3.org/

    [6] Web Accessibility Initiative (WAI). Disponible en www.w3.org/WAI/

    [7] Introducción a las Pautas de Accesibilidad al Contenido en la Web (WCAG). Disponible en www.w3c.es/ traducciones/es/wai/intro/wcag

    [8] Componentes esenciales de accesibilidad web. Disponible en www. w3c.es/traducciones/es/wai/intro/ components

    [9] Web Content Accessibility Guidelines 1.0. Disponible en www.w3.org/TR/ WCAG10/