Accesibilidad para principiantes con HTML y CSS.

#HTML #CSS

Este post es para mi y para los tontos como yo XD.

Los sitios web deben ser abiertos y accesibles para todos, independientemente de las capacidades de un usuario, pero a menudo sucede lo contrario. Aquí hay una hoja rápida de trucos para mejorar la accesibilidad de un sitio web usando HTML y CSS.

:)1. Las imágenes deben tener un texto alternativo cuando su contenido no es obvio al leer el texto.

<img src="logo.jpeg" alt="Logo de la empresa"> 

:)2. h1 - el texto h6 es importante para los lectores de pantalla, mantenga su orden

<!-- No hagan esto -->
<h1>A header</h1>
<h4>A smaller header</h4>

<!-- Esto sí -->
<h1>A header</h1>
<h2>A smaller header</h2>

:)3. Dale estructura a tu página usando principal, encabezado, pie de página, navegación, artículo, sección y audio

<header>
<h1>El encabezado!</h1>
</header>
<main>El cuerpo del documento </main>
<footer></footer>

:)4. Utilice el elemento de artículo para entradas de blog, publicaciones de foros o artículos de noticias.

<div> - contenido de grupos
<section> -grupos relacionados con el contenido
<article> - Grupos independientes, contenidos independientes

:)5. Utilice contenido visual y auditivo

Para que los usuarios con discapacidades visuales y / o auditivas puedan acceder a él.

:)6. Usa el elemento figura para los gráficos.

<figure> 
 <img src="tu_gráfico.jpeg" alt="Breve descripción del gráfico"> 
 <br> 
 <figcaption> Descripción del gráfico. </figcaption> 
</figure>

:)7. Usar elementos de etiqueta con entradas.

<label for="name">Nombre:</label>
<input type="text" id="name" name="name">

:)8. Agrupar botones de radio en campos

<fieldset>
     <legend>Elige uno de los tres elementos:</legend>
     <input id="one" type="radio" name="items" value="one">
     <label for="one">Elige Uno</label><br>
     <input id="two" type="radio" name="items" value="two">
     <label for="two">Elige Dos</label><br>
     <input id="three" type="radio" name="items" value="three">
     <label for="three">Elige Tres</label>
</fieldset>

:)9. Usa los campos de fecha con un selector

<label for="input1">Ingrese Dato:</label>
<input type="date" id="input1" name="input1">

:)10. Estandarizar el tiempo con el elemento de tiempo

El atributo datetime de este elemento es el valor al que acceden los dispositivos de asistencia. Ayuda a evitar confusiones al indicar una versión estandarizada de un tiempo, incluso si está escrito de manera informal o coloquial en el texto.

<time datetime="2013-02-13">el miércoles pasado</time>

:)11. Haz que algún contenido sea visible solo para lectores de pantalla

Esto es lo mejor:

.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}

No use:

• pantalla: ninguna; o visibilidad: oculta;  Ocultan contenido para todos, incluidos los usuarios de lectores de pantalla.
• valores cero para tamaños de píxeles, como el ancho: 0px; altura: 0px; elimina ese elemento del flujo de su documento, los lectores de pantalla lo ignorarán

:)12. Use texto de alto contraste

Las Pautas de Accesibilidad para el Contenido Web (WCAG) recomiendan al menos una relación de contraste de 4.5 a 1 para el texto normal. La relación se calcula comparando los valores de luminancia relativa de dos colores. Esto varía de 1: 1 para el mismo color, o sin contraste, a 21: 1 para blanco contra negro. Los colores de fondo y de fondo necesitan un contraste suficiente para que los usuarios con daltonismo puedan distinguirlos.

:)13. Utilizar texto de enlace descriptivo.

Esto:
<a href="">información de computadora</a>
es mejor que esto:
<a href="">Click aquí</a>

:)14. Usa las teclas de acceso para enlaces importantes.

<button accesskey="b">Boton importante</button>

:)15. Use tabindex para agregar el enfoque del teclado

Los enlaces y los controles de formulario obtienen automáticamente el enfoque del teclado cuando un usuario pasa por una página. Esta funcionalidad se puede dar a cualquier otro elemento utilizando un tabindex = "n" en ellos, donde n no es negativo.

<a href="" tabindex="1">Primer enlace accedido</a>
<a href="" tabindex="2">Segundo enlace accedido</a>


Fin :)la weafome...