Accesibilidad HTML
Accesibilidad HTML
¡Escriba siempre el código HTML teniendo en cuenta la accesibilidad!
Proporcione al usuario una buena manera de navegar e interactuar con su sitio. Haga que su código HTML sea lo más semántico posible.
HTML semántico
HTML semántico significa usar elementos HTML correctos para su propósito correcto tanto como sea posible. Los elementos semánticos son elementos con un significado; si necesita un botón, use el <button>elemento (y no un
<div>elemento).
Semántico
<button>Report an Error</button>
no semántico
<div>Report an Error</div>
El HTML semántico brinda contexto a los lectores de pantalla, que leen el contenido de una página en voz alta.
Con el ejemplo del botón en mente:
- los botones tienen un estilo más adecuado por defecto
- un lector de pantalla lo identifica como un botón
- enfocable
- clicable
También se puede acceder a un botón para las personas que dependen de la navegación solo con el teclado; se puede hacer clic con el mouse y las teclas, y se puede tabular entre (usando la tecla de tabulación en el teclado).
Ejemplos de elementos no semánticos : <div>y <span>- No dice nada sobre su contenido.
Ejemplos de elementos semánticos : <form>, <table>y <article>- Define claramente su contenido.
Los encabezados son importantes
Los encabezados se definen con las etiquetas <h1>to :<h6>
Ejemplo
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Los motores de búsqueda utilizan los encabezados para indexar la estructura y el contenido de sus páginas web.
Los usuarios hojean sus páginas por sus encabezados. Es importante utilizar encabezados para mostrar la estructura del documento y las relaciones entre las diferentes secciones.
Los lectores de pantalla también usan encabezados como una herramienta de navegación. Los diferentes tipos de encabezado especifican el contorno de la página.
<h1>los encabezados deben usarse para los encabezados principales, seguidos de <h2>los encabezados, luego los menos importantes
<h3>, y así sucesivamente.
Nota: Use encabezados HTML solo para encabezados. No use encabezados para hacer que el texto sea GRANDE o en negrita .
Texto alternativo
El altatributo proporciona un texto alternativo para una imagen, si el usuario por alguna razón no puede verla (debido a una conexión lenta, un error en el
src
atributo o si el usuario usa un lector de pantalla).
El valor del altatributo debe describir la imagen:
Ejemplo
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
Si un navegador no puede encontrar una imagen, mostrará el valor del alt
atributo:
Ejemplo
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
Declarar el idioma
Siempre debe incluir el lang
atributo dentro de la <html>etiqueta, para declarar el idioma de la página web. Esto está destinado a ayudar a los motores de búsqueda y navegadores.
El siguiente ejemplo especifica el inglés como idioma:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Usa un lenguaje claro
Utilice siempre un lenguaje claro, que sea fácil de entender. También intente evitar caracteres que un lector de pantalla no pueda leer claramente. Por ejemplo:
- Mantén las oraciones lo más cortas posible.
- Evite los guiones. En lugar de escribir 1-3, escriba 1 a 3
- Evite las abreviaturas. En lugar de escribir febrero, escribe febrero
- Evite las palabras de jerga
Crear buen texto de enlace
El texto de un enlace debe explicar claramente qué información obtendrá el lector al hacer clic en ese enlace.
Ejemplos de enlaces buenos y malos:
Bien
Malo
Nota: Esta página es una introducción a la accesibilidad web. Visite nuestro tutorial de accesibilidad para obtener más detalles.