アクセシビリティよくある間違い

　先日、新入社員というか、ジュニア開発者に対して、チームレベルのアクセシビリティ研修が行われました。結構効果的でした。一番聞かれたことはどうやって Form を実装するか、Screen Reader はどう使うかと。
　その中に、ちょっと理解の間違いが気づきました。一つはアクセシビリティは Screen Reader のことを全てだと思われているそうです。アクセシビリティはそれだけではありません。キーボードのみユーザーや、目に障害ある方や、いろんな対象があります。
　実は良い HTML を書けば、自然に Screen Reader が動きます。aria の属性は通常の HTML tag や、属性が動的ではない場合、転用された場合を使うのので、メインではありません。例えば、HTML に fieldset という tag があります。それはラジオボタンなどを一つの括りとして表示する場合使います。それを使うと、 Screen Reader は自然にそれを認識して、Role - Function - current situation の順に読みます。もし div タグを使うと、通常のコンテンツとして認識しますので、同じようには読みません。ラジオボタンの選択を変更する場合、何が読まれたかをよく聞いて、すぐ区別がわかります。
　次に、全てのコンテンツが tab キーで読ませると。それは間違っています。tab キーは interactive element のみ stop します。もし、むやみにすべてのコンテンツを止まるようにしたら、それは通常と違うので、逆にわかりづらくなります。例えば、a tag など、href があれば、tab stop は起きます。順番として、top - bottom, left - right に stop すべきです。
　ユーザーは通常 Shortcut key を使って、例えば、Insert - L とか、画面にある全部の a link をリストして、画面に表示します。これは [learn more] という link が良くないことをわかるはずです。コンテキストがわからないから、learn more というのは何の more になるかわかりません。だから、ボタンなら button を使って、link なら a tag を使うべきです。
　最後に、色の Contrast Ratio も注意すべきですし、文字のサイズも対象です。それに、High Contrast モードもあるので、それを使うときのサイトも一度チェックした方がいいでしょう。
　まぁ、Screen Reader だけ対象にすべきではないです。

　ちなみに、Screen Reader を使うとき、IE を使うべきです。驚くかもしれませんが、今 JAWS とか Chrome でのサポートが IE ほど良くありません。全て一つのブラウザーでテストすべきではないです。
　それでは、また。