😫 👨🏿‍🎤 👨🏽‍🎤 健康上の制限のない人として出会うHTMLとCSSの間違い 🛸 🏰 👙

現在、インターフェースの可用性については多くの話題があります。人々がこれに注意を払い、いくつかの制限のある人々が使用できるインターフェースの開発を開始することは素晴らしいことです。

しかし、私たちは健康上の制限がない人々のことを忘れています。また、適切と思われるインターフェースを使用する権利もあります。したがって、私が健康上の制限のない人として、アクセスできないインターフェースに遭遇したいくつかのケースについてお話ししたいと思います。

背景画像ブロックにbackground-colorを追加しないでください

家に帰る途中、アパートを見ている団地の跡を見たかった。サイトの読み込み中に、私は伝統的に白い画面を見ました。

それがロードされたとき、私は白いフォントと複合体の素敵な背景画像を見ました。開発者がbackground-colorを使用してブロックに色付きの背景を追加しなかった理由がわかりません。しかし、彼らがそれをした場合、私はより早くテキストを読むことができ、画像がロードされるのを待つ必要はありません。

これをしないでください

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

あなたはこれを行うことができます

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

入力タグに特別なemailおよびtelタイプを使用しないでください

お使いの携帯電話からフォームフィールドに入力するとき、メールや電話番号を入力するための特別なキーボードがすぐに表示されると便利です。

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

約1メートル離れたモニターを使用しているので、GoogleChromeでより大きなテキストモードを使用しています。そして、フォントがピクセルで指定されているサイトにたどり着いたら、ズームしてさらに大きくする必要があります。

開発者はレムを使用できますが、私には何の不便もありません。