---
Página principal

Accesibilidad

Menú del taller
---

Internet (y, por tanto, la Web) es una red que abarca casi todo el planeta. allí donde haya un ordenador y un cable al que conectarlo estará Internet. Cualquiera puede obtener información de la red y, lo que es más importante, cualquiera puede expresarse a través de ella.

Esto hace que sea, probablemente, la más poderosa herramienta de comunicación que jamás haya existido. Pero también es la causa de algunos problemas. Uno de los más importantes es el que voy a comentar hoy: La accesibilidad.

Ordenadores, televisores, teléfonos, sintetizadores de voz, monitores en blanco y negro o color, pantallas de texto, impresoras, lectores braille...

Distintos idiomas, culturas, software, formas de escritura...

Líneas de cable de alta velocidad, fibras ópticas, modems lentos, conexión por satélite...

Una infinidad de combinaciones de todas estas posibilidades (y de muchas más) se pueden encontrar en la red. Resulta casi milagroso que todos ellos puedan acceder a los contenidos de la web.

Bueno, no resulta tan milagroso. Solo hace falta seguir algunas reglas básicas.

Y tampoco es cierto que todos ellos puedan acceder a los contenidos de la Web. Hay muchos diseñadores web que, más por ignorancia o desidia que por maldad, crean páginas a las que no pueden acceder muchas personas.

De moddo que, para que tu no seas uno de ellos y seas capaz de construir páginas que cualquiera pueda ver (o leer, o escuchar...) aquí tienes otro de los magníficos artículos de Allan Psicobyte (yo mismo, claro).

La accesibilidad es un concepto bastante amplio que agrupa varias técnicas, consejos e indicaciones, pero es una idea que puede reducirse en una sola frase:

---

Respetar el espíritu de HTML

El HTML se inventó como un mecanismo para poder compartir información independientemente del hardware o el software del que se dispusiera. En los inicios de este lenguaje no había etiquetas para controlar la apariencia de las páginas, si no solo su estructura lógica, como títulos, párrafos, etc.

Fué después cuando se agregaron colores, imágenes, applets, etc. Pero, junto con ellos, se unieron una serie de ayudas para aquellos que no pudieran acceder a estos elementos.

Desafortunadamente, hay personas que se olvidan de esto y construyen páginas que solo son accesibles para unos pocos (Son, por ejemplo, esos tipos que escriben cosas como "este site ha sido diseñado para Navisplorer y una resolución de 800x600"). Obviamente, yo no voy a instalar el navegador que ellos prefieran o comprar el ordenador que les guste solo para ver su página. De modo que, si su site no se muestra claramente en mi navegador, me limitaré a no visitarlo.

Hacer HTML accesible no quiere decir que no uses las herramientas que te ofrece para modificar la apariencia. No tienes por qué evitar el uso de etiquetas como B o I, ni elementos como las imágenes o los Applets de Java. Simplemente asegurate de que el acceso a la información de tu página no depende de ellos.

---

Usa HTML válido

Las etiquetas o atributos propietarios como, por ejemplo, MARQUEE o BLINK, son soportadas por muy pocos navegadores (usualmente, solo por algunos de los navegadores del fabricante que ha introducido la etiqueta en cuestión), suelen estar poco o nada documentadas, y son el camino más rápido para conseguir una página defectuosa o, en el peor de los casos, completamente inaccesible para otros navegadores.

Además, al no contar con el apoyo de la comunidad informática, es más que probable que incluso futuras versiones de los navegadores que actualmente las soportan dejen de hacerlo en el futuro.

Usa solo HTML válido (es decir, reconocido por el W3C), ya que con él tienes la confianza de que, si algún navegador no reconoce alguna de esas etiquetas, lo hará en el futuro o, al menos, dispondrá de los medios para no caer en errores que impidan la visualización de su contenido.

Usa las entidades de caractéres en lugar de los mismos caractés para aquellos que no sean ASCII (por ejemplo, pon en tu código "á", "ñ" y "¿" en lugar de "á", "ñ" y "¿" respectivamente). Con ello evitarás problemas con navegadores antiguos o configurados en otro idioma.

---

Separa el contenido de la presentación

Ten en cuenta que no todo el mundo verá igual tus efectos gráficos. Si usas, por ejemplo, la etiqueta FONT ( para asignar colores y tamaños al texto) para distinguir secciones lógicas del contenido de tu página, aquellos cuyos navegadores no puedan mostrar estos efectos ( navegadores antiguos, de texto, braille, sintetizadores de voz, monitores monocromos...) no podrán reconocer esas secciones, o lo harán de modo imperfecto.

Usa preferentemente los medios que te aporta HTML para estrucutrar la información, como las cabeceras (H1, H2...), los párrafos, etc.

