Tips para optimizar la accesibilidad de un sitio o blog

Algunas ideas y consejos fundamentales para que tu blog o sitio web sea lo más amigable posible para todos los tipos de lectores.

Proveer texto alternativo para las imágenes



Todas los gráficos deben contener una breve descripción de texto alternativo que representa la función de la imagen, especialmente aquellas que representen estadísticas, ecuaciones o cualquier otra información no comprensible a simple vista para cualquier usuario.

Esto se justifica por diferentes cuestiones: el navegador del usuario puede no tener habilitado el muestreo de imágenes, o la imagen simplemente puede no haber sido cargada por fallas en la conexión o el hosting de la misma.
<IMG SRC ="imagen.jpg" ALT ="Descripción de la imagen">


Darle títulos a los marcos



Si utilizas frames (marcos), es bueno incorporar un título descriptivo en ellos mediante el atributo TITLE. Esto es válido tanto para la etiqueta FRAME como para IFRAME. Lo mismo se aplica a las imágenes (la sintaxis es la misma, se debe sustituir FRAME por IMAGE).
<FRAME SRC="index.html" TITLE="menú principal">


Descripción extendida para imágenes que lo requieran



Si bien el texto ALT (alternativo) suele cubrir las necesidades primarias, hay ocasiones en que se requiere una descripción más larga (por ejemplo, la explicación de un diagrama de flujos). Para ello se debe utilizar un archivo de texto externo e invocarse mediante un atributo "LONGDESC" (descripción larga) en el elemento IMG, como se muestra a continuación (no todos los navegadores actuales son compatibles con el atributo LONGDESC, sin embargo, se planea que sea un estándar en el futuro y se recomienda su uso). Aquí puedes aprender a usar los atributos ALT y TITLE.




Si los colores están codificando información importante, ofrecer alternativas



Si, por ejemplo, el texto de un sitio es negro y los enlaces son grises o azules, es recomendable, además, agregar un subrayado o énfasis a estos últimos, con el fin de diferenciar esa porción de texto para personas daltónicas o con otros problemas de visión. Esto es un ejemplo, pero hay muchos casos en que los colores juegan en contra; siempre es bueno ofrecer alternativas.


Proveer contenido alternativo para los scripts



El diseñador debe asegurar siempre que la información que muestra el script (flash incluido) también esté disponible en otro formato. Por varias razones es recomendable no depender exclusivamente de los scripts; por ejemplo, si el navegador del usuario no lo soporta, si el script es demasiado pesado y se excede el tiempo de espera, o simplemente porque los robots de los buscadores no pueden leerlo y hacerlo disponible en los resultados de la búsqueda. Por las mismas razones hay que asegurarse de que la página todavía puede usarse sin restricciones, agregando equivalentes en otros formatos.

Para procurar alternativas se utiliza el atributo “NOSCRIPT”, de la siguiente manera:




Usar lenguaje simple y claro



Esta regla puede parecer obvia, pero se atenta contra ella todo el tiempo. Si escribes un artículo sobre tu perro, no lo titules “La paradójica fábula de Guizmo, el canino Pomeraña”, si no simplemente “Mi perro se comió una pelota”, o algo así. Aún cuando la página esté destinada a un público específico experto en razas de perros, los eventuales usuarios que no lo sean no se sentirán tan perdidos y te lo agradecerán.


Usa tamaños y posicionamientos relativos en vez de absolutos



En el texto y otros objetos que admiten diferentes tamaños, es aconsejable usar porcentajes en reemplazo de unidades como pixels, points, inches, etc. La razón principal es que si cambia la resolución de la pantalla o el usuario agranda el texto de la página o la, el texto y los elementos mantendrán su correlación mutua.

En las hojas de estilo, es bueno definir el tamaño base del texto en porcentajes (100%). Luego, para destacar determinado texto bastará con agregar “+1” en el atributo SIZE de la etiqueta FONT.

En las tablas e IFRAMEs no es bueno usar tamaños fijos, ya que si se reduce el tamaño de la página podrían salirse de la parte visible de la misma. En vez de eso, usar porcentajes hará que el tamaño de la tabla o marco cambie con la ventana.


Ofrecer atajos de teclado para acciones comunes



El atributo ACCESKEY puede usarse dentro del código de un enlace para asignándole una tecla y una función a la misma. Ejemplo: según el código mostrado debajo de estas líneas, al presionar las teclas ALT+D, el navegador irá hacia el link que dice “Descargar archivo”; luego, al presionar “Enter”, comenzará la descarga. Las formas de utilizar este atributo sólo están limitadas por la imaginación.
<A accesskey="D" href="revista.pdf">Descargar archivo</A>


Hacer que los enlaces sean frases



Esto es simplemente una cuestión de sentido común: si el enlace es una frase que tiene sentido al leerla fuera de contexto, el usuario encontrará más rápido lo que está buscando. Si un artículo está lleno de enlaces con el texto “aquí” o “vía”, se forzará al usuario a leer un poco antes y un poco después de cada enlace para saber de qué se trata el destino del mismo. A menos que ésa sea tu intención, procura que todo el texto del link sea en sí mismo una descripción de hacia dónde lleva. Un enlace del tipo “descargue este documento en formato PDF” es óptimo.

Por razones similares no conviene utilizar el mismo texto en dos enlaces que apuntan a diferentes sitios.


Contraste con el fondo



Diferentes monitores, diferentes placas de video, diferentes usuarios con diferentes tipos de visión hacen miles de versiones diferentes de la página que crees que es como la ves. La mejor manera de asegurarse de que posee un contraste correcto es imprimiéndola -mejor si es en escala de grises-.


Uso correcto de las etiquetas “Q” y “BLOCKQUOTE”



Para citas cortas (menos de 10 palabras) usa la etiqueta Q, como se ve en el ejemplo de abajo, y usa BLOCKQUOTE para citas más largas, que contengan varios párrafos (etiquetas “P”), imágenes, etc.




Evitar el uso de tablas para alinear textos o crear secciones



El diseñador debe usar estilos CSS siempre que sea posible. Las ventajas de este estándar web y su utilización son demasiado largas para explicarlas aquí. La razón principal para evitar el uso de tablas donde sea posible es que el código de una tabla es extremadamente largo y confuso, especialmente para los buscadores. Aquí puedes aprender cómo funciona CSS.


Informar al usuario qué ocurrirá al hacer click en un link



Todos nos hemos arrepentido alguna vez de haber hecho click en determinado lugar. Es muy importante avisar cuando un enlace de texto o botón abrirá otra ventana o Pop-Up, (atributos target="_blank" o target= "_new") o disparará la descarga de un archivo. Lo mismo se aplica a los scripts que generan ventanas, como los formularios de comentarios, etc.


Evitar el uso de lenguaje HTML obsoleto



Algunos fragmentos de código van cayendo en desuso y pronto serán ilegibles para los browsers. Tal es el caso de BASEFONT, CENTER, FONT, STRIKE, U, etc. Para reemplazarlos conviene usar estilos CSS. Otras etiquetas más nuevas que pueden usarse son las siguientes:
  • OBJECT en lugar de APPLET (java),
  • UL (lista) u OL (lista ordenada) en lugar de DIR o MENU,
  • PRE en lugar de LISTING, PLAINTEXT, o XMP, etc.

Proveer un “sitemap” (mapa del sitio) o “TOC” (tabla de contenidos)



Las ventajas son evidentes: una mejor navegación y un mayor interés generado en el usuario para recorrer otras secciones del sitio. Cuanto más sencillo sea el mapa, mejor; si es posible utiliza sólo html, no imágenes u otros artilugios si es que no contribuyen a la representación clara de la información.

También es bueno utilizar los recursos más conocidos (y por lo tanto intuitivos), como barras de navegación laterales y menús superiores. Tampoco viene mal, en páginas largas, incluir links internos del tipo “volver al comienzo” o similares. Aquí puedes aprender a construir enlaces internos.

Mantén el sistema elegido en todas las páginas del sitio.


Identificar el lenguaje del texto



En el encabezado (header) de la página debe definirse en qué idioma está escrita la mayoría del contenido. Esto es útil no sólo para los buscadores, si no para los usuarios, ya que los navegadores usan esta información para representar el texto con los caracteres especiales que amerita. Aquí puedes aprender a definir el idioma del sitio.


Usa los elementos ABBR y ACRONYM



Con estas etiquetas -muy poco utilizadas- puedes incluir información extra cuando usas abreviaturas como, por ejemplo, “Sub” (subtítulos) o acrónimos como “NASA” (National Aero-Space Administration). Tanto ABBR como ACRONYM admiten el atributo TITLE, donde puedes especificar el significado del vocablo. Es especialmente recomendable cuando las abreviaturas son abundantes en la página, aunque basta definirlas sólo una vez, normalmente la primera vez que aparecen en el texto.
<ABBR title="España">ES</ABBR>
<ACRONYM title="World Wide Web">WWW</ACRONYM>


Otras consideraciones



Es fundamental asegurarse de que el sitio funciona como queremos en diferentes navegadores (browsers). No es recomendable utilizar Internet Explorer durante el diseño, ya que tiene sus propias “reglas” para interpretar una página web. Lee las razones para usar Firefox.

También debe chequearse que el sitio pueda experimentarse en su totalidad sin exigir la instalación de plug-ins especiales. Por ejemplo, si incrustamos un archivo flash creado por nosotros, asegurémonos de exportarlo para el reproductor más bajo compatible (flash 5 en vez de 8, si el script lo soporta); además, si abunda este tipo de contenidos en el sitio o éstos son fundamentales, es muy recomendable ofrecer un enlace hacia la página del fabricante de la tecnología (Macromedia o Adobe, en este caso) para descargar los complementos necesarios.

1 comentarios:

Hosting de alta calidad dijo...

Excelente info. Lo único que a mi parecer le falta, es la selección de un hosting adecuado.
Si necesitas asesoramiento, puedo ayudarte.

Saludos,

Alejandro.

Publicar un comentario