¡Mantener su sitio web accesible no es una tarea tan desalentadora como parece! Aquí hay algunos consejos simples que debe tener en cuenta mientras codifica:
Texto alternativo: El texto alternativo tiene dos propósitos principales:
- Proporcione a los usuarios con discapacidades visuales una descripción de lo que representa esa imagen.
- Si una imagen no se carga debido a la lentitud de Internet u otros problemas, los usuarios pueden usar esa descripción para saber qué falta en la página.
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Alt Text</title> </head> <body> <img src= "gfg.jpg" alt="puppy image" class="image"> </body> </html>
Producción:
Etiqueta de título: la etiqueta <título> en HTML se utiliza para definir el título del documento HTML. Establece el título en la barra de herramientas del navegador. Proporciona el título de la página web cuando se agrega a favoritos. Muestra el título de la página en los resultados del motor de búsqueda.
<!DOCTYPE html> <html> <head> <title>Accessibility in HTML | Home Page</title> </head> <body> <h1>Home Page</h1> </body> </html>
Producción:
Encabezados: Si estás usando un encabezado porque te gusta el tamaño de fuente, deja de ser perezoso y usa CSS. Los encabezados juegan un papel importante para mantener accesible la estructura de su sitio web. Los usuarios que confían en un lector de pantalla para navegar por la web pueden revisar el contenido de un sitio web con cada encabezado a la vez. El lector de pantalla recorrerá los encabezados en orden y, si los usa correctamente, puede hacer que su sitio web esté más organizado y sea más fácil de navegar.
- La etiqueta h1 solo debe usarse para el título de la página.
- La etiqueta h2 se utiliza para las subcategorías. Ejemplo: si está creando un sitio web sobre cada personaje del programa de televisión Friends, debe usar h1 para el título «Friends» y h2 para cada personaje (Rachel, Monica, Phoebe, Chandler, Joey y Ross).
- No abuses de los encabezados. Si necesita más de h3, probablemente lo esté usando demasiado y su sitio web podría ser difícil de navegar.
Etiquetas: debe usar etiquetas para indicar el propósito de ciertos elementos en su página.
- Si tiene un botón o un formulario en su página, debe usar una etiqueta que indique la etiqueta del botón o elemento del formulario. Una vez más, es muy útil para los usuarios que confían en los lectores de pantalla.
- Las etiquetas ARIA son la mejor manera de agregar etiquetas y descripciones accesibles. Anula cualquier otro mecanismo de etiquetado nativo, como el elemento de etiqueta HTML.
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Labels</title> </head> <body> <form aria-label="Go to geeks for geeks home page" action="https://www.geeksforgeeks.org/" target=”_blank”> <input type="submit" value="Go to GeeksForGeeks" /> </form> </body> </html>
Producción:
Menús: para que se pueda acceder a un menú desplegable, los elementos desplegables deben permanecer en la pantalla. De lo contrario, si el usuario pasa accidentalmente fuera del menú desplegable, ya no podrá escuchar los elementos. Use un clic en lugar de pasar el mouse para asegurarse de que el menú permanezca en la pantalla.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Menu</title>
<style>
.dropdown {
display: inline-block;
position: relative;
}
.dropdown-items {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-items a {
display: block;
}
.show {
display: block;
}
</style>
<script>
function myFunction() {
document.getElementById("dropdown-menu")
.classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.
getElementsByClassName("dropdown-items");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">
Dropdown
</button>
<div id="dropdown-menu" class="dropdown-items">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
</div>
</body>
</html>
Producción:
Tecla de tabulación:
- Si desea asegurarse de que se pueda navegar fácilmente por su sitio web, pero no desea probar su código con un lector de pantalla con cada cambio que realice, ¡utilice la tecla TAB de su teclado!
- El lector de pantalla recorrerá el contenido de su sitio web en el mismo orden que la tecla TAB.