Lectura de pantalla

[mx-psi]

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)
• 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)

[fdavidcl]

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.

[mx-psi]

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.

[fdavidcl]

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 :(

[josemam]

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.

[fdavidcl]

Gracias por la sugerencia @josemam! Parece que la propiedad text-decoration con variaciones de estilo (dotted, wavy, etc.) sólo está soportada en Firefox [mdn]. Pero se puede anular el text-decoration[so] y dejar el borde en su lugar, que es lo que he hecho en d1dfa7e.