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...
No hay comentarios.: