【1.導入編】ここから始めようWebアクセシビリティ

関連記事

1. 【0.気持ち整理編】
2. いまここ 【1.導入編】

概要

前回の記事は気持ち整理編でした。
この記事は「じゃあどこからやる？」の部分を書いたものです。

どこから何をやればいいのか

何をやればいいのかざっくり見ていきましょう。

• どのくらいの時間をかけられるか確認する
• 知識をつける
• ★　正しいタグでマークアップする
• キーボードで操作できるか確認し、改善する
• スクリーンリーダーの使い方を知る
• スクリーンリーダーでの読み上げで問題ないか確認し、改善する
• モーダルやタブなど、通常のマークアップだけでは対応できないものについて対応する

まずこの辺から始めるといいと思います。
詳しく見ていきましょう。
（この記事では「★　正しいタグでマークアップする」まで説明します。）

どのくらいの時間をかけられるか確認する

個人開発なら自由に時間を使うことができますが、仕事だとそうもいきません。
（特に受託制作だと時間が取りにくいですよね…）

追加で工数を確保する必要がある場合、自分の業務時間をどのくらい割いてもいいのかおそらく誰かに許可を得る必要があるでしょう。
許可が降りないという場合もあるかもしれません。

誰かの判断を待っている間にやる気がなくなって諦めてしまうのはもったいないので、
まずは数分で対応できるようなものから、誰にも報告が必要ないようなものから対応するのをお勧めします。

1日5分どこかを改善する、自分が書くコードから対応していく　というようにちょっとずつやりましょう。
いきなりドカンと工数をとってガンガンやるのには時間も労力もかかります。
まずは実績を作って共感してくれる仲間を集めるところからやるといいと思います。

知識をつける

最近ではいろんな本が出ていて体系的に学べるようになっているので自分が読んで良かったと思う本をいくつか紹介します。
最初から分厚い本を読むのは辛いと思うので、ボリュームが小さいものから載せています。

• 見えにくい、読みにくい「困った！」を解決するデザイン
  https://amzn.asia/d/8WZeRbV
  そもそもどういう時に困る人がいるのか知らなければ何を対応していいかわかりません。
  まずはそこを知るところから。この本はたくさんの事例が載っているので最初の一冊にお勧めです。
• Form Design Patterns
  https://amzn.asia/d/02fU6qF
  アクセシビリティで問題になりやすく、かつよく使われるものとして「フォーム」があります。
  この本はフォームについてどんなユーザーでも使えるようにする実例、改善例がコードと一緒に載っています。
• HTML解体新書
  https://amzn.asia/d/bKnOwpi
  この本はアクセシビリティに限った専門書ではありませんが、正しいマークアップを知ることで結果的にアクセシビリティも改善されるのでお勧めです。
  また、アクセシビリティに関することも多々載っており、辞書代わりに持っておいてもいい一冊です。
• Webアプリケーションアクセシビリティ
  https://amzn.asia/d/329UgTf
  これ一冊あればOKという本ですが、ページ数がかなり多いです。最初の一冊としてハードルは少し高く感じる人もいるかと思うので最後に載せましたが、この一冊あればある程度の知識と専門性は身につけられると思うので必読の一冊です。

追加で、エンジニアがデザインについても知っているとデザイナとのコミュニケーションがとりやすくなると思うのでその辺のお勧めの本も載せておきます。
アクセシビリティの向上はエンジニアだけで対応できるものも多いですが、デザイナと協力して改善する部分も多いです。周辺知識も併せて知っておきましょう。

• インターフェースデザインの心理学
  https://amzn.asia/d/2e5wjVl
  アクセシビリティと直接紐づく訳ではないかもしれませんが、知っておくと「あぁだからそういうデザインにするのか、そういうデザインがいいのか」という気づきを得ることができる一冊です。
• 縁の下のUIデザイン　小さな工夫で大きな効果をもたらす実践TIPS＆テクニック
  https://amzn.asia/d/1nXZlcV
  小手先のテクニックだけでアクセシビリティを全て改善することはできません。そもそも今のUIも変更した方がいいよね　という話ができるようになる一冊です。
• インターフェースデザインのお約束
  https://amzn.asia/d/3atmBGZ
  今読んでいるところなのですが、アクセシビリティの改善において知っておいた方がいい知識がたくさん詰まっていそうな一冊です。

ここまで本を紹介してきましたが、QiitaやZenn、個人ブログなどにもいい情報はたくさんあります。
特にリアルタイムで最新の情報を得るにはTwitterや勉強会へ参加すると「知らなかった」から「知っている　検索できる」になれるので気になるエンジニアをフォローしておくのをお勧めします。
「アクセシビリティ」とか「a11y」みたいな単語で検索するといいです。

あと僕はまだちょっとしか読めていませんが、すごいボリュームの記事があるので見ておくと良さそうです。
ウェブアクセシビリティを無料で学べる資料まとめ（10年分）

正しいタグでマークアップする

全部は紹介できないので、ここからやるといい、ここはできていないことが多い　と感じた部分をいくつか書きます。

• a[href="javascript:void(0)"]
  昔からあるコードだとありがちです。リンクじゃないならbuttonタグに置き換えましょう。
  buttonタグのCSSのリセットが地味にめんどくさいです。
• mainタグがない
  メインコンテンツをmainタグで囲みましょう。ボイスオーバーなどのスクリーンリーダーでメインコンテンツから読み進められるようになります。
  ちなみにmainタグにrole="main"を入れている人もいると思いますが、今は不要です。
• メインナビゲーションがnavタグで囲われていない
  囲みましょう。複数回使う場合はラベル付けが必要ですが、とりあえずヘッダーなどにあるサイトやアプリケーションの中で一番大事なものをnavタグで囲みましょう。
• input[type="radio|checkbox"]が隠されている
  display: noneで隠さないようにしましょう。キーボード操作できなくなるしスクリーンリーダーでもラジオボタンやチェックボックスがあることを認識できません。

とりあえず最初はタブキーでリンクやボタンや入力欄にフォーカスを移せるようにした方がいいです。
どこにフォーカスされているかわからない状態になっている場合も多いと思います。（outline: none|0;とか）

まとめ

この記事では

• どこからなにをやったらいいかを知る
• どれだけ時間を使えるか確認
• 読むと良さそうな本を知る
• 簡単にできるマークアップの改善点の紹介

を見てきました。

次回は「スクリーンリーダーの使い方を知る」から説明します。
この記事までは「知る」を扱っており、「手を動かす」はほとんどしていません。
次の記事からは手を動かしていきましょう！