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.
- Ocultando texto al 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
El lector elegirá de manera automática la voz más adecuada, acorde al código de idioma
indicado en el elemento html de la página. En FastLight se puede configurar
el código de idioma mediante la constante LANGUAGE_CODE
en el fichero config.php.
Si se desea, se puede cambiar la voz por otra usando la propiedad
personalizada data-voice en el elemento legible.
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 leído con la primera voz disponible.
Este párrafo es leído con la segunda voz disponible.
Este párrafo es leído con la tercera voz disponible.
La voz 999 no existe (en principio).
Código del ejemplo
Ocultando texto al lector
Puede ser que tengamos un elemento legible que contenga otros elementos
que no queremos que sean leídos, para evitar que los lea podemos indicar
la propiedad aria-hidden="true" en estos elementos internos.
Ejemplo
Hola
Este es un párrafo en un contenedor legible, por tanto será leído.
Este es otro párrafo en un contenedor legible, también será leído.
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.