Erros de HTML e CSS que encontro como uma pessoa sem limitações de saúde

Há muito buzz agora sobre a disponibilidade da interface. É ótimo que as pessoas prestem atenção a isso e comecem a desenvolver interfaces que pessoas com algumas limitações possam usar.

Mas esquecemos as pessoas que não têm restrições de saúde. Eles também têm o direito de usar as interfaces como acharem adequado. Portanto, quero contar a vocês sobre vários casos em que encontro interfaces inacessíveis, como uma pessoa sem restrições de saúde.

Não adicione cor de fundo para o bloco de imagem de fundo

Quando estava voltando para casa, queria ver o local do complexo residencial onde estava olhando para o apartamento. Enquanto o site carregava, eu costumava ver uma tela branca.

Quando carregou, vi uma fonte branca e uma bela imagem de fundo do complexo. Não sei por que os desenvolvedores não adicionaram um fundo colorido para o bloco usando a cor de fundo. Mas, se fizessem isso, eu seria capaz de ler o texto antes e não esperar que a imagem carregasse.

Não faça isso

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

Você consegue fazer isso

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

Não use os tipos especiais de e-mail e tel para a tag de entrada

Quando você preenche os campos do formulário em seu telefone, é conveniente quando um teclado especial para inserir e-mail ou número de telefone aparece imediatamente.

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

Estou usando um monitor que está a cerca de um metro de mim, então tenho um modo de texto maior no Google Chrome. E quando chego a um site onde a fonte é especificada em pixels, preciso aumentá-la adicionalmente com o zoom.

Embora os desenvolvedores possam usar rems, eu não teria nenhum inconveniente.

Não faça isso

.hero {
  font-size: 16px;
}

Você consegue fazer isso

.hero {
  font-size: 1rem;
}