La accesibilidad se refiere a que los usuarios puedan acceder a nuestro contenido. Debido a que el texto es tan importante para el contenido de su página, es crucial hacerlo accesible para todos.
Texto vs Imágenes:
Podemos usar el texto real, en lugar de utilizar texto dentro de un gráfico. Una imagen no se puede leer con tecnología de asistencia, y el texto de una imagen no se puede escalar mediante un navegador como el texto ordinario. Si la imagen no se carga correctamente, pero aún queremos que el usuario sepa acerca de la imagen adjunta relacionada. Luego, en ese caso, podemos agregar la descripción de la imagen en breve, especificándola usando el atributo alt en la etiqueta <img>.
Sintaxis:
<img src="local-image path" alt="text">
Contraste: El contraste debe ser lo suficientemente alto entre el color del texto y el color de fondo de los elementos, para que las personas con baja visión puedan verlo claramente. La relación de contraste mínima recomendada será de preferencia 4,5:1. Podemos verificar el contraste o la combinación de colores específica (en caso de que no estemos seguros) utilizando uno de los verificadores de contraste de color, como el verificador de contraste de color de WebAIM. No existe una herramienta automatizada eficaz dedicada que se pueda utilizar para comprobar el contraste. También podemos usar las herramientas de desarrollo de accesibilidad de Google Chrome, que contienen el verificador de contraste, para realizar esta tarea.
Tamaño de Tipo: Se recomienda utilizar las unidades rem y em , para poder dimensionar todo. Esto no solo ayuda en el tamaño de la fuente, sino que también nos ayuda en el relleno, los márgenes, cualquier valor de longitud, etc., lo que garantiza que el diseño se amplíe y reduzca uniformemente, en caso de que el usuario cambie el tamaño del texto de su navegador. El cambio de tamaño del texto en el navegador, hasta un nivel de zoom del 200%, es común para los usuarios con problemas de visión. En Foundation CSS, la unidad rem se puede usar en casi todas partes, incluso escribiendo la función Sass para facilitar la tarea general. La función rem-calc() se puede utilizar para convertir el valor de píxel en valores rem adecuados, que aceptan uno o más valores de píxel.
Sintaxis:
.head {
font-size: rem-calc(200);
padding: rem-calc(20 20);
}
Ejemplo: En este ejemplo, la imagen no carga, en lugar de eso, se mostrará el texto “geeksforgeekslogo”, especificando el atributo alt .
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Foundation CSS Base Typography</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" crossorigin="anonymous" /> </head> <body> <center> <h2 style="color: green"> GeeksforGeeks </h2> <h4> Foundation CSS Base Typography Accessibility </h4> <img src="static/images/geeksforgeeks.jpg" alt="geeksforgeekslogo" /> </center> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/typography-base.html#accessibility
Publicación traducida automáticamente
Artículo escrito por isitapol2002 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA