Ejemplo de espacio entre las letras de una palabra

Muchos desarrolladores de páginas web introducen espacios en blanco entre las letras de una palabra para crear un efecto visual especial, normalmente cuando la palabra forma parte de un título. Esto ocasiona un grave problema de accesibilidad: un lector de pantalla no lee la palabra entera como tal, sino que la lee letra a letra.

En mi ejemplo Espacio entre las letras de una palabra explico qué propiedades de CSS se pueden emplear para separar las letras de una palabra sin que afecte a su lectura.

Ejemplo de formulario con un cuestionario tipo test accesible

En mi ejemplo Formulario con un cuestionario tipo test explico cómo se puede crear un formulario con un cuestionario tipo test que sea accesible. Para ello, se emplean las etiquetas HTML de listas (numeradas y no numeradas) para estructurar de forma accesible las preguntas y respuestas y se utilizan las propiedades de CSS list-style-position y list-style-type para configurar el aspecto visual de las listas.

Ejemplo de encabezados de sección correctos

He creado un nuevo apartado con ejemplos en mi sitio web sobre Accesibilidad web. Escribir allí los ejemplos me es más cómodo que hacerlo aquí en Blogger.

El primer ejemplo es Encabezados, y explica el porqué de su uso. Además de explicar la "teoría", incluyo un ejemplo donde se hacen las "cosas mal", para posteriormente corregirlo con las etiquetas de encabezado (h1, h2, ...). También explico cómo beneficia el empleo de los encabezados a los usuarios discapacitados que utilizan un lector de pantallas e incluyo un par de archivos de sonido con grabaciones de JAWS.

Centrado vertical con CSS

¿Cómo se puede centrar verticalmente un contenido con CSS? La solución no es obvia, existen diferentes métodos con sus ventajas y desventajas. En el artículo Vertical Centering With CSS nos explican cinco métodos.

¿El mejor método? El método 3: consiste en introducir un div vacio antes del div con el contenido. Este div vacío tendrá de altura el 50% menos la mitad de la altura del contenido. Para quitarle la mitad de la altura del contenido se emplea la propiedad CSS margin-bottom. ¡Genial!

<div id="top">
Título de la página
</div>
<div id="floater"></div>

<div id="content">
El contenido que se quiere centrar verticalmente
</div>

Y el CSS:

#floater {float:left; height:50%; margin-bottom:-120px;}
#top  {float:right; width:100%; text-align:center;}
#content {clear:both; height:240px; position:relative;}

CSS3 Speech Module

CSS3 Speech Module es una propuesta del W3C (se encuentra todavía en fase de borrador de trabajo) que permite crear hojas de estilo en cascada que definen cómo reproducir mediante un sintetizador de voz un documento XML (y, por supuesto, una página web). Es de esperar que los lectores de pantalla sean capaces de interpretar estas hojas de estilo para lograr una reproducción más correcta.

La versión anterior de esta propuesta se conoce como Aural Cascading Style Sheets y forma parte de CSS2 Specification del año 1998. Algunas propiedades que define son volume, speak, pause-before, pause-after, pause, cue-before, cue-after y cue.

CSS3 Speech Module define 22 propiedades con sus correspondientes valores para utilizar en un CSS. Algunas de las propiedades y sus valores son:

• voice-volume: define el volumen del sonido. Algunos de sus posibles valores son: silent, soft, medium y loud.
  
• voice-balance: define el balance del sonido en un sistema de reproducción estéreo con dos altavoces (izquierda y derecha). Algunos de sus posibles valores son: left, center, right, leftwards y rightwards.
• speak: define la forma de reproducir algunos elementos del texto, como los números o los signos de puntuación. Algunos de sus posibles valores son: normal, digits y no-punctuation.
• pause-before, pause-after, pause: define la duración de una pausa antes o después de reproducir un elemento del texto.
  
• voice-family, voice-rate, voice-pitch, voice-pitch-range, voice-stress: define las características de la voz a emplear en la reproducción del texto.
  

Además, define el "aural box model", similar al "box model" que se emplea en la representación visual de una página web. En la siguiente imagen podemos observar la relación entre el "box model" aural y el visual:

Uso de la propiedad float de CSS

El uso de la propiedad float de CSS es un poco confuso. Si se hacen pruebas sin haber leído antes una explicación sobre cómo se usa es difícil sacar conclusiones. Pero esta propiedad es muy importante si se quiere lograr un diseño (layout) de una página web que sea válido para diferentes resoluciones de pantalla.

