Erreurs HTML et CSS que je rencontre en tant que personne sans limitation de santé

Il y a actuellement beaucoup de buzz sur la disponibilité des interfaces. C'est formidable que les gens y prêtent attention et commencent à développer des interfaces que les personnes avec certaines limitations peuvent utiliser.

Mais nous oublions les personnes qui n'ont aucune restriction de santé. Ils ont également le droit d'utiliser les interfaces comme bon leur semble. Par conséquent, je veux vous parler de plusieurs cas où je rencontre des interfaces inaccessibles, en tant que personne sans restrictions de santé.

N'ajoutez pas de couleur d'arrière-plan pour le bloc d'image d'arrière-plan

Quand je rentrais chez moi, je voulais voir le site du complexe résidentiel où je regardais l'appartement. Pendant le chargement du site, je voyais traditionnellement un écran blanc.

Lors du chargement, j'ai vu une police blanche et une belle image de fond du complexe. Je ne sais pas pourquoi les développeurs n'ont pas ajouté un arrière-plan coloré pour le bloc en utilisant background-color. Mais s'ils le faisaient, je pourrais lire le texte plus tôt et ne pas attendre le chargement de l'image.

Ne fais pas ça

.hero {
  background-image: url("example.jpg");
}

Tu peux le faire

.hero {
  background-image: url("example.jpg");
  background-color: #919191;
}

N'utilisez pas les types spéciaux d'e-mail et de tel pour la balise d'entrée

Lorsque vous remplissez les champs de formulaire à partir de votre téléphone, il est pratique qu'un clavier spécial pour saisir un e-mail ou un numéro de téléphone s'affiche immédiatement.

, . , 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

J'utilise un moniteur à environ un mètre de moi, j'ai donc un mode texte plus grand dans Google Chrome. Et quand j'arrive sur un site où la police est spécifiée en pixels, je dois en plus l'augmenter via le zoom.

Bien que les développeurs puissent utiliser des rems, je n'aurais aucun inconvénient.

Ne fais pas ça

.hero {
  font-size: 16px;
}

Tu peux le faire

.hero {
  font-size: 1rem;
}