HTML- und CSS-Fehler treffe ich als Person ohne gesundheitliche Einschränkungen

Momentan wird viel über die Verfügbarkeit von Schnittstellen geredet. Es ist großartig, dass die Leute darauf achten und damit beginnen, Schnittstellen zu entwickeln, die Menschen mit einigen Einschränkungen verwenden können.

Aber wir vergessen Menschen, die keine gesundheitlichen Einschränkungen haben. Sie haben auch das Recht, die Schnittstellen nach eigenem Ermessen zu verwenden. Daher möchte ich Ihnen über mehrere Fälle berichten, in denen ich als Person ohne gesundheitliche Einschränkungen auf unzugängliche Schnittstellen stoße.

Fügen Sie keine Hintergrundfarbe für den Hintergrundbildblock hinzu

Als ich nach Hause fuhr, wollte ich den Standort des Wohnkomplexes sehen, in dem ich mir die Wohnung ansah. Während die Site geladen wurde, sah ich traditionell einen weißen Bildschirm.

Als es geladen wurde, sah ich eine weiße Schrift und ein schönes Hintergrundbild des Komplexes. Ich weiß nicht, warum die Entwickler keinen farbigen Hintergrund für den Block mit Hintergrundfarbe hinzugefügt haben. Aber wenn sie es tun würden, könnte ich den Text früher lesen und nicht warten, bis das Bild geladen ist.

Tu das nicht

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

Du kannst das

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

Verwenden Sie nicht die speziellen E-Mail- und Tel-Typen für das Eingabe-Tag

Wenn Sie Formularfelder von Ihrem Telefon aus ausfüllen, ist es praktisch, wenn sofort eine spezielle Tastatur zur Eingabe von E-Mail oder Telefonnummer angezeigt wird.

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

Ich verwende einen Monitor, der ungefähr einen Meter von mir entfernt ist, sodass ich in Google Chrome einen größeren Textmodus habe. Und wenn ich zu einer Site komme, auf der die Schriftart in Pixel angegeben ist, muss ich sie zusätzlich durch den Zoom erhöhen.

Obwohl Entwickler Rems verwenden könnten, hätte ich keine Unannehmlichkeiten.

Tu das nicht

.hero {
  font-size: 16px;
}

Du kannst das

.hero {
  font-size: 1rem;
}