En la sección 9.5 Floats de Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification podemos encontrar la explicación oficial de esta propiedad. Pero para aprender a usar la propiedad float, es mucho mejor consultar Floatutorial. Este tutorial ofrece explicaciones muy claras sobre el uso de este atributo y termina explicando como se puede utilizar para lograr un diseño a 2 columnas o a 3 columnas líquido (que se adapte a diferentes resoluciones de pantalla).

Página con muchos recursos

Acabo de encontrar la página web Web Design References: Accessibility. Es una página web muy buena, ya que contiene multitud de enlaces a páginas web donde explican temas relacionados con la accesibilidad. Los temas que contiene son:

• Abbreviations & Acronyms
• Accessibility Statements
• Accesskeys
• Alt Attributes , Alt Text, Long Descriptions
• Assistive Technology
• Baseline
• Benefits (Why accessibility?)
• Captcha (Completely Automated Public Turing test to tell Computers and Humans Apart)
• Checklists
• Cognitive Disabilities
• Definitions and Overviews
• Device Independence and Graceful Degradation
• Deprecated Features
• Flicker
• Forms
• Language
• Law, Lawsuits, Policies
• Lists
• Mailto
• Multimedia
• Open Source
• Plugins, PDF, PowerPoint, etc.
• Relative sizing
• Scripts
• Structure & Semantics
• Style Sheets (Accessibility)
• Tables
• Testing, Checking, Validating
• Text Links
• Text Only Versions
• Usability and Accessibility
• Zoom Layouts
• Articles & Related Links

Serie "Guía breve": Organización de las páginas

Consejo 5: Organización de las páginas: Use encabezados, listas y estructura consistente. Use CSS para la maquetación donde sea posible.

Las páginas web tienen que estar correctamente estructuradas. Para ello, se tienen que explear las etiquetas de HTML que definen la estructura de una página, como son:

<title>, <h1>, <h2>, ..., <ul>, <ol>, <p>, <blockquote>

Toda página web debe tener un título definido con la etiqueta title que resuma el contenido o la función de la página.

El contenido de las páginas se tiene que estructurar con las etiquetas de encabezado h1, h2, ... La mayoría de los lectores de pantalla y algunos navegadores como Opera permiten al usuario desplazarse dentro de una página web "saltando" de un encabezado a otro encabezado. Eso permite llegar de una forma más rápida a la información que se busca. Por ejemplo, la siguiente página web está estructurada en diversos apartados: Presentación, Formación académica, Investigación, Docencia, Libros, etc.

En la siguiente imagen de Fangs, que simula el comportamiento de un lector de pantallas, podemos observar la lista de encabezados (Heading list) de la página anterior. Cada encabezado lleva asociado un número que indica en nivel de encabezado (del 1 al 6).

Para maquetar una página web nunca se deben utilizar las tablas, ya que suponen un grave problema de accesibilidad. Una página web se puede y debe maquetar con CSS y obtener el mismo resultado que se obtendría con tablas. Un par de enlaces sobre cómo maquetar sin tablas:

• Porqué el diseñar con tablas es estúpido: problemas definidos, soluciones ofrecidas
• CSS Layout Techniques: for Fun and Profit

Enlace de "salta navegación"

En muchas páginas web, es costumbre incluir una barra de navegación con multitud de enlaces al principio de la página web, antes del contenido principal de la página.

Para aquellas personas que emplean una navegador no visual, por ejemplo un lector de pantalla, una barra de navegación con muchos enlaces no suele suponer una barrera, pero sí que suele retardar la navegación al tener que recorrer la barra de navegación completa cada vez que se visita una página nueva. Para facilitar la navegación a estos usuarios, es recomendable proporcionar una manera de saltar la barra de navegación. Para ello, se suele incluir al principio de la página web un enlace dentro del propio documento que salta al contenido principal.

En la página web Enlaces de "saltar navegación" se puede encontrar una comparativa sobre distintas técnicas (o trucos) que existen para ocultar el enlace "saltar navegación" para aquellos usuarios que emplean un navegador visual. Estas técnicas son:

• Oculto: Al enlace se le aplica el atributo display: none.
• Desplazado: Esta vez el enlace se oculta sacándolo del área visible del
  documento, generalmente aplicándole la regla text-indent:-100em.
• "Fantasma": Una imagen transparente es la que enlaza al contenido.

La conclusión que se extrae de esta comparativa es que es mucho mejor evitar estas técnicas, ya que su interpretación y funcionamiento varía entre distintos lectores de pantalla o incluso entre distintas versiones del mismo lector de pantalla.

Para resolver esta situación, existen dos posibles alternativas:

1. No intentar ocultar el enlace "saltar navegación", sino integrarlo en la propia página web como un elemento más.
2. Situar la barra de navegación al final de la estructura del documento y mediante hojas de estilo en cascada (CSS) colocar la barra de navegación al principio de la página.