Reactガイドを読んでいくその29
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
アクセシビリティ
今回で終了です。
開発とテストのツール
アプリケーションの作成を支援するツールが色々ある
キーボード
ツールっていうよりこれは手法のような気がする。
・マウスを外す
・TabとShift+TabやEnterを使って挙動の確認をする
開発支援
これを使うと良いらしい
JSXのアクセシビリティに対してlintのフィードバックを提供する。
www.npmjs.com
他にCreate React Appでは上記のプラグインを含んだものになっている。
github.com
必要に応じて.eslintrcファイルを作成して以下の内容を書き込むと、より多くのアクセシビリティルールを有効化できる。
{
"extends": ["react-app", "plugin:jsx-a11y/recommended"],
"plugins": ["jsx-a11y"]
}
ブラウザでアクセシビリティをテストする
色々なツールがあるものの、ブラウザを経由した場合HTMLの技術的なアクセシビリティしかチェックできないので、
他のツールと組み合わせて実行する必要がある。
aXe, aXe-core and react-axe
WebAIM WAVE
スクリーンリーダ
screen reader、読み上げソフトのこと。
あんまり馴染みがないけれど、利用されているスクリーンリーダについて知っておくべき。
アプリケーションとブラウザで相性問題があるので注意が必要。
よく使われるスクリーンリーダ
Windows向けOSSのスクリーンリーダNVDA
組み合わせとしてはFirefoxと。
www.nvaccess.org
Apple社製品に組み込まれているVoiceOver
Safariと組み合わせて利用される
他のスクリーンリーダ
ChromeVoxがある。
Chromeの拡張機能として利用可能なので手軽に導入できて便利。
今日はここまで。
