HTML and CSS mistakes I meet as a person with no health limitations

There is a lot of buzz about interface availability right now. It's great that people pay attention to this and start developing interfaces that people with some limitations can use.

But we forget about people who have no health restrictions. They also have the right to use the interfaces as they see fit. Therefore, I want to tell you about several cases when I meet inaccessible interfaces, as a person without health restrictions.

Don't add background-color for the background image block

When I was driving home, I wanted to see the site of the residential complex where I was looking at the apartment. While the site was loading, I traditionally saw a white screen.

When it loaded, I saw a white font and a beautiful background image of the complex. I don't know why the developers didn't add a colored background for the block using background-color. But, if they did it, then I would be able to read the text earlier and not wait for the image to load.

Don't do this

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

You can do this

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

Don't use the special email and tel types for the input tag

When you fill out form fields from your phone, it is convenient when a special keyboard for entering email or phone number appears immediately.

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

I am using a monitor that is about a meter away from me, so I have a larger text mode in Google Chrome. And when I get to a site where the font is specified in pixels, then I have to additionally increase it through the zoom.

Although developers could use rems, I wouldn't have any inconvenience.

Don't do this

.hero {
  font-size: 16px;
}

You can do this

.hero {
  font-size: 1rem;
}