No uses etiquetas con un objetivo distinto al que tienen. Por ejemplo, algunos diseñadores usan la etiqueta H6 para poner texto en letras pequeñas. Pero H6 puede verse distinto en cada navegador, e incluso en algunos puede configurarse al gusto. H6 no se inventó para poner texto en letra pequeña, sino para encabezar una sección del contenido de tu página.

Si usas sistemas como colores o tipos de fuente para distinguir secciones, trata de aportar también medios alternativos para aquellos que no puedan acceder a ellos, como anotaciones, paréntesis, o por el contexto.

En lugar de etiquetas como FONT o similares, para modificar la apariencia usa preferentemente hojas de estilo. De este modo podrás controlar mucho más eficientemente el aspecto de tus páginas y asignar un comportamiento distinto en función del tipo de dispositivo o condiciones en las que se muestre (usando hojas distintas para cada dispositivo). Comprueba que tu página funciona perfectamente sin hojas de estilo. Hoy por hoy no es aún recomendable volcarse completamente en las hojas de estilo, ya que todavía están mal soportadas, de modo que deberás combinarlas con etiquetas HTML.

---

Provee de información alternativa

EL parámetro ALT (además de ser obligatorio según el W3C) está para algo. Si tu página está llena de imágenes ¿Que puede hacer alguien que no pueda verlas ( Navegador de texto o braille, conexión lenta, transferencia defectuosa...)? Si, por ejemplo, usas una imagen como botón para ir a una página determinada, asignale un texto que describa su comportamiento. Algo así como "ir al índice".

Si usas una imagen para ofrecer alguna información compleja, como un gráfico o un mapa, describela por medio del atributo LONGDESC. Dado que este atributo es nuevo de HTML 4.0, es también recomendable que pongas, cerca de la imagen, un link que dirija a esta descripción (Puedes poner algo así como "descripción de la imagen", pero, tradicionalmente, también se pone una "D" mayúscula a continuación de la imagen).

Recuerda que hay muchos ordenadores que no mostrarán (o no lo harán correctamente) tus animaciones en Flash, o tus películas, tus applets, tus grabaciones de sonido, etc. Trata de aportar otra forma de acceder al contenido, como imágenes estáticas y/o links a descripciones o transcripciones del contenido (por ejemplo, si tienes un discurso grabado en vídeo o audio, podrías poner además una transcripción en texto.

Los mapas interactivos son también arriesgados en este sentido. Usa textos ALT tanto en la imagen del mapa como en cada uno de los enlaces AREA. Además es recomendable que dispongas de links en modo texto para los navegadores que no reconozcan los mapas (o tu página será totalmente inútil).

Si usas frames no olvides incluir una etiqueta NOFRAMES con todo lo que sea necesario para permitir el acceso a tus contenidos a los navegadores que no los soporten o los tengan deshabilitados.

---

Ojo a las presunciones

No olvides tus páginas se verán de forma distinta en distintas máquinas o navegadores. Nuca presupongas cómo se presentará un determinado elemento.

Por ejemplo, una frase como "Usa las palabras subrayadas para pasar a la página siguiente" parte de la suposición de que los links aparecerán subrayados, pero existen navegadores que no los subrayan (Mosaic, por ejemplo), que no pueden subrayarlos porque no son gráficos (Lynx), o que permiten modificar este comportamiento (Explorer). Al igual que con esto ocurre con todos los criterios de presentación, como negritas, cursivas, tipos de letra, tamaño de cabeceras (H1, H2...), colores, ect.

---

Resumiendo

Internet está cada día al alcance de más dispositivos distintos. Si sigues unas normas elementales, tu página podrá ser visitada por un número mayor de ellos.

Este artículo ha sido solo una guía básica sobre la accesibilidad, puedes usar los siguientes links (cosa que te recomiendo encarecidamente) para obtener información más profunda y detallada:

Web Access Initiative es la guí de acceso a los contenidos del W3C. Una traducción (parcial) al español está disponible en Pautas de Accesibilidad al Contenido en la Web.

También hay información en español en la web del SIDAR (Seminario de Iniciativas sobre Discapacidad y Accesibilidad en la Red).

La página principal (en español) de la campaña Anybrowser también puede aportarte información interesante a este respecto.

Puedes usar el Validador del W3C para comprobar que el código de tus páginas es válido.

Bobby es otro validador, pero enfocado concretamente a cuestiones de accesibilidad.

Espero que este artículo te haya sido de utilidad. No cerremos nuestras páginas a nadie.

---

| Página principal | Curso de HTML | Tutorial de CSS | Mapa del Site |

---

HTML 4.0 VálidoCSS Válido