Legibles
Un elemento legible es aquel que se convierte de texto a voz cuando ocurre un determinado evento, por ejemplo cuando se le hace clic.
Índice
- Elementos legibles
- Cambiando la voz del lector
- Figuras legibles
- Cambiando el evento que dispara la lectura
La clase readable
Con FastLight podemos crear elementos "legibles", indicando la clase
readable en ellos. Un elemento HTML, por el hecho de ser readable,
también tendrá un icono de altavoz
delante por motivos de usabilidad (hay que comprobar si se ve bien en otros
tipos de elemento que no sean
párrafos) y un título descriptivo.
Esto puede ser útil en términos de accesibilidad. Esta característica aún está abierta a sugerencias y modificaciones.
Ejemplo
Este párrafo es legible, si haces clic en él, el primer lector configurado te leerá su contenido.
Este otro párrafo también lo es. Si vas haciendo clic en múltiples elementos, se añadirán los textos a la cola de lectura.
Código del ejemplo
Voces
Se puede cambiar la voz del elemento legible, usando la propiedad
personalizada data-voice. En ella indicaremos el índice
de la voz que queremos usar, de entre las que tengamos disponibles.
Si indicamos el índice de una voz inexistente, se usará la voz
por defecto (índice 0).
Al cambiar la voz, esta quedará modificada hasta que se realice un nuevo cambio.
Ejemplo
Este párrafo es leido con la primera voz disponible.
Este párrafo es leido con la segunda voz disponible.
Este párrafo es leido con la tercera voz disponible.
La voz 999 no existe (en principio).
Código del ejemplo
Figuras legibles
Las figuras no son legibles, pero sí lo son las leyendas o los párrafos
que puedan contener. Si se indica la clase readable a la
figura, el navegador leerá todo su contenido textual.
También podemos marcar como legible tan solo parte del contenido de la figura.
Y otra opción a considerar, es la posibilidad de añadir texto oculto que sea legible, mediante voz, aunque esto no se recomendaría por motivos de accesibilidad.
A continuación se muestran diversas combinaciones.
Ejemplo
Título
Este párrafo es legible.
Este no lo es.
Título
Leyenda de la figura, primer párrafo.
Segundo párrafo.
Título
Esta figura tiene elementos que se muestran y otros que no. Al final se leerán todos.
Este texto sí se muestra.
Código del ejemplo
Cambio de evento
Podemos hacer que el texto se lea cuando se produzca otro tipo de evento que no sea clic, por ejemplo: doble clic, colocar el ratón encima...
En principio parece que tiene más sentido para eventos de ratón, pero se puede experimentar con distintos grupos de evento.
Se usa la propiedad data-event para indicar el tipo
de evento y data-info (opcional) para añadir un texto
descriptivo para incluir en el atributo title del elemento.
Ejemplo
Este párrafo se lee mediante un clic (evento por defecto).
Este párrafo se leerá al hacer doble clic.
Este también se lee con doble clic, como no se ha indicado el
atributo data-info, el título mostrará el texto dblclick.