HTML Accesibilidad
HTML Accesibilidad
¡Escribe siempre 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 utilizar elementos HTML correctos para su propósito correcto tanto como sea posible. Los elementos semánticos son elementos con significado; si necesita un botón, utilice el elemento <button> (y no un elemento <div>).
El HTML semántico proporciona 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
- se puede hacer clic
También se puede acceder a un botón para las personas que dependen de la navegación únicamente con el teclado; Se puede hacer clic en él tanto con el mouse como con las teclas, y se puede tabular (usando la tecla Tab 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 títulos son importantes
Los encabezados se definen con las etiquetas <h1> a <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>
Inténtalo tú mismo »
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 según sus títulos. Es importante utilizar títulos para mostrar la estructura del documento y las relaciones entre las diferentes secciones.
Los lectores de pantalla también utilizan los títulos como herramienta de navegación. Los diferentes tipos de encabezado especifican el esquema de la página. Los encabezados <h1> deben usarse para los encabezados principales, seguidos de los encabezados <h2> y luego los menos importantes <h3>, y así sucesivamente.
Nota: Utilice títulos HTML únicamente para los títulos. No utilice títulos para hacer que el texto sea GRANDE o negrita.
Texto alternativo
El atributo alt proporciona un texto alternativo para una imagen, si el usuario por algún motivo no puede verla (debido a una conexión lenta, un error en el atributo src, o si el usuario utiliza un lector de pantalla).
El valor del atributo alt debe describir la imagen:
Ejemplo
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
Inténtalo tú mismo »
Si un navegador no puede encontrar una imagen, mostrará el valor del atributo alt:
Ejemplo
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
Inténtalo tú mismo »
Declarar el idioma
Siempre debes incluir el atributo lang dentro de la etiqueta <html>, 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>
Utilice un lenguaje claro
Utilice siempre un lenguaje claro y fácil de entender. También trate de evitar caracteres que un lector de pantalla no pueda leer claramente. Por ejemplo:
- Mantenga las oraciones lo más cortas posible
- Evite los guiones. En lugar de escribir 1-3, escribe 1 a 3
- Evite abreviaturas. En lugar de escribir febrero, escribe febrero
- Evite las palabras de jerga
Crea un 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:
Nota: Esta página es una introducción a la accesibilidad web. Visite nuestro Tutorial de accesibilidad para obtener más detalles.
