👨‍⚖️ 🙋🏿 👩🏾‍🚀 我没有健康限制的人遇到的HTML和CSS错误 👩‍👩‍👧 🔄 👩🏾‍🎓

现在，关于接口可用性的讨论很多。人们注意这一点并开始开发具有一定局限性的人可以使用的界面，这是非常棒的。

但是我们忘记了没有健康限制的人。他们也有权使用自己认为合适的接口。因此，作为一个没有健康限制的人，我想告诉您几种遇到无法访问的界面的情况。

不要为背景图像块添加背景颜色

当我开车回家时，我想看看我正在看公寓的住宅区的位置。在网站加载期间，我通常会看到白色的屏幕。

当它加载时，我看到了一个白色字体和该复合体的漂亮背景图像。我不知道为什么开发人员没有使用background-color为块添加彩色背景。但是，如果他们这样做了，那么我将能够更早阅读文本，而不必等待图像加载。

不要这样

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

你可以这样做

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

不要在输入标签中使用特殊的电子邮件和电话类型

当您从手机中填写表单字段时，当立即出现用于输入电子邮件或电话号码的特殊键盘时，这很方便。

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

我使用的显示器距离我大约一米，所以我在Google Chrome浏览器中使用了更大的文本模式。当我到达以像素指定字体的站点时，则必须通过缩放来另外增加字体。

尽管开发人员可以使用rems，但不会带来任何不便。