blog
blog copied to clipboard
Lectura de pantalla
En orden de prioridad estas son las características más importantes para asegurar que el blog se lea bien con lectores de pantalla:
- [ ] Las imágenes, símbolos y botones tienen alt-text (1)
- [x] Los frames tienen título para facilitar la navegación. (2)
- [ ] Las imágenes tienen descripciones. (3)
- [ ] Las palabras escritas en otros idiomas están indicadas (4)
- [ ] Las abreviaciones están indicadas correctamente. (5)
Sobre (2), los frames son dinosaurios del HTML, no los usamos ni deberíamos. Así que, hecho!
Sobre (1) y (3), deberíamos destacar el alt text en la guía de estilo, y para las descripciones, si los pies de figura no son suficientes, se podría añadir una nota a pie de página. Si queremos usar longdesc
, la sintaxis de una figura quedaría algo así, no sé si es muy engorroso:
{:.fig}
![Este es el alt text]({{ site.baseurl }}/images/figura.png){:longdesc='{{ site.baseurl }}/images/figura.html'}
Este es el pie de foto
Sobre (4), tenemos que añadir un parámetro lang
a los metadatos de los posts, asumiendo es
por defecto, y luego adaptando las plantillas para que usen el atributo lang
correspondiente. Para palabras sueltas, si es necesario se puede hacer algo como Está en la *cloud*{:lang='en'}.
aunque yo lo limitaría a términos fuera de la jerga técnica (?).
Sobre (5), kramdown es precioso y nos deja escribir un artículo sin preocuparnos, añadiendo al final sintaxis del tipo:
*[HTML]: HyperText Markup Language
*[W3C]: World Wide Web Consortium
Eso incluirá los elementos <abbr>
necesarios, creo. Hay que añadirlo a la guía de estilo también, por tanto.
Para (3) las viñetas de xkcd (que parece que son las pocas imágenes que tenemos) tienen ya transcripciones que podemos añadir como longdesc
.
Creo que tenemos un pequeño problemilla de estilo en cuanto a las abreviaciones (abbr
). Al parecer Firefox coloca un borde debajo del texto abreviado, y nuestro CSS añade otro borde:
Chrome, por su parte, no añade un borde por defecto:
Así que el doble borde queda raro, pero si quitamos el de CSS en Chrome no tendría formato :(
Tal vez pueda resolverse (5) usando text-decoration: dotted underline;
en el CSS como forma de subrayar las abreviaturas en lugar de border-bottom: 1px dotted;
. No dispongo de Chrome, pero al cambiar una línea por otra en Firefox (bendito F12) el subrayado que se presenta es idéntico al que viene "de serie" para las abreviaturas, y al aplicarlas a estas se ve igual que si no se aplicase.