前書き
サイトのアクセシビリティを向上させたいが、何かをインストールしたり、サービスを処理したりする必要があると思われる場合は、Chromeブラウザで利用できる5つのツールを選択します。これらのツールを使用すると、問題があるかどうかをすばやく判断できます。可用性。
小さな免責事項ですが、多くの方がDevToolsを積極的に使用していることは承知していますが、ショートカットCmd + Shift + C / Ctrl + Shift + Cを使用してDevToolsを開くと便利です。
アクセシビリティインスペクター
DOMに加えて、ブラウザはアクセシビリティツリー（AOM、アクセシビリティオブジェクトモデル）またはアクセシビリティツリー（もう少しここにあります）を構築します。したがって、アクセシビリティインスペクタを使用すると、[要素]タブでベリファイアのDOM構造を表示するのと同じように、このツリーの情報を表示できます。
ほとんどの場合、AOMにはARIAおよびロール属性からの情報が含まれています。これは、画面リーダーがDOM要素の目的を決定しようとする方法です。
これとツールは、[要素]タブの[アクセシビリティの追加]タブにあります。
悪いビジョンエミュレータ
DevTools , .
DevTools, . More tools, Rendering. , , “Emulate vision deficiencies”.
DevTools :
( ?)
- , .
- –, – .
-
, , , , - , . .
Lighthouse , . , Accessibility.
Lighthouse :
ARIA -
ROLE -
Lang HTML
Tabindex
alt
, , , alt. , - “”, “ ”, “”,
. , .
, DevTools , .
- DevTools, , CSS color
, :
()
()
Inspect element tooltip
, . , DevTools , . DevTools.
Inspect element tooltip , .
, ,
, , .– FronteersConf
読んでいただきありがとうございます。これらのツールがプロジェクトをもう少しアクセスしやすくするのに役立つことを願っています。