Uso de medidas relativas para accesibilidad en texto web
Resumen
¿Por qué es importante la accesibilidad en el texto web?
Garantizar la accesibilidad en el contenido textual de una página web es esencial para asegurar que todas las personas, independientemente de sus capacidades visuales, puedan interactuar y consumir el contenido de manera efectiva. La accesibilidad no depende únicamente de elegir fuentes atractivas o sencillas, sino de cómo se mide y se ajusta ese texto para que sea escalable según las necesidades del usuario.
¿Cuáles son las desventajas de utilizar medidas absolutas como píxeles?
Cuando se establecen tamaños de fuente en píxeles, se está utilizando una medida absoluta. Esto significa que, independientemente de la configuración del usuario o de las herramientas del navegador para aumentar el tamaño del texto, el contenido no se ajustará. Esta rigidez puede afectar enormemente a las personas con problemas visuales, ya que no podrán ampliar el texto para facilitar su lectura.
Ejemplo de código con medidas absolutas en píxeles:
¿Qué problemas enfrenta un usuario con limitaciones visuales?
Imposibilidad de ajuste: Con medidas en píxeles, el texto permanece estático y no responde a las configuraciones de accesibilidad del usuario.
Experiencia deficiente: Los usuarios deben encontrar alternativas, como acercar el contenido con la función de zoom, lo que puede resultar incómodo.
Inclusión limitada: No todos los usuarios pueden interactuar equitativamente, reduciendo la accesibilidad.
¿Cómo pueden mejorar la accesibilidad las medidas relativas como rem?
El uso de medidas relativas como rem resuelve las limitaciones de los píxeles ofreciendo flexibilidad en el texto. Rem es una unidad que se basa en el tamaño de la raíz html. Esto permite que el texto se escale de acuerdo con las preferencias del usuario, haciendo las interfaces más inclusivas.
Ejemplo de código usando medidas relativas en rem:
<style>html{font-size:62.5%;/* Equivale a 10px, para facilitar el cálculo */}h1{font-size:3rem;/* Equivale a 30px */}p{font-size:1.8rem;/* Equivale a 18px */}</style>
Beneficios de utilizar rem
Escalabilidad: Permite que el texto se ajuste dinámicamente con las configuraciones del navegador.
Accesibilidad universal: Ofrece a las personas con problemas visuales la capacidad de adaptar el texto a sus necesidades específicas.
Flexibilidad de diseño: Permite crear interfaces que mantienen la consistencia visual sin sacrificar la accesibilidad.
¿Cómo implementar mejor prácticas en accesibilidad textual?
Adoptar medidas relativas y seguir estándares modernos de diseño es clave para crear experiencias web inclusivas:
Utiliza rem o em: Evita medidas absolutas como píxeles y opta por unidades relativas.
Prueba la escalabilidad: Asegúrate de que el texto pueda ampliarse en distintos navegadores y dispositivos sin perder legibilidad o romper el diseño.
Considéralo desde el diseño: Planifica la accesibilidad desde el inicio de la creación del contenido, codo a codo con los responsables de diseño.
Al aplicar estas prácticas, te asegurarás de que tu contenido sea verdaderamente accesible para toda la audiencia, sin importar sus necesidades visuales, y contribuirás a una web más inclusiva. No olvides que una buena experiencia de usuario incluye la posibilidad de adaptación para cada individuo. ¡Seguiremos explorando más sobre accesibilidad en la próxima lección!
Me quede así cuando al fin supe por que rem en lugar de píxeles (゜ー゜)
jajajaj, tal cual
jajaja asi quede yo tambien y no le estaba dando importancia a los rem XD
TEXTOS
Se recomienda fuertemente usar medidas relativas como rem, para poder incrementar el tamaño del texto para personas con visibilidad disminuida. Las opciones de navegador que cambian el tamaño de las fuentes no funcionan cuando las fuentes de html en el texto están en pixeles (px).
Bien dicho
bien
No me cargaba la clase, pero una chica comento que cambiáramos a el Server A y si funciona.
Todos los créditos para ella.
Solo lo comparto por si alguien también tiene el mismo problema :)
¡Esto ya fue corregido! Muchas gracias
Nunca pares de aprender :)
Perfecto!
Gracias por comentarlo :)
Muy buenos datos!!!
62.5% = 10px (en base al navegador)
1rem = 10px
1.6rem = 16px
etc.
Creo que ya tengo de memoria esos atributos 😁😁
Excelente!!!
Realmente considero que ya no hay necesidad de usar "px" (o al menos usarlo en casos extremadamente específicos) con este "hack" de los rem que aprendimos prácticamente que ya no es necesario, creo que este es uno de los temas que más me encanta jaja, ya quiero llegar al curso de accesibilidad!
Para min-width y max-width se sigue usando px...aunque se quiera dejarlo...aún no se puede creo 😅
Con esta clase entendí mejor la utilidad de rem y me parece genial!
Total. Me quedaba una pequeña duda en la práctica que ya dilucidé.
Un punto importante de Accesibilidad no solo hay que pensar en nosotros, hay que pensar en los demás usuarios que podrían incluso tener una capacidad diferente.
En este curso me lleve mucho aprendizaje, pero esta lección es la mas importante.
Y desde ahora daré lo mejor de mi para ofrecer servicios al alcance de todos.
La vuelta es nunca trabajar TEXTO con px, siempre rem
Texto
Siempre debemos usar medidas relativas al momento de darle un tamaño a nuestros textos. Esto permitirá a los usuarios incrementar el tamaño de la fuente de ser necesario, lo cual no sucede si usamos medidas absolutas.
ahora si por fin siento que el rem es util
ajajajaajaja pienso lo mismoo
jajjajajaaj eso si es muy importante el rem y te ayuda demasiado :D
Muy bueno. El curso me sirvió mucho para repasar conceptos que ya conocía, pero jamás había escuchado el tema de la accesibilidad, ahora incluso conozco su importancia y bueno, a seguir repasando jeje.
Nunca pares de aprender :)
Bien ahi, sigue adelante :D
Clase 52 - Textos
¿El manejo del texto es importante en la accesibilidad de un producto/proyecto web?
Sí.
¿Qué aspecto debemos manejar en los textos para que nuestro producto/ proyecto web sea accesible a los demás?
Las medias que usamos para definir el tamaño de estos textos.
¿Qué medida debemos de usar para que los textos de nuestro producto/proyecto web sea accesible?
Rem.
¿Por qué debemos de usar la media rem para que los textos de nuestros productos/proyectos web sean accesibles?
Porque los textos también crecerán si el usuario aumenta el tamaño del texto por medio de una configuración desde el navegador, cosa que no podemos hacer con medidas absolutas como los px.
no puedo ver este video :( se queda cargando
¡Hola! ¿Intentaste cambiar de server? A mi me pasó igual en el Server C, pero cargó perfecto en el A.
Muchas gracias! con el server A si pude :D
De verdad que después de escuchar el podcast de platzi donde entrevistan a diego, empecé a admirar más su trabajo. Se los recomiendo a todos.
Sinceramente me encanta cuando en clases como esta, le encuentro el sentido a utilizar una herramienta digamos y cual es el beneficio que aporta :D me encantó el curso.
44. Mis apuntes sobre: "Textos"
Siempre se deben usar medidas relativas en el texto (em / rem) en vez de px, que es una medida absoluta.
Les comparto el código de la clase:
HTML:
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="./style.css"><title>Document</title></head><body><h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident optio, molestiae earum obcaecati voluptatem dolore aperiam, voluptatibus itaque sunt illo in neque hic amet fuga minima, rem voluptate nobis quasi.</p></body></html>
Es bueno darse cuenta de que como desarrollador debes pensar en la accesibilidad. Las herramientas que creamos son para la gente y eso incluye a todos.
Muy de acuerdo con tu comentario. No solo enfocarse en "dispositivos" (Responsive), sino en contenido para todos.
Un tema que tambien debemos tener en cuenta es la accesibilidad para las personas que padece de daltonismo
aqui unos tips para mejorar las pagians en estos aspectos: