Curso de Estándares Web.- El presente mini curso, presenta una introducción al tema de accesibilidad y desarrollo en web.
Gracias al análisis de casos prácticos y resolución de problemas, utilizando las tablas de verificaciones de los diferentes conceptos de accesibilidad, el usuario llegará a conocer y dominar el tema.
En el presente curso, se presentará la historia detrás del tema de los estándares, la accesibilidad, para entrar a las pautas de validación y finalmente, ser verá un ejemplo concreto de aplicación y resolución de una web en particular.
Estándares Web
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
XML - Extensible Markup Language
CSS - Cascading Style Sheets
PNG - Portable Network Graphics
WSDL - Web Services Description Language
SOAP - Simple Object Access Protocol
Estos son sólo algunos ejemplos de diferentes lenguajes y protocolos que han sido definidos y estandarizados por el Consorcio W3C.
El Consorcio World Wide Web (W3C)
El Consorcio World Wide Web (W3C) es una asociación internacional formada por organizaciones miembro del consorcio, del personal y del público en general, que trabajan conjuntamente para desarrollar estándares Web. La misión del W3C es:
“Guiar la Web hacia su máximo potencial a través del desarrollo de protocolos y pautas que aseguren el crecimiento futuro de la Web.”
El W3C desarrolla estándares web y pautas, pero no es un organismo que ordena se cumplan las normas, sino que ofrece recomendaciones sobre cómo deben usarse los diferentes formatos, y lenguajes web. Debido a su carácter independiente, las diferentes empresas que fabrican productos para navegación en la web, toman sus recomendaciones y las adaptan a los diferentes productos que publican.
Tim Berners-Lee, junto con otros, crearon el W3C como un consorcio dedicado a generar consenso en relación a las tecnologías Web. Berners-Lee, quien inventó la World Wide Web en 1989 mientras trabajaba en la Organización Europea de Investigación Nuclear (CERN); ha sido el director del Consorcio desde que se fundó en 1994.
¿Por qué del uso de estándares?
Existen una serie de razones por las cuales se utilizan los estándares en el mundo. Por ejemplo: Supongamos que nos vamos de viaje y compramos una radio en Panamá. Como sabemos que la corriente en nuestro país es un patrón estándar, sólo debemos chequear que sea de 220 voltios. Si no fuera así deberíamos buscar entre una infinidad de modelos para encontrar el que funcione en el Perú. Sigamos con el ejemplo del radio. Ahora que llegamos a casa luego del viaje, y nos damos con la sorpresa de que el enchufe es triangular, en vez de ser de 2 rayas paralelas. Como usaron un modelo no estándar de enchufe, nuestra radio ahora hay que hacerle una adaptación para que pueda funcionar.
El usar estándares permite simplificar la vida diaria, forzando a los productores a crear piezas, máquinas o funcionalidades que operen y trabajen en cualquier lugar del mundo, y de esta manera, incentivar el uso o consumo de los mismos.
Pero, ¿estándares en Web?
Los estándares en la web cumplen varias razones. Si te preguntas o le preguntas a la mayoría de personas qué usan para navegar en Internet, te responderán: Internet Explorer. La razón de ello es muy simple: venía con la computadora.
Por ello, muchos programadores se contentan con hacer que sus páginas se vean bien en Internet Explorer y nada más. Sin embargo, existen una serie de otros navegadores y dispositivos que también acceden a Internet. Dentro de los navegadores, tienes entre los más conocidos el Firefox, Netscape Navigator y Opera. Existen más de una docena de navegadores distintos, pero sin duda, estos son los más populares. Dentro de los dispositivos que navegan en Internet, tienes celulares, Palms, Pocket Pcs, Tablet Pcs, Ipods, etc.
Hace algunos años, era común ver páginas que detectaban qué navegador tenías, y de acuerdo a ello, te enviaba a una página optimizada para el mismo. Ahora, imaginen como programador tener que crear una página diferente para cada uno de los navegadores y dispositivos que puedan conectarse a Internet. ¡Tendría que hacer en promedio más de 20 páginas distintas por cada una de contenido! Esto es obviamente, inmanejable. El uso de estándares permite que el o los programadores se concentren en hacer la página bien UNA vez, y asegurarse que se vea bien en todos.
Sin embargo, debido a una mala política corporativa, esto no ha sido llevado a cabo así. Microsoft Corporation, creador del Internet Explorer durante años ha desafiado a los estándares, creando los propios y haciendo caso omiso a las recomendaciones dadas por el W3C así como por otras organizaciones. Recién con el advenimiento del nuevo Internet Explorer 7.0 es que han prometido ponerse a la norma y hacer bien las cosas bien.
De los Estándares a la Accesibilidad
Si vamos más allá de los estándares, entramos al campo de la accesibilidad. La accesibilidad es importante pues existen muchas personas que no pueden acceder a la web por medios convencionales. El grupo humano que primero salta a la mente en este aspecto son los ciegos. Pero en realidad, este concepto va mucho más allá y se extiende a las personas con diferentes discapacidades visuales, no sólo la ceguera.
Existen entonces una serie de discapacidades, las cuales uno al desarrollar una web, debe comprender que existen, tales como hipermetropía (no pueden enfocar claramente los objetos a corta distancia), síndrome de túnel (ven todo como a través de un tunel), cataratas o visión nublosa, daltonismo (incapacidad para diferenciar ciertos colores), debilidad muscular o artrítica, falta de coordinación, parálisis parcial o total, falta de extremidades, dislexia, desordenes por déficit de atención, epilepsias o sus derivados, entre muchos otros.
Además, estas discapacidades no son las mismas en cada persona, varían en el tiempo y pueden tener diferentes grados de severidad. No sólo eso, las personas que las tienen no necesariamente son concientes o reconocen dichas discapacidades, o simplemente se niegan a aceptarlas.
Pautas de Accesibilidad al Contenido en la Web (WCAG)
Para hacer el contenido Web accesible, se han desarrollado las denominadas Pautas de Accesibilidad al Contenido en la Web (WCAG – Web Content Accesibility Guidelines), cuya función principal es guiar el diseño de páginas Web hacia un diseño accesible, reduciendo de esta forma barreras a la información. WCAG consiste en 14 pautas que proporcionan soluciones de diseño y que utilizan como ejemplo situaciones comunes donde el diseño de una página puede producir problemas de acceso a la información. Las Pautas contienen además una serie de puntos de verificación que ayudan a detectar posibles errores.
Cada punto de verificación está asignado a uno de los tres niveles de prioridad establecidos por las pautas.
· Prioridad 1: son aquellos puntos que un desarrollador Web tiene que cumplir ya que, de otra manera, 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í, sería muy difícil acceder a la información para ciertos grupos de usuarios.
· 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 a estos puntos de verificación se establecen los niveles de conformidad:
· Nivel de Conformidad “A”: todos los puntos de verificación de prioridad 1 se satisfacen.
· 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.
Puntos de verificación Prioridad 1
En general (Prioridad 1)
1.1 Proporcione un texto equivalente para todo elemento no textual (Por ejemplo, a través de “alt”, “longdesc” o en el contenido del elemento). Esto incluye: imágenes, representaciones gráficas del texto, mapas de imagen, animaciones (Por ejemplo, GIFs animados), “applets” y objetos programados, “ascii art”, marcos, scripts, imágenes usadas como viñetas en las listas, espaciadores, botones gráficos, sonidos (ejecutados con o sin interacción del usuario), archivos exclusivamente auditivos, banda sonora del vídeo y vídeos.
2.1 Asegúrese de que toda la información transmitida a través de los colores también esté disponible sin color, por ejemplo mediante el contexto o por marcadores.
4.1 Identifique claramente los cambios en el idioma del texto del documento y en cualquier texto equivalente (por ejemplo, leyendas).
6.1 Organice el documento de forma que pueda ser leído sin hoja de estilo. Por ejemplo, cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo, tiene que ser posible leerlo.
6.2 Asegúrese de que los equivalentes de un contenido dinámico son actualizados cuando cambia el contenido dinámico.
7.1 Hasta que las aplicaciones de usuario permitan controlarlo, evite provocar destellos en la pantalla.
14.1 Utilice el lenguaje apropiado más claro y simple para el contenido de un sitio.
Y si utiliza imágenes y mapas de imagen (Prioridad 1)
1.2 Proporcione vínculos redundantes en formato texto para cada zona activa de un mapa de imagen del servidor.
9.1 Proporcione mapas de imagen controlados por el cliente en lugar de por el servidor, excepto donde las zonas sensibles no puedan ser definidas con una forma geométrica.
Y si utiliza tablas (Prioridad 1)
5.1 En las tablas de datos, identifique los encabezamientos de fila y columna.
5.2 Para las tablas de datos que tienen dos o más niveles lógicos de encabezamientos de fila o columna, utilice marcadores para asociar las celdas de encabezamiento y las celdas de datos.
Y si utiliza marcos (”frames”) (Prioridad 1)
12.1 Titule cada marco para facilitar su identificación y navegación.
Y si utiliza “applets” y “scripts” (Prioridad 1)
6.3 Asegure que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts, applets u otros objetos programados. Si esto no es posible, proporcione información equivalente en una página alternativa accesible.
Y si utiliza multimedia (Prioridad 1)
1.3 Hasta que las aplicaciones de usuario puedan leer en voz alta automáticamente el texto equivalente de la banda visual, proporcione una descripción auditiva de la información importante de la banda visual de una presentación multimedia.
1.4 Para toda presentación multimedia tempodependiente (por ejemplo, una película o animación) sincronice alternativas equivalentes (por ejemplo, subtítulos o descripciones de la banda visual) con la presentación.
Y si todo lo demás falla (Prioridad 1)
11.4 Si, después de los mayores esfuerzos, no puede crear una página accesible, proporcione un vínculo a una página alternativa que use tecnologías W3C, sea accesible, tenga información (o funcionalidad) equivalente y sea actualizada tan a menudo como la página (original) inaccesible.
Puntos de verificación Prioridad 2En general (Prioridad 2)2.2 Asegúrese de que las combinaciones de los colores de fondo y primer plano tengan el suficiente contraste para que sean percibidas por personas con deficiencias de percepción de color o en pantallas en blanco y negro [Prioridad 2 para las imágenes. Prioridad 3 para los textos].3.1 Cuando exista un marcador apropiado, use marcadores en vez de imágenes para transmitir la información.3.2 Cree documentos que estén validados por las gramáticas formales publicadas.3.3 Utilice hojas de estilo para controlar la maquetación y la presentación.3.4 Utilice 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.3.5 Utilice elementos de encabezado para transmitir la estructura lógica y utilícelos de acuerdo con la especificación.3.6 Marque correctamente las listas y los ítems de las listas.3.7 Marque las citas. No utilice el marcador de citas para efectos de formato tales como sangrías.
6.5 Asegúrese de que los contenidos dinámicos son accesibles o proporcione una página o presentación alternativa.
7.2 Hasta que las aplicaciones de usuario permitan controlarlo, evite el parpadeo del contenido (por ejemplo, cambio de presentación en periodos regulares, así como el encendido y apagado).
7.4 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener las actualizaciones, no cree páginas que se actualicen automáticamente de forma periódica.
7.5 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener el redireccionamiento automático, no utilice marcadores para redirigir las páginas automáticamente. En su lugar, configure el servidor para que ejecute esta posibilidad.
10.1 Hasta que las aplicaciones de usuario permitan desconectar la apertura de nuevas ventanas, no provoque apariciones repentinas de nuevas ventanas y no cambie la ventana actual sin informar al usuario.
11.1 Utilice tecnologías W3C cuando estén disponibles y sean apropiadas para la tarea y use las últimas versiones que sean soportadas.
11.2 Evite características desaconsejadas por las tecnologías W3C.
12.3 Divida los bloques largos de información en grupos más manejables cuando sea natural y apropiado.
13.1 Identifique claramente el objetivo de cada vínculo.
13.2 Proporcione metadatos para añadir información semántica a las páginas y sitios.
13.3 Proporcione información sobre la maquetación general de un sitio (por ejemplo, mapa del sitio o tabla de contenidos).
13.4 Utilice los mecanismos de navegación de forma coherente.
Y si utiliza tablas (Prioridad 2)
5.3 No utilice tablas para maquetar, a menos que la tabla tenga sentido cuando se alinee. Por otro lado, si la tabla no tiene sentido, proporcione una alternativa equivalente (la cual debe ser una versión alineada).
5.4 Si se utiliza una tabla para maquetar, no utilice marcadores estructurales para realizar un efecto visual de formato.
Y si utiliza marcos (”frames”) (Prioridad 2)
12.2 Describa el propósito de los marcos y cómo éstos se relacionan entre sí, si no resulta obvio solamente con el título del marco.
Y si utiliza formularios (Prioridad 2)
10.2 Hasta que las aplicaciones de usuario soporten explícitamente la asociación entre control de formulario y etiqueta, para todos los controles de formularios con etiquetas asociadas implícitamente, asegúrese de que la etiqueta está colocada adecuadamente.
12.4 Asocie explícitamente las etiquetas con sus controles.
Y si utiliza “applets” y “scripts” (Prioridad 2)
6.4 Para los scripts y applets, asegúrese de que los manejadores de eventos sean independientes del dispositivo de entrada.
7.3 Hasta que las aplicaciones de usuario permitan congelar el movimiento de los contenidos, evite los movimientos en las páginas.
8.1 Haga 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].
9.2 Asegúrese de que cualquier elemento que tiene su propia interfaz pueda manejarse de forma independiente del dispositivo.
9.3 Para los “scripts”, especifique manejadores de evento lógicos mejor que manejadores de evento dependientes de dispositivos.
Puntos de verificación Prioridad 3En general (Prioridad 3)4.2 Especifique la expansión de cada abreviatura o acrónimo cuando aparezcan por primera vez en el documento.4.3 Identifique el idioma principal de un documento.9.4 Cree un orden lógico para navegar con el tabulador a través de vínculos, controles de formulario y objetos.9.5 Proporcione atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de cliente), los controles de formulario y los grupos de controles de formulario.10.5 Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten claramente los vínculos contiguos, incluya caracteres imprimibles (rodeados de espacios), que no sirvan como vínculo, entre los vínculos contiguos.11.3 Proporcione la información de modo que los usuarios puedan recibir los documentos según sus preferencias (por ejemplo, idioma, tipo de contenido, etc.).13.5 Proporcione barras de navegación para destacar y dar acceso al mecanismo de navegación.13.6 Agrupe los vínculos relacionados, identifique el grupo (para las aplicaciones de usuario) y, hasta que las aplicaciones de usuario lo hagan, proporcione una manera de evitar el grupo.
13.7 Si proporciona funciones de búsqueda, permita diferentes tipos de búsquedas para diversos niveles de habilidad y preferencias.
13.8 Localice la información destacada al principio de los encabezamientos, párrafos, listas, etc.
13.9 Proporcione información sobre las colecciones de documentos (por ejemplo, los documentos que comprendan múltiples páginas).
13.10 Proporcione un medio para saltar sobre un ASCII art de varias líneas.
14.2 Complemente el texto con presentaciones gráficas o auditivas cuando ello facilite la comprensión de la página.
14.3 Cree un estilo de presentación que sea coherente para todas las páginas.
Y si utiliza imágenes o mapas de imagen (Prioridad 3)
1.5 Hasta que las aplicaciones de usuario interpreten el texto equivalente para los vínculos de los mapas de imagen de cliente, proporcione vínculos de texto redundantes para cada zona activa del mapa de imagen de cliente.
Y si utiliza tablas (Prioridad 3)
5.5 Proporcione resúmenes de las tablas.
5.6 Proporcione abreviaturas para las etiquetas de encabezamiento.
10.3 Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten correctamente los textos contiguos, proporcione un texto lineal alternativo (en la página actual o en alguna otra) para todas las tablas que maquetan texto en paralelo, en columnas de palabras.
Y si utiliza formularios (Prioridad 3)
10.4 Hasta que las aplicaciones de usuario manejen correctamente los controles vacíos, incluya caracteres por defecto en los cuadros de edición y áreas de texto.
Simplificando la Tarea: Validadores y Verificadores Semi-AutomáticosEs muy difícil, aun siendo un programador con años de experiencia, mantener, programar y hacer que las webs cumplan al 100% con todos estos estándares. Por ello, existen diferentes herramientas online, que nos ayudan enormemente a completar nuestra tarea. Entre las principales están:Validador del Consorcio W3Chttp://validator.w3.orgBobby – Watchfire WebXACThttp://webxact.watchfire.com
Análisis Práctico:Tomemos como ejemplo, la página web de la UNI:http://www.uni.edu.pe1 – Errores de ValidaciónDe arranque, en la primera página existen 12 errores. El primer error, y el cual se repite en todo el web de la universidad, es el no definir el doctype de lenguaje utilizado. En el caso de la web de la UNI, como usan HTML estándar, debería aparecer en la primera línea antes de la declaración lo siguiente:Los errores 2 al 8 podemos realmente ignorarlos por ahora, pues se refieren al uso de un producto propietario a Macromedia, el famoso Flash. Hablaremos de ellos más adelante.El error 9, es por usar una definición que NO existe. Cuando se usan tablas (de preferencia se debe usar DIV y CSS en vez de tablas), no existe la propiedad HEIGHT (altura).Los errores 10 al 11 se refieren a un error de lenguaje, y también al error de accesibilidad 1.1: falta de descripciones ALT en las imágenes.Las imágenes que no están descritas, son los pequeños buzones de correo al pie de la página. Deberían tener la etiqueta ALT que diga: “correo”, “buzón de correo”, o algo parecido.La razón del uso del ALT, es porque un usuario con discapacidad utilizaría un navegador que le lea lo que se muestra en pantalla. Si se topa con la imagen, el navegador reproduce el texto que se encuentre allí. En el caso de la web, por ello, debería haber un cambio en la primera imagen, la que dice:
Universidad Nacional de Ingeniería – 130 años – Universidad de Emprendedores
El texto de la imagen debería ser justamente ese, en vez que diga simplemente “Uni”
Finalmente, el error 12 es también por la falta del texto alterno ALT, pero en el label http://www.universidadperu.com/medios/28530.pdf
Escrito por:Luis Alberto Barandiarán
Referencias y Recursos
World Wide Web Consortium - Oficina Españolahttp://www.w3c.es
HTML Techniques for Web Content Accessibility Guidelines 1.0http://www.w3.org/TR/WCAG10-HTML-TECHS/
Validador del Consorcio W3Chttp://validator.w3.org
Bobby – Watchfire WebXACThttp://webxact.watchfire.com/
Accesibilidad - Validación - Discapacidad y UniversidadPeru.comhttp://www.universidadperu.com/accesibilidad-validacion-discapacidad.php
Luis Alberto BarandiaránUniversidadPeru.comhttp://www.universidadperu.com
Gracias al análisis de casos prácticos y resolución de problemas, utilizando las tablas de verificaciones de los diferentes conceptos de accesibilidad, el usuario llegará a conocer y dominar el tema.
En el presente curso, se presentará la historia detrás del tema de los estándares, la accesibilidad, para entrar a las pautas de validación y finalmente, ser verá un ejemplo concreto de aplicación y resolución de una web en particular.
Estándares Web
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
XML - Extensible Markup Language
CSS - Cascading Style Sheets
PNG - Portable Network Graphics
WSDL - Web Services Description Language
SOAP - Simple Object Access Protocol
Estos son sólo algunos ejemplos de diferentes lenguajes y protocolos que han sido definidos y estandarizados por el Consorcio W3C.
El Consorcio World Wide Web (W3C)
El Consorcio World Wide Web (W3C) es una asociación internacional formada por organizaciones miembro del consorcio, del personal y del público en general, que trabajan conjuntamente para desarrollar estándares Web. La misión del W3C es:
“Guiar la Web hacia su máximo potencial a través del desarrollo de protocolos y pautas que aseguren el crecimiento futuro de la Web.”
El W3C desarrolla estándares web y pautas, pero no es un organismo que ordena se cumplan las normas, sino que ofrece recomendaciones sobre cómo deben usarse los diferentes formatos, y lenguajes web. Debido a su carácter independiente, las diferentes empresas que fabrican productos para navegación en la web, toman sus recomendaciones y las adaptan a los diferentes productos que publican.
Tim Berners-Lee, junto con otros, crearon el W3C como un consorcio dedicado a generar consenso en relación a las tecnologías Web. Berners-Lee, quien inventó la World Wide Web en 1989 mientras trabajaba en la Organización Europea de Investigación Nuclear (CERN); ha sido el director del Consorcio desde que se fundó en 1994.
¿Por qué del uso de estándares?
Existen una serie de razones por las cuales se utilizan los estándares en el mundo. Por ejemplo: Supongamos que nos vamos de viaje y compramos una radio en Panamá. Como sabemos que la corriente en nuestro país es un patrón estándar, sólo debemos chequear que sea de 220 voltios. Si no fuera así deberíamos buscar entre una infinidad de modelos para encontrar el que funcione en el Perú. Sigamos con el ejemplo del radio. Ahora que llegamos a casa luego del viaje, y nos damos con la sorpresa de que el enchufe es triangular, en vez de ser de 2 rayas paralelas. Como usaron un modelo no estándar de enchufe, nuestra radio ahora hay que hacerle una adaptación para que pueda funcionar.
El usar estándares permite simplificar la vida diaria, forzando a los productores a crear piezas, máquinas o funcionalidades que operen y trabajen en cualquier lugar del mundo, y de esta manera, incentivar el uso o consumo de los mismos.
Pero, ¿estándares en Web?
Los estándares en la web cumplen varias razones. Si te preguntas o le preguntas a la mayoría de personas qué usan para navegar en Internet, te responderán: Internet Explorer. La razón de ello es muy simple: venía con la computadora.
Por ello, muchos programadores se contentan con hacer que sus páginas se vean bien en Internet Explorer y nada más. Sin embargo, existen una serie de otros navegadores y dispositivos que también acceden a Internet. Dentro de los navegadores, tienes entre los más conocidos el Firefox, Netscape Navigator y Opera. Existen más de una docena de navegadores distintos, pero sin duda, estos son los más populares. Dentro de los dispositivos que navegan en Internet, tienes celulares, Palms, Pocket Pcs, Tablet Pcs, Ipods, etc.
Hace algunos años, era común ver páginas que detectaban qué navegador tenías, y de acuerdo a ello, te enviaba a una página optimizada para el mismo. Ahora, imaginen como programador tener que crear una página diferente para cada uno de los navegadores y dispositivos que puedan conectarse a Internet. ¡Tendría que hacer en promedio más de 20 páginas distintas por cada una de contenido! Esto es obviamente, inmanejable. El uso de estándares permite que el o los programadores se concentren en hacer la página bien UNA vez, y asegurarse que se vea bien en todos.
Sin embargo, debido a una mala política corporativa, esto no ha sido llevado a cabo así. Microsoft Corporation, creador del Internet Explorer durante años ha desafiado a los estándares, creando los propios y haciendo caso omiso a las recomendaciones dadas por el W3C así como por otras organizaciones. Recién con el advenimiento del nuevo Internet Explorer 7.0 es que han prometido ponerse a la norma y hacer bien las cosas bien.
De los Estándares a la Accesibilidad
Si vamos más allá de los estándares, entramos al campo de la accesibilidad. La accesibilidad es importante pues existen muchas personas que no pueden acceder a la web por medios convencionales. El grupo humano que primero salta a la mente en este aspecto son los ciegos. Pero en realidad, este concepto va mucho más allá y se extiende a las personas con diferentes discapacidades visuales, no sólo la ceguera.
Existen entonces una serie de discapacidades, las cuales uno al desarrollar una web, debe comprender que existen, tales como hipermetropía (no pueden enfocar claramente los objetos a corta distancia), síndrome de túnel (ven todo como a través de un tunel), cataratas o visión nublosa, daltonismo (incapacidad para diferenciar ciertos colores), debilidad muscular o artrítica, falta de coordinación, parálisis parcial o total, falta de extremidades, dislexia, desordenes por déficit de atención, epilepsias o sus derivados, entre muchos otros.
Además, estas discapacidades no son las mismas en cada persona, varían en el tiempo y pueden tener diferentes grados de severidad. No sólo eso, las personas que las tienen no necesariamente son concientes o reconocen dichas discapacidades, o simplemente se niegan a aceptarlas.
Pautas de Accesibilidad al Contenido en la Web (WCAG)
Para hacer el contenido Web accesible, se han desarrollado las denominadas Pautas de Accesibilidad al Contenido en la Web (WCAG – Web Content Accesibility Guidelines), cuya función principal es guiar el diseño de páginas Web hacia un diseño accesible, reduciendo de esta forma barreras a la información. WCAG consiste en 14 pautas que proporcionan soluciones de diseño y que utilizan como ejemplo situaciones comunes donde el diseño de una página puede producir problemas de acceso a la información. Las Pautas contienen además una serie de puntos de verificación que ayudan a detectar posibles errores.
Cada punto de verificación está asignado a uno de los tres niveles de prioridad establecidos por las pautas.
· Prioridad 1: son aquellos puntos que un desarrollador Web tiene que cumplir ya que, de otra manera, 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í, sería muy difícil acceder a la información para ciertos grupos de usuarios.
· 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 a estos puntos de verificación se establecen los niveles de conformidad:
· Nivel de Conformidad “A”: todos los puntos de verificación de prioridad 1 se satisfacen.
· 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.
Puntos de verificación Prioridad 1
En general (Prioridad 1)
1.1 Proporcione un texto equivalente para todo elemento no textual (Por ejemplo, a través de “alt”, “longdesc” o en el contenido del elemento). Esto incluye: imágenes, representaciones gráficas del texto, mapas de imagen, animaciones (Por ejemplo, GIFs animados), “applets” y objetos programados, “ascii art”, marcos, scripts, imágenes usadas como viñetas en las listas, espaciadores, botones gráficos, sonidos (ejecutados con o sin interacción del usuario), archivos exclusivamente auditivos, banda sonora del vídeo y vídeos.
2.1 Asegúrese de que toda la información transmitida a través de los colores también esté disponible sin color, por ejemplo mediante el contexto o por marcadores.
4.1 Identifique claramente los cambios en el idioma del texto del documento y en cualquier texto equivalente (por ejemplo, leyendas).
6.1 Organice el documento de forma que pueda ser leído sin hoja de estilo. Por ejemplo, cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo, tiene que ser posible leerlo.
6.2 Asegúrese de que los equivalentes de un contenido dinámico son actualizados cuando cambia el contenido dinámico.
7.1 Hasta que las aplicaciones de usuario permitan controlarlo, evite provocar destellos en la pantalla.
14.1 Utilice el lenguaje apropiado más claro y simple para el contenido de un sitio.
Y si utiliza imágenes y mapas de imagen (Prioridad 1)
1.2 Proporcione vínculos redundantes en formato texto para cada zona activa de un mapa de imagen del servidor.
9.1 Proporcione mapas de imagen controlados por el cliente en lugar de por el servidor, excepto donde las zonas sensibles no puedan ser definidas con una forma geométrica.
Y si utiliza tablas (Prioridad 1)
5.1 En las tablas de datos, identifique los encabezamientos de fila y columna.
5.2 Para las tablas de datos que tienen dos o más niveles lógicos de encabezamientos de fila o columna, utilice marcadores para asociar las celdas de encabezamiento y las celdas de datos.
Y si utiliza marcos (”frames”) (Prioridad 1)
12.1 Titule cada marco para facilitar su identificación y navegación.
Y si utiliza “applets” y “scripts” (Prioridad 1)
6.3 Asegure que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts, applets u otros objetos programados. Si esto no es posible, proporcione información equivalente en una página alternativa accesible.
Y si utiliza multimedia (Prioridad 1)
1.3 Hasta que las aplicaciones de usuario puedan leer en voz alta automáticamente el texto equivalente de la banda visual, proporcione una descripción auditiva de la información importante de la banda visual de una presentación multimedia.
1.4 Para toda presentación multimedia tempodependiente (por ejemplo, una película o animación) sincronice alternativas equivalentes (por ejemplo, subtítulos o descripciones de la banda visual) con la presentación.
Y si todo lo demás falla (Prioridad 1)
11.4 Si, después de los mayores esfuerzos, no puede crear una página accesible, proporcione un vínculo a una página alternativa que use tecnologías W3C, sea accesible, tenga información (o funcionalidad) equivalente y sea actualizada tan a menudo como la página (original) inaccesible.
Puntos de verificación Prioridad 2En general (Prioridad 2)2.2 Asegúrese de que las combinaciones de los colores de fondo y primer plano tengan el suficiente contraste para que sean percibidas por personas con deficiencias de percepción de color o en pantallas en blanco y negro [Prioridad 2 para las imágenes. Prioridad 3 para los textos].3.1 Cuando exista un marcador apropiado, use marcadores en vez de imágenes para transmitir la información.3.2 Cree documentos que estén validados por las gramáticas formales publicadas.3.3 Utilice hojas de estilo para controlar la maquetación y la presentación.3.4 Utilice 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.3.5 Utilice elementos de encabezado para transmitir la estructura lógica y utilícelos de acuerdo con la especificación.3.6 Marque correctamente las listas y los ítems de las listas.3.7 Marque las citas. No utilice el marcador de citas para efectos de formato tales como sangrías.
6.5 Asegúrese de que los contenidos dinámicos son accesibles o proporcione una página o presentación alternativa.
7.2 Hasta que las aplicaciones de usuario permitan controlarlo, evite el parpadeo del contenido (por ejemplo, cambio de presentación en periodos regulares, así como el encendido y apagado).
7.4 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener las actualizaciones, no cree páginas que se actualicen automáticamente de forma periódica.
7.5 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener el redireccionamiento automático, no utilice marcadores para redirigir las páginas automáticamente. En su lugar, configure el servidor para que ejecute esta posibilidad.
10.1 Hasta que las aplicaciones de usuario permitan desconectar la apertura de nuevas ventanas, no provoque apariciones repentinas de nuevas ventanas y no cambie la ventana actual sin informar al usuario.
11.1 Utilice tecnologías W3C cuando estén disponibles y sean apropiadas para la tarea y use las últimas versiones que sean soportadas.
11.2 Evite características desaconsejadas por las tecnologías W3C.
12.3 Divida los bloques largos de información en grupos más manejables cuando sea natural y apropiado.
13.1 Identifique claramente el objetivo de cada vínculo.
13.2 Proporcione metadatos para añadir información semántica a las páginas y sitios.
13.3 Proporcione información sobre la maquetación general de un sitio (por ejemplo, mapa del sitio o tabla de contenidos).
13.4 Utilice los mecanismos de navegación de forma coherente.
Y si utiliza tablas (Prioridad 2)
5.3 No utilice tablas para maquetar, a menos que la tabla tenga sentido cuando se alinee. Por otro lado, si la tabla no tiene sentido, proporcione una alternativa equivalente (la cual debe ser una versión alineada).
5.4 Si se utiliza una tabla para maquetar, no utilice marcadores estructurales para realizar un efecto visual de formato.
Y si utiliza marcos (”frames”) (Prioridad 2)
12.2 Describa el propósito de los marcos y cómo éstos se relacionan entre sí, si no resulta obvio solamente con el título del marco.
Y si utiliza formularios (Prioridad 2)
10.2 Hasta que las aplicaciones de usuario soporten explícitamente la asociación entre control de formulario y etiqueta, para todos los controles de formularios con etiquetas asociadas implícitamente, asegúrese de que la etiqueta está colocada adecuadamente.
12.4 Asocie explícitamente las etiquetas con sus controles.
Y si utiliza “applets” y “scripts” (Prioridad 2)
6.4 Para los scripts y applets, asegúrese de que los manejadores de eventos sean independientes del dispositivo de entrada.
7.3 Hasta que las aplicaciones de usuario permitan congelar el movimiento de los contenidos, evite los movimientos en las páginas.
8.1 Haga 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].
9.2 Asegúrese de que cualquier elemento que tiene su propia interfaz pueda manejarse de forma independiente del dispositivo.
9.3 Para los “scripts”, especifique manejadores de evento lógicos mejor que manejadores de evento dependientes de dispositivos.
Puntos de verificación Prioridad 3En general (Prioridad 3)4.2 Especifique la expansión de cada abreviatura o acrónimo cuando aparezcan por primera vez en el documento.4.3 Identifique el idioma principal de un documento.9.4 Cree un orden lógico para navegar con el tabulador a través de vínculos, controles de formulario y objetos.9.5 Proporcione atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de cliente), los controles de formulario y los grupos de controles de formulario.10.5 Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten claramente los vínculos contiguos, incluya caracteres imprimibles (rodeados de espacios), que no sirvan como vínculo, entre los vínculos contiguos.11.3 Proporcione la información de modo que los usuarios puedan recibir los documentos según sus preferencias (por ejemplo, idioma, tipo de contenido, etc.).13.5 Proporcione barras de navegación para destacar y dar acceso al mecanismo de navegación.13.6 Agrupe los vínculos relacionados, identifique el grupo (para las aplicaciones de usuario) y, hasta que las aplicaciones de usuario lo hagan, proporcione una manera de evitar el grupo.
13.7 Si proporciona funciones de búsqueda, permita diferentes tipos de búsquedas para diversos niveles de habilidad y preferencias.
13.8 Localice la información destacada al principio de los encabezamientos, párrafos, listas, etc.
13.9 Proporcione información sobre las colecciones de documentos (por ejemplo, los documentos que comprendan múltiples páginas).
13.10 Proporcione un medio para saltar sobre un ASCII art de varias líneas.
14.2 Complemente el texto con presentaciones gráficas o auditivas cuando ello facilite la comprensión de la página.
14.3 Cree un estilo de presentación que sea coherente para todas las páginas.
Y si utiliza imágenes o mapas de imagen (Prioridad 3)
1.5 Hasta que las aplicaciones de usuario interpreten el texto equivalente para los vínculos de los mapas de imagen de cliente, proporcione vínculos de texto redundantes para cada zona activa del mapa de imagen de cliente.
Y si utiliza tablas (Prioridad 3)
5.5 Proporcione resúmenes de las tablas.
5.6 Proporcione abreviaturas para las etiquetas de encabezamiento.
10.3 Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten correctamente los textos contiguos, proporcione un texto lineal alternativo (en la página actual o en alguna otra) para todas las tablas que maquetan texto en paralelo, en columnas de palabras.
Y si utiliza formularios (Prioridad 3)
10.4 Hasta que las aplicaciones de usuario manejen correctamente los controles vacíos, incluya caracteres por defecto en los cuadros de edición y áreas de texto.
Simplificando la Tarea: Validadores y Verificadores Semi-AutomáticosEs muy difícil, aun siendo un programador con años de experiencia, mantener, programar y hacer que las webs cumplan al 100% con todos estos estándares. Por ello, existen diferentes herramientas online, que nos ayudan enormemente a completar nuestra tarea. Entre las principales están:Validador del Consorcio W3Chttp://validator.w3.orgBobby – Watchfire WebXACThttp://webxact.watchfire.com
Análisis Práctico:Tomemos como ejemplo, la página web de la UNI:http://www.uni.edu.pe1 – Errores de ValidaciónDe arranque, en la primera página existen 12 errores. El primer error, y el cual se repite en todo el web de la universidad, es el no definir el doctype de lenguaje utilizado. En el caso de la web de la UNI, como usan HTML estándar, debería aparecer en la primera línea antes de la declaración lo siguiente:Los errores 2 al 8 podemos realmente ignorarlos por ahora, pues se refieren al uso de un producto propietario a Macromedia, el famoso Flash. Hablaremos de ellos más adelante.El error 9, es por usar una definición que NO existe. Cuando se usan tablas (de preferencia se debe usar DIV y CSS en vez de tablas), no existe la propiedad HEIGHT (altura).Los errores 10 al 11 se refieren a un error de lenguaje, y también al error de accesibilidad 1.1: falta de descripciones ALT en las imágenes.Las imágenes que no están descritas, son los pequeños buzones de correo al pie de la página. Deberían tener la etiqueta ALT que diga: “correo”, “buzón de correo”, o algo parecido.La razón del uso del ALT, es porque un usuario con discapacidad utilizaría un navegador que le lea lo que se muestra en pantalla. Si se topa con la imagen, el navegador reproduce el texto que se encuentre allí. En el caso de la web, por ello, debería haber un cambio en la primera imagen, la que dice:
Universidad Nacional de Ingeniería – 130 años – Universidad de Emprendedores
El texto de la imagen debería ser justamente ese, en vez que diga simplemente “Uni”
Finalmente, el error 12 es también por la falta del texto alterno ALT, pero en el label http://www.universidadperu.com/medios/28530.pdf
Escrito por:Luis Alberto Barandiarán
Referencias y Recursos
World Wide Web Consortium - Oficina Españolahttp://www.w3c.es
HTML Techniques for Web Content Accessibility Guidelines 1.0http://www.w3.org/TR/WCAG10-HTML-TECHS/
Validador del Consorcio W3Chttp://validator.w3.org
Bobby – Watchfire WebXACThttp://webxact.watchfire.com/
Accesibilidad - Validación - Discapacidad y UniversidadPeru.comhttp://www.universidadperu.com/accesibilidad-validacion-discapacidad.php
Luis Alberto BarandiaránUniversidadPeru.comhttp://www.universidadperu.com
3 comentarios:
hola que tal esta buena la pginA
Un texto es una composición de signos codificado en un sistema de escritura (como un alfabeto) que forma una unidad de sentido. Su tamaño puede ser variable, desde una obra literaria como "El Quijote" al mensaje de volcado de pila del kernel Linux.
En otras palabras un texto es un entramado de signos con una intención comunicativa que adquiere sentido en determinado contexto.
De los textos se pueden extraer ideas esenciales, a las que llamaremos "macroproposición".
Publicar un comentario