Kesalahan HTML dan CSS yang saya temui sebagai orang yang tidak memiliki batasan kesehatan

Ada banyak pembicaraan tentang ketersediaan antarmuka saat ini. Sangat menyenangkan bahwa orang-orang memperhatikan hal ini dan mulai mengembangkan antarmuka yang dapat digunakan oleh orang-orang dengan beberapa keterbatasan.

Tapi kita melupakan orang yang tidak memiliki batasan kesehatan. Mereka juga memiliki hak untuk menggunakan antarmuka sesuai keinginan mereka. Oleh karena itu, saya ingin memberi tahu Anda tentang beberapa kasus ketika saya bertemu dengan antarmuka yang tidak dapat diakses, sebagai orang yang tidak memiliki batasan kesehatan.

Jangan tambahkan warna latar belakang untuk blok gambar latar belakang

Ketika saya dalam perjalanan pulang, saya ingin melihat lokasi kompleks perumahan tempat saya melihat apartemen. Saat situs dimuat, saya biasanya melihat layar putih.

Saat dimuat, saya melihat font putih dan gambar latar belakang kompleks yang bagus. Saya tidak tahu mengapa pengembang tidak menambahkan latar belakang berwarna untuk blok menggunakan warna latar belakang. Tapi, jika mereka melakukannya, maka saya akan bisa membaca teks lebih awal dan tidak menunggu gambar dimuat.

Jangan lakukan ini

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

Kamu bisa melakukan ini

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

Jangan gunakan jenis email dan tel khusus untuk tag input

Saat Anda mengisi bidang formulir dari telepon Anda, akan lebih mudah bila papan ketik khusus untuk memasukkan email atau nomor telepon segera muncul.

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

Saya menggunakan monitor yang jaraknya sekitar satu meter dari saya, jadi saya memiliki mode teks yang lebih besar di Google Chrome. Dan ketika saya masuk ke situs di mana font ditentukan dalam piksel, maka saya harus meningkatkannya melalui zoom.

Meskipun pengembang dapat menggunakan rem, saya tidak akan mengalami ketidaknyamanan.

Jangan lakukan ini

.hero {
  font-size: 16px;
}

Kamu bisa melakukan ini

.hero {
  font-size: 1rem;
}