✨ A reminder for newcomers to the fediverse ✨
When you upload an image or video, don’t forget to fill in the "alt" or alternative text field.
This text helps blind people (like me) access the visual content of images and videos, and allows deaf people to understand the audio in those videos.
Adding alternative text makes Mastodon a more inclusive space for everyone. Thank you for contributing! 💜
=> More informations about this toot | View the thread
✨ Recordatorio para quienes son nuevos en el fediverso ✨
Cuando subas una imagen o vídeo, no olvides completar el campo "alt" o texto alternativo.
Este texto permite que personas ciegas (como yo) puedan acceder a la información visual de las imágenes y vídeos, y que personas sordas comprendan el contenido auditivo de dichos vídeos.
Añadir texto alternativo hace que Mastodon sea un espacio más inclusivo para todos. ¡Gracias por contribuir! 💜
=> More informations about this toot | View the thread
Conclusión 2: La próxima vez publico esto en Linkedin, que es más cómodo para todos, jajaja.
=> More informations about this toot | View the thread
Siempre intenta adaptar el texto de tus enlaces para que tengan contexto por sí mismos. Si no es posible, yo prefiero usar la técnica de "aria-labelledby", puesto que para lectores de pantalla estamos creando enlaces con contexto utilizando los textos existentes, por lo que no tendremos problemas con futuras traducciones o textos cambiantes. Pero de nuevo, lo más inclusivo es cambiar los textos, ya que también estaremos incluyendo al perfil de usuarios que usen control por voz.
=> More informations about this toot | View the thread
Además, estamos dando por hecho que el usuario que usa control por voz debe cambiar su hoja de estilos para que la web funcione, lo cual tampoco mola nada.
=> More informations about this toot | View the thread
¿Funcionará?
Al igual que con aria-labelledby y aria-label, esto funcionará para los perfiles de lector de pantalla, pero no del todo para los usuarios que utilizan control por voz. Sin embargo, para ellos, podría haber una solución, y es que utilicen hojas de estilo personalizadas que invaliden la clase sr-only, de forma que el texto del enlace se muestre completo visualmente.
Sin embargo, esto seguramente romperá el diseño, lo cuál repercutirá negativamente en la experiencia de estos usuarios.
=> More informations about this toot | View the thread
https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034#file-index-html-L8
Aquí se explica el porqué de cada propiedad, y hay algunos comentarios interesantes. También se explica la diferencia entre sr-only y sr-only-focus, para enlaces que solo deben aparecer cuando se coloca el foco sobre ellos.
=> More informations about this toot | View the thread
Estamos utilizando una etiqueta para aplicar un estilo CSS, que básicamente sacará ese texto de la zona visible de nuestra pantalla, pero manteniendo ese span dentro del dom, lo que hará que los lectores de pantalla sí lo lean, aunque visualmente no aparezca.
Esta es la CSS utilizada:
=> More informations about this toot | View the thread
Otra técnica muy utilizada es ocultar parte del texto del enlace visualmente.
¿En qué consiste?
Fijaos en este enlace:
Seguir leyendo el cambio climático y su efecto en el permafrost
=> More informations about this toot | View the thread
Pero... ¿qué ocurre con los usuarios que usan control por voz? pues que ellos se basan en el contenido visual. Cuando el usuario mira la pantalla, leerá: "leer más", y es lo que le dirá a su ordenador: "click en leer más"... Y volvemos a tener el problema del principio.
Así que siempre es mejor cambiar el texto del enlace para evitar problemas de accesibilidad con uno u otro perfil.
=> More informations about this toot | View the thread
¿El uso de aria-labelledby o aria-label arregla el problema?
No del todo. Lo arreglará para los usuarios ciegos o para los robots que analizan nuestra página web. Cuando los usuarios ciegos saquemos la lista de enlaces, el texto se leerá correctamente, y cuando los robots indexen nuestros enlaces, el texto también debería indexarse correctamente (si son un poco listos, que lo son), aunque para SEO el texto visible posiblemente tenga más relevancia.
=> More informations about this toot | View the thread
¡Ya lo tenemos! En nuestra lista de enlaces, ahora podremos tener contexto adicional. Eso sí, recordad que aria-label también tiene que traducirse cuando trabajemos con traducción a varios idiomas, si no, acabaremos leyendo enlaces en español y textos en inglés, por ejemplo.
=> More informations about this toot | View the thread
2.2. Aria-label:
Aria-label permite añadir una etiqueta accesible a un control interactivo, por ejemplo un enlace.
Imaginad este enlace:
Leer más
Visualmente, el enlace rezará: "leer más", pero los lectores de pantalla leerán: "leer más sobre el artículo 'el cambio climático y su efecto en el permafrost'".
=> More informations about this toot | View the thread
¡Importante! Recuerda que el atributo "id" en un documento HTML tiene que ser único. No vale que le pongas el mismo id a siete etiquetas diferentes, porque la gracia es que podamos identificar una etiqueta de forma unívoca, diferenciándola del resto de etiquetas HTML de nuestro documento.
Si lo llevamos al mundo de las bases de datos, el id es la clave primaria del árbol HTML.
=> More informations about this toot | View the thread
¿Qué se verá? Seguir leyendo.
¿Qué se escuchará? Seguir leyendo el cambio climático y su efecto en el permafrost.
¿Por qué? Porque el nombre accesible del enlace es el contenido del enlace en sí mismo (hemos usado su identificador), más el contenido del encabezado (también hemos usado su identificador). Como véis, el orden de los identificadores en el atributo aria-labelledby importa, pues la composición de la etiqueta seguirá dicho orden.
=> More informations about this toot | View the thread
2.1. Aria-labelledby:
Este atributo acepta el identificador único (id) de una o varias etiquetas, cuyos contenidos serán utilizados para componer el nombre accesible del control al que se aplica.
¿Qué? ¡No me he enterado de nada!
Espera, que te lo enseño con un ejemplo:
=> More informations about this toot | View the thread
Aria es un conjunto de atributos complementarios a HTML que enriquece nuestros documentos web, para dotarlos de mejor semántica, y permite añadir información adicional para mejorar la experiencia con ayudas técnicas (lectores de pantalla, principalmente). Dos de estos atributos que se pueden aplicar a etiquetas como , , , ... son los atributos "aria-labelledby" y aria-label. Vamos a verlos:
=> More informations about this toot | View the thread
¿Arregla el problema?
Por supuesto, tanto para usuarios ciegos como para usuarios que usen asistentes de control por voz, puesto que los enlaces tienen textos diferentes, y son comprensibles por sí mismos.
=> More informations about this toot | View the thread
Sí, amigos, ¿qué tal si en lugar de poner un "leer más" ponemos el título del artículo como enlace, y ya está? Entiendo que poner "Leer más sobre El cambio climático y su efecto en el permafrost" seguramente estropeará tu diseño, y queda repetitivo porque ya está el título justo antes... así que, quizá con el título ya es suficiente.
=> More informations about this toot | View the thread
¿Solución?
Pues aquí tenemos tres soluciones principales. Las ordeno de mejor a peor según mi opinión:
=> More informations about this toot | View the thread
=> This profile with reblog | Go to kastwey@bookstodon.es account This content has been proxied by September (ba2dc).Proxy Information
text/gemini