Actualmente se habla mucho sobre la disponibilidad de la interfaz. Es genial que la gente preste atención a esto y comience a desarrollar interfaces que las personas con algunas limitaciones puedan usar.
Pero nos olvidamos de las personas que no tienen restricciones de salud. También tienen derecho a utilizar las interfaces como mejor les parezca. Por eso, quiero contarles varios casos en los que me encuentro con interfaces inaccesibles, como persona sin restricciones de salud.
No agregue color de fondo para el bloque de imagen de fondo
Cuando conducía a casa, quería ver el sitio del complejo residencial donde estaba mirando el apartamento. Mientras se cargaba el sitio, tradicionalmente veía una pantalla blanca.
Cuando se cargó, vi una fuente blanca y una bonita imagen de fondo del complejo. No sé por qué los desarrolladores no agregaron un fondo de color para el bloque usando background-color. Pero, si lo hicieran, entonces podría leer el texto antes y no esperar a que se cargue la imagen.
No hagas esto
.hero {
background-image: url("example.jpg");
}Puedes hacerlo
.hero {
background-image: url("example.jpg");
background-color: #919191;
}No utilice los tipos especiales de correo electrónico y teléfono para la etiqueta de entrada
Cuando llena los campos del formulario desde su teléfono, es conveniente que aparezca inmediatamente un teclado especial para ingresar correo electrónico o número de teléfono.
, . , email tel input.
<input type="text" placeholder=" ">
<input type="text" placeholder=" ">
<input type="email" placeholder=" ">
<input type="tel" placeholder=" ">
<!-- -->
<input inputmode="email" placeholder=" ">
<input inputmode="tel" placeholder=" ">outline
, . , - outline , .
.button:focus {
outline: none;
}, . .
-
, role=”button” div span. , , , . .
- , . enter, . .
<div role="button"> </div>
<button> </button>label
. “, ” . , - . . , .
, label.
<div class="form-group">
<input type="checkbox">
<span>, </span>
</div>
<label class="form-group">
<input type="checkbox">
<span>, </span>
</label>px font-size
Estoy usando un monitor que está a un metro de mí, así que tengo un modo de texto más grande en Google Chrome. Y cuando llego a un sitio donde la fuente se especifica en píxeles, tengo que aumentarla adicionalmente a través del zoom.
Aunque los desarrolladores podrían usar rems, no tendría ningún inconveniente.
No hagas esto
.hero {
font-size: 16px;
}Puedes hacerlo
.hero {
font-size: 1rem;
}