※この記事は 「Webアクセシビリティ Advent Calendar 2020」 11日目の記事です。
はじめに
「アクセシビリティ対応に関心はあるけれど、何からはじめて、どうやって実践していけばいいんだろう？」という人は多いのではないでしょうか。
かくいう私もその一人なのですが、「取り合えず分からないなりに準備したこと・やってみたこと」をまとめてみました。
もし「こうしたほうがいいよ」「こんなこともするといいよ」「このプラグインおすすめ！」などのご意見がありましたら、ぜひコメントで教えてください！
①普段のマークアップを振り返る
普段から注意を払っていたことではありますが、「どのタグを使うか？」「文書構造と見た目の順序の折り合いをどうつけるか？」など、改めて考えるようにしました。
特に文書構造と見た目の順序は、flexbox や grid の登場でかなり融通がきくようになったので、最近は見た目のために自然な文書構造を諦める場面が減りました。頑張ればIE対応もできますし……。いい時代になりましたね。
また、長年何を設定するべきか模索していた alt についても、自分の中で何となく結論が出ました。ざっくりとですが、今のところ下記のようなオレオレガイドラインでやっています。
- 「バナー：」「写真：」「イラスト：」などの接頭辞をつける
- 画像内のテキストは基本的に全て盛り込むが、順序には配慮する（重要な情報はなるべく先頭へ）
- 空altにするのは「そこに画像が存在する」という情報自体が無くても支障がない場合のみに限る
②NVDAを導入する
読み上げソフトを利用している場面は動画等で見たことがありますが、自分が書いたコードがどうなるのかは知らなかったので、実際に使ってみました。
支離滅裂だったらどうしようと不安でしたが、マークアップがしっかりしていれば問題なさそうで安心しました。
しかし、ハンバーガーメニューやアコーディオンなどの操作ありきの箇所や、もう少し補足説明が欲しい部分など、今まで通りでは少し足りない箇所はいくつかありました。プレーンに組んだ table の読み上げなんかは想像以上にしんどくて、実際に使ってみないとわからないものです。
一度でもいいので、自分が作ったサイトの読み上げは体験したほうが良いと思いました。
③簡単なところから支援技術を使ってみる
②で浮き彫りになった課題を解決する方法は、きっとたくさんあると思います。
ただ、それらを「調べる」という最初のフェーズだけでも大変です。毎回全部実践するのも、相当なパワーが必要です。
なので、まずは「すぐ理解 / 実践できそう・覚えられそうなもの」を実践するようにしています。
例えば装飾のための英単語の部分に aria-hidden="true" を付けるとか、複雑な table を組んだときは scope 属性を付ける1とか……。
そうやって少しずつ「わかる・使える技術」を増やすのが良いのかなと思います。
④上手にプラグインを頼る
モーダルウィンドウのような自力での対応が困難なUIや、ブラウザの対応状況が芳しくないプロパティなどは、プラグインを使うことで対応が楽になります。
個人的によくお世話になっている（なっていた / これからお世話になる）のは以下のプラグインです。
what-input
クリックやタップ時はフォーカスインジケータを非表示に、キーボード操作をしているときは表示するように、みたいなことができるようになるプラグインです。
導入方法などについては、少し古い記事ですが下記が分かりやすいです。
もうoutlineを消さない。クリック・タップ・キーボードのイベントを判定してくれるJSライブラリ「what-input」
modaal
モーダルウィンドウのプラグインです。
オプションが結構充実しており、スタイルがある程度用意されていて便利だったのですが、随分長い間更新が止まっているようです。jQuery依存、かつ新しいバージョンでのテスト状況に不安が残っているなど、今オススメできるかというと……うーん……（こういうところがプラグインの怖いところですね）。なので、参考程度に捉えていただければと思います。
代わりにと言ってはなんですが、5日目担当のTAKさんの記事 で紹介されていた Micromodal.js が良さげな雰囲気なので、今後はこっちを使っていこうかなと思っています。
次の一歩はどうするか？
この「じゃあ次どうする？」が今いちばん感じている課題です。
常日頃から情報を追っていくのは当然として、知見のある人に教えてもらう・ノウハウを共有してもらう場や、同じ初心者でライトに話し合える場があると良いなあと思っています（それゆえこうしてQiitaに記事として書いているわけですが）。
あるいは、身近にそういう人を増やすべくアクセシビリティへの興味関心を持ってもらえるようにアクションしていくのが良いのか……。
道のりはまだまだ険しそうですが、ひよっこなりに今後もアクセシビリティ対応を頑張っていきたいと思います。