Accesibilidad HTML
Escribir HTML con accesibilidad en mente. Proporcionar al usuario una buena forma para navegar e interactuar con el sitio web. Escribir el código HTML semanticamente en la mayor medida posible, así el código será fácil de entender por parte de los visitantes y Navegadores Web.
Semántica HTML
Semántica HTML significa usar correctamente los elementos HTML para su correcto proposito en la mayor medida posible. Elementos con semantica son elementos con un significado; si se requiere un boton usar la etiqueta <button> y no un <div>.
Código Semántico:
<button>Leer Más</button>
Código No Semántico:
<div>Leer Más</div>
El HTML semántico da contexto a los lectores de pantalla, dado que estos leen los contenidos de una página web en voz alta.
Con el ejemplo de la etiqueta <button> en mente:
- los botones tienen un estilo más adecuado por defecto
- un lector de pantalla lo identifica como un botón
- enfocable
- seleccionable
Un botón también es accesible para visitantes que debenden solo del teclado para navegar; se puede dar clic tanto con el mouse como con el teclado usando la tecla tabulador del teclado para tabular entre ellos.
Ejemplo de elementos no semánticos como <div> y <span> no dice nada sobre su contenido, y por el contrario elementos semánticos como <form>, <table> y <article>: define claramente su contenido.
Los Titulos de Encabezado son Importantes
Los Titulos de Encabezado son definidos con <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
Ejemplo:
<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>
Los motores de búsqueda usan los títulos de encabazado para indexar la estructura y contenido de las páginas web.
Los usuarios sobre leen las páginas por sus títulos de encabezado. Es importante usar los títulos de encabezado para mostrar la estructura del documento y las relaciones entre las diferentes secciones.
El título de encabezado <h1> debe usarse para el encabezado principal, seguido por los títulos de encabezado <h2>, luego, los menos importantes <h3>, y así sucesivamente.
Nota: Use los títulos de encabezado HTML solo para los títulos, no use los títulos de encabezado para hacer texto 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 usa un lector de pantalla).
El valor del atributo alt debe describir la imagen:
<img src="logo.jpg" alt="Logotipo de exasoluciones.com">
Si un navegador no puede encontrar una imagen, mostrará el valor del atributo alt.
Declarar el Lenguaje
Declarar un idioma es importante para los lectores de pantalla y los motores de búsqueda. Se declara con el atributo lang. Use el siguiente ejemplo para mostrar una página web en español:
<!DOCTYPE html>
<html lang="es">
<body>
...
</body>
</html>
Use un Lenguaje Claro
Use un lenguaje claro que sea fácil de entender e intente evitar los caracteres que un lector de pantalla no puede leer con claridad. Por ejemplo:
- Mantenga oraciones lo más cortas posible.
- Evita los guiones En lugar de escribir 1-3, escriba 1 a 3
- Evite las abreviaturas. En lugar de escribir Feb, escriba febrero
- Evite las palabras de argot
Enlaces Explícito
Un enlace debe explicar claramente qué información obtendrá el lector al hacer clic en ese enlace.
Ejemplo de enlace explícito:
<a href="inicio/tutoriales/html">Tutorial HTML</a>
Ejemplo de enlace no explícito:
<a href="inicio/tutoriales/html">clic aquí</a>
Títulos en los Enlaces
El atributo title especifica información adicional sobre un elemento. La información se muestra con más frecuencia como un texto de información sobre un tooltip cuando el mouse se coloca sobre el elemento.
<a href="/inicio/tutoriales/html" title="Tutorial HTML">Visita nuestro Tutorial HTML</a>