コラム4：ウェブアクセシビリティって知ってる？

こんには僕です。最近「Webディレクター」という肩書でTwitterやっている人の中で1番フォロワー数が多い人が誰なのか調べてみたところ、どうやらひろゆきさんの奥様だったようです。プロフィールにさりげなくWebディレクターって書いてて草。

（　＾ω＾）・・・・・ぁぁつよい

さて、今日はコミュニティ内で反響の良かったウェブアクセシビリティに関してサラっと解説しようと思います。果たして駆け出しの諸君についてこれるかな。

ウェブアクセシビリティってなに？

「ウェブ」の「アクセシビリティ」ということやで。

（　＾ω＾）・・・・・？？？？？？？

すみません。僕も考えながら書いているので錯乱しました。許せサスケ。
えーっと、アクセシビリティという考えはウェブのみを捉えているわけではないので、一旦整理して解説します。

そもそもアクセシビリティって
一般にアクセシビリティとは、アクセスのしやすさを意味します。転じて、製品やサービスの利用しやすさという意味でも使われます。
引用：https://waic.jp/knowledge/accessibility/

ふむふむ。

ウェブアクセシビリティって
ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティです。ウェブコンテンツ、より具体的にはウェブページにある情報や機能の利用しやすさを意味します。さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でウェブを使うようになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリティは必要不可欠な品質と言えます。
引用：https://waic.jp/knowledge/accessibility/

（　＾ω＾）・・・？

（ ＾ω＾ ）・・・？

（　＾ω＾）・・・？

つまりですね。どんな状態の人でもウェブサイトは利用できるようにしなきゃね。って考えです。全盲、色弱、聴覚に障害を持っている方はもちろん、マウスが使えない人、などなど挙げたらキリがないのですが、抑えてほしいポイントは1つです。「あらゆる人が、どのような環境においても利用できる、利用しやすいようにすること」です。

全員、把握しておかないといけない時代になりました

そこのメーカー勤務の君！君の会社で働くWeb管理者は知っているのかな？キチンと対応しないと罰金が発生するぞ。障害者差別解消法の2021年改正で、民間事業者も対応が義務化されたんだぞ！。だから、実はWebに携わらない人も知らないといけないのです。

2021年6月に、民間事業者の義務を公共機関と同等に格上げする改正が行われました。施行時期は、公布から3年以内を期限として別途政令で定められる予定です。障害者差別解消法は、障害を理由としてサービスの提供を正当な理由なく拒否・制限することを禁止しています。また、障害者が対応を求めた場合、公的機関や事業者は、過重な負担が要求されない限りこれに対応する(合理的配慮)義務が課せられます。適用範囲は多岐にわたり、WebサイトやSNS等を通じた情報提供も含まれます。罰則としては、この義務の遵守に関して主務大臣から求められた報告をしなかったり、虚偽の報告をしたりした場合、20万円以下の過料が課せられます。
引用：https://www.maxmouse.co.jp/tips/2021/0708/

ちなみに、取り組んでいる企業はもうドンドンやっているぞ。「○○○○（企業名）アクセシビリティ方針」とかで検索すると沢山でてくる。民間はもちろん、政府もやってる。以下参考。

内閣府のアクセシビリティ方針：https://www.cao.go.jp/notice/accessibility_guidelines.html
日立のアクセシビリティ方針：https://www.hitachi.co.jp/utility/accessibility/index.html

何をやればいいの？

ざっくりこんな感じだ。参考に。

かなりざっくり書くとこんな感じです。実際には調査や検証、ドキュメントの作成、アクセシビリティを準拠したコンポーネントパーツの見直し・作成など対象範囲によってやることが多いです。※対象範囲によってはWebだけではなくグラフィックやPDFの資料とかもアクセシビリティは対応しないといけないです。大変やで工藤。

ちょっと調べたんだけど適合レベルAとかAAってなに？AAA？

ウェブアクセシビリティは適合レベルA、AA、AAAという3段階で達成しないといけない調整ポイントがあります。参考：https://waic.jp/docs/jis2016/test-guidelines/201604/gcl_example.html

上記の参考を見てくれたかな？その中にAの達成しないといけないポイントで1.1.1　非テキストコンテンツの達成基準というのがありますよね。参考：https://waic.jp/docs/UNDERSTANDING-WCAG20/text-equiv-all.html

（　＾ω＾）・・・むずかしい汗

大丈夫。難しく考えるな。
今度はこっちを見てくれ。Amebaではこう解釈している。

Amebaの解説
装飾ではない画像やアイコンは、代替テキストで説明する。
引用：https://a11y-guidelines.ameba.design/1/1/1/

Amebaでは画像にはしっかり代替テキスト(alt)を設定しようとシンプルに解釈している。簡単、わかりやすい。

ただ、ここで注意しないといけないことがあります。それは前提として目が見えない人も含めてアクセスしやすい調整が必要ということ。つまり、ページの読み上げ機能(スクリーンリーダー)を使用したときにその画像の前後にある要素を考慮して日本語の文脈として自然な言葉をaltに選定しないといけない。

また、装飾を目的としたそれ単体では意味を持たない画像に関しては読み上げても意味がないのでaltを空っぽにすることが推奨となっている。※alt=””にする。alt自体の設定を怠るとスクリーンリーダーはファイル名を読み上げてしまう。要注意。

実際に内閣府や文科省のサイトのソースを見てaltをチェックしてみましょう。かなり文言が丁寧に設定されているはずです。是非参考にしましょう。

どうやって勉強すれば？

有名な企業さんが登壇しているセミナーに参加。例えばミツエーリンクスさん。アクセシビリティ周りにコラムを書いてたりします。あとは各社がどういう風に取り組んでいるか調べる。同じ業界の人間に聞きまくる。あと本で勉強する。

僕も最初わけわからん草。状態だったので死にかけましたが勉強したりセミナー聞いたりしてそこそこ把握することができました。そんな中で一番読んでタメになった本はこちらです。

有名な本なので知っている人多いかもです。約300ページあって大容量。あとデカい。イラスト付きで解説しているし、最後のページには「この適合レベルのときはこうしよう！」という適合レベルごとにどのページの解説を見ればいいのかまとめているので滅茶苦茶親切。制作会社に1冊あると安心する。そんな本です(`･ω･´)b

こっそりアフィリエイトリンク仕込んでるから、何か嫌だなっていう人は他の方法で購入してくれ。
めちゃくちゃ良い本だから(`･ω･´)b

ちょっと高いので、kindle版のリンクも置いておきます。