Accessabilityプロジェクトの初期試行

Accessability(A11Y)
最近、1つのプロジェクトに開発環境に移行する前の終了作業を行い、そのうちの1つはバリアフリー設計テストです.社内にはプロのバリアフリー設計の管理職がいますが、基本的な常識はやはりゼロで、いつも勉強しなければなりません.いくつかの資料を見て、基礎の必要な知識点をまとめました.
Visualは色弱視弱を考慮
色を使用して情報を伝達しないで、文字サイズをユーザーが調整できるようにします.情報付き要素にはariaラベルを付ける必要があります.これにより、ユーザーはスクリーンリーダーの助けで情報を取得できます.
Healing聴覚障害を考える
音声で情報を伝達する要素は,文字情報を加えてユーザが音声を使用しない場合でも同じ情報を取得できるようにする必要がある.
Mobility視力障害を考慮マウス操作なし
ユーザーはマウスを使用しないで、スクリーンの情況の下で、キーボードだけでもページの上で移動することができて、キーボードだけで全体のページのブラウズ操作を完成することができますもしいかなる1つの動作がマウスに使う必要があるならば、つまりすべての編集可能な領域を合理的に設計するために順番に並ぶ必要があります
Congnitionは、さまざまなアシスタントツールへのアクセスを考慮しています.
アプリケーションは、スクリーンリーダーなどのアシスタントツールを使用して正常に動作する必要があります.スクリーンの点滅を避けるなどの設計は、時間ベースの設計を使用することを避ける必要があります(一部のアシスタントツールでは、スクリーン情報の読み取りに時間がかかるためです).
アプリケーションがアクセス可能かどうかを判断するにはどうすればいいですか?
Visual
高コントラストモードでも、情報非文字情報を容易に読み取ることができます.文字情報がスクリーンリーダーを補助している場合、取得情報の白黒表示を正常に閲覧したり、情報を正常に読み取ることができます.

ラベルa)下線を使用するかどうか(色盲色弱者区分を容易にする)b)ラベル提示情報が合理的かどうか

.
(例えば、「ここをクリック」を使用するラベルがあり、1画面に複数の「ここをクリック」がある場合、ユーザは、各ラベルがそれぞれどこにジャンプするかを判断できない)

キーボードのみで操作する場合でも、input、checkboxなどのアプリケーションを正常に使用できるかどうか

が選択できるかどうか.

すべての機能はキーボードによるインタラクションが可能

blurの必要がある場合は、

を実現するためにキーボード操作を追加する必要がある.

tab-index>0-1を使用しないでください:script focus 0:ユーザーfocus

を使用できます.

要素がellipsesを使用する場合、キーボード操作でellipsesを読み取ることができる情報

を提供する必要がある.

focus操作はfocusがどの要素に着いたかを明確にする必要がある

他のフォントをサポートする必要があるサポートツールによっては、フォントを変更してユーザーが読むのを助け、フォントが変更された場合でもアプリケーション

が正常に使用できるようにする必要があります.
Hearing:

すべての音を消して、

も正常に使用できます.
Mobility

マウス、タッチパネルなどのツールを外し、キーボードだけでも

を正常に使用できます.
Cognition

は時間ベースの要素を持っていて、一時停止され、減速することができますか?

Angular A 11 Y設計
button
ボタンはできるだけbuttonラベルを使って、img、div、spanなどのラベルでボタンを作らないようにします(buttonラベルにはクリック可能、tab、focusなどの機能が付いていて、スクリーンリーダーの使用時にボタンの内容を読み取る)button以外のラベルでボタンを作る必要がある場合は、role =”button”の属性を加えます
Forms
フォーム使用formラベル(enterキー入力フォーム付き機能)input使用aria-labelとplaceholder(スクリーンリーダー読み取りaria-label)
その他の一般的なariaプロパティaria-describedbyaria-labelaria-labelledbyaria-disabledaria-hidden
tabソートラベルtabindex

W3Schools
Google
Microsoft