ウェブサイトアクセシビリティ

ウェブサイトアクセシビリティは何ですか?
サイト上の一部のユーザーは、画面の読者を使用するだけで、画面の倍率を使用して、音声入力ソフトウェアを使用して、キーボードを使用したり、ブラウザの古いバージョンを使用します.CSSでは、あなたのサイトをこれらのユーザーにアクセスできるようにする方法がいくつかあります.

フォーカススタイル

用途rem フォントサイズ設定

ブラウザープレフィックス

フォーカススタイル
移動するキーボードだけを使用するユーザーは、しばしばトラバースウェブサイトにタブキーを使用します.タブが異なる要素をターゲットにするときfocus 擬似クラスは、どの要素が現在選択されているかを示すために使用されます.
私が最初にウェブ開発を始めたとき、私はそれが本当に何であったかについてわかっていないので、それが醜く見えたので、焦点アウトラインを無効にします.これは間違いなく悪い練習です.それを無効にする良い代替は、あなた自身のフォーカスの動作を設定します.フォーカスされているこの方法は、まだタブユーザーにアクセスでき、フォーカスのアウトラインまたは境界線はあなたのサイトのカラーパレットにフィットします.

*:focus {
  outline: none;
  border: 2px dotted blue;
}

フォントサイズのためのREMの使用
The rem 値は常にルート要素font-size . デフォルトのフォントサイズが1rem = 16px . デフォルトのフォントサイズが明示的に設定されていない場合、1 remはブラウザのデフォルトフォントサイズに等しくなります.
ユーザーがブラウザのフォントサイズを調整した場合、フォントサイズはレムで設定されます.フォントサイズはPXで設定されません.アクセシビリティに悪いです.

.my-class {
  font-size: 1.5rem; 
  /*default font-size = 16px, so 1.5rem = 24px*/
}

ブラウザープレフィックス
すべてのCSSプロパティはすべてのブラウザで使用できません.例えば、プロパティtext-align-last Safariの任意のバージョンではサポートされていません.ブラウザ上のCSSプロパティの可用性をチェックするための良いサイトはhttps://caniuse.com/ .
あなたは、これらの新しいCSS機能を古いブラウザーと互換性にするために、あなたのCSSでブラウザープレフィックスを使用することができます.ここでは、4つの最も一般的なものです.

-moz- Firefox用

-webkit- サファリとクローム

-o- オペラ座

-ms- インターネットエクスプローラー

.my-class {
  -moz-text-align-last: right;
  -webkit-text-align-last: right;
  -o-text-align-last: right;
  -ms-text-align-last: right;
  text-align-last: right;
}

また、autoprefixer このプロセスをより簡単にするパッケージ.
この記事はあなたのサイトをCSSでよりアクセス可能にする主要な方法のいくつかをカバーしました、しかし、この記事は表面をひっかきます.私が推薦するリソースはウェブコンテンツアクセシビリティガイドライン(WCAG)ですhttps://www.w3.org/TR/WCAG22/
任意のフィードバックや質問がある場合はコメントを残してください.