最近、白菜とお豆腐の小鍋からのおじやコースばかり食べているいずいずです。
今日はちょっと長いので目次をつけてみます。
- WAIC（うぇいく）とは
- 達成基準を満たすことのできる実装方法かを判断？
- 2019年版を一緒に検証してみないかい？というお知らせが出てました
- やってみたいけど難しそうだし一人でやるのは不安...だからテスト会を開催しました
- テストはこんな内容
- OSとブラウザーのバージョンを確認
- 視覚閲覧のテストでのポイント
- 音声読み上げのテスト
- 視覚閲覧とかスマホ閲覧だけでもOK
- やってみてわからないことがでてきたら・・・
WAIC（うぇいく）とは
ウェブアクセシビリティの規格のひとつ「JIS X 8341-3」の理解と普及を促進をやっているウェブアクセシビリティ基盤委員会（WAIC）というのがあります。
そのWAICでは、JIS X 8341-3に書いてある内容で、本当に達成基準を満たすことができるの？ということを検証していくのもWAICの活動のひとつだそうです。それがアクセシビリティ・サポーテッド情報です。
達成基準を満たすことのできる実装方法かを判断？
たとえば、
- 画像のalt（代替テキスト）が入っていたら、画像が非表示のときにaltの内容が表示されるよ、というのが本当かどうか
- Tabキーを押したらウェブページ内のリンクに次々ジャンプするよね
とか当たり前に思えるものも、OSやブラウザーによって全然ダメなときがあります。
それを各環境（OSやブラウザー）ごとに、ちゃんとサポートされているかどうかの検証結果が公開されています。
アクセシビリティ・サポーテッド（AS）情報 | ウェブアクセシビリティ基盤委員会（WAIC）
テスト結果はこんな感じ（達成基準を満たせられていない環境って割とあるのね）
このページの下の方にある「テスト結果の詳細」のように、ブラウザーごとに「○」「☓」「△」で評価されています。
たしかに、○が多いけどブラウザーによって☓や△がある...！
達成基準を満たせられていない環境があるのね。。。しらなかった。。。
ってな感じで公開されているのですが、現在の検証結果の最新版が2014年のもので、ちょっと古い・・・。
2019年版を一緒に検証してみないかい？というお知らせが出てました
そこで、WAICは2019年版を作ろうとしています。
このAS情報テストは、さまざまな環境で、たくさんの人の結果があるほうが良いので、このたびAS情報を作成するためのテストをやってくれる方々を募集しています。
やってみたいけど難しそうだし一人でやるのは不安...だからテスト会を開催しました
で、アクセシビリティをちらっとかじっているので、今回このテストをやってみたいと思いました。
が！1人じゃ不安すぎるし、できない（結局やらない）自信がありました。
でもこれじゃいかん！でも1人じゃ無理！と思い、ウェブアクセシビリティに興味のある人たちに声をかけて、6名で集まってもくもくテスト会をしました（ガチ勢含む）。
6名でそれぞれもくもくと作業をしながらも、「あれ？これどういうこと？」とか「普段、ここで躓いていたわー」とか「こういう方法があったかー」とかをみんなでしゃべりながらわいわいやれたので、もくもくテストも辛くなかったです。
何人かの人たちと一緒にやるのおすすめです。
テストはこんな内容
テスト内容をいくつか紹介します。
同じリンクの中に入れた画像（代替テキストあり）とテキスト（1. 画像 2. テキスト）
画像 (代替テキストなし) とテキストを同じリンクの中に入れた場合、画像の代替テキストが表示とテキストが表示されているか、とか、スクリーンリーダーで代替テキストを読んでくれるかのテスト
フォーカス移動順序を指定した複数のフォームコントロール (マークアップ順)
Tabキーを押して順番にフォーカスされるか、スクリーンリーダーで順番に読み上げられるかのテスト
わりと単純なテストだったよ
ウェブ制作をしている方なら、「テストってこういうことなのね」ということがわかるんじゃないかな、って思います。
ということで、今回のもくもく会で知ることができたAS情報を作成するためのテストをする方法のポイントをあげていきます。
OSとブラウザーのバージョンを確認
OS
- Windows
- mac
- iOS
- Android
など、どのOSでチェックするかを決めます。もちろんスマホ参加もOKです。重要なのはどのバージョンなのかだそうです。
ブラウザー
- Chrome
- Firefox
- Internet Explorer
- Edge
- Safari
などなど、どのブラウザーでチェックするかを決めます。こちらもどのバージョンなのかが重要だそうです。これら以外のブラウザーでもOKです。
OSもブラウザーも、できるだけ多くの種類の結果がほしいって言ってました。
視覚閲覧のテストでのポイント
ブラウザーで、
- 画像非表示
- TABキーで移動したときにフォーカスがあたるかどうか
などのテストがあるので、事前に「画像の非表示ができるか」「フォーカスが表示されるか」の設定をしておきます。
ChomeやFirefoxにはディベロッパーツールの拡張機能を入れるといいんじゃないかなって思います。
Safariはこちらを参考にしてみてください。
音声読み上げのテスト
画面を音声で読み上げるスクリーンリーダーでのテストもあります。
- WindowsならNVDA（無料）
- macはVoiceOver（標準）
- iOSもVoiceOver（標準）
- AndroidはTalkback（たぶん標準）など
があります。
macのVoiceOverでウェブページを読ませる方法はこちらです
視覚閲覧とかスマホ閲覧だけでもOK
スクリーンリーダーは操作が慣れないと難しいところもあるので、テスト自体をあきらめてしまいそうになってしまいます。
その前に、まず視覚閲覧のテストだけでもやってみるといいんじゃないかなーって思います。
いろいろなHTMLの実装サンプルがいっぱいあるので、「あーー、そういうことが書いてあるのね」とか「話には聞いていたけど、このことかー」とかを知ることができます（わたしがそうでした）。
やってみてわからないことがでてきたら・・・
WAICのお問い合わせからメールで聞いてみるといいと思います。
お問い合わせ | ウェブアクセシビリティ基盤委員会（WAIC）
なんのこっちゃかわからなかったけれど、やってみたら「なーんだ、そういうことか！」ということがいっぱいだったので、気になっていてるけど躊躇している方はぜひ試してみるといいんじゃないかな、って思います。
