本記事は、Webアクセシビリティ勉強会①：輪読会編 の続きの記事になっております。
まだ読んでいない方は、ぜひ「勉強会①：輪読会編」から読んでみてください！
今回は、火曜日に開催されている実際のサイトをチェックしてみる勉強会の様子をご紹介したいと思います！
火曜日：実際のサイトをチェックしてみる
実践編ということで、実際のサイトを元にWebアクセシビリティのチェックを行う会となっています。
実際にアクセシビリティ診断と同じような実践を学べる勉強会となっており、普段の制作にもすぐに役立つ内容になっています！
具体的にどのように進めているかというと、ウェブアクセシビリティ基盤委員会 (WAIC) が翻訳しているWCAG 2.1 解説書をもとに実際のサイトをチェックしています。
そもそもWCAGは何かというと、インターネットの技術の標準化を行っている非営利団体W3C（WorldWideWebConsortium）が作成しているWebアクセシビリティに関するガイドラインになります。
WCAGはスマートフォンの普及や技術の進化にあわせ改訂されていき、最新では2.2まで存在していますが、ここではWCAG2.1を基準にサイトのチェックをしていきたいと思います。
WCAGの説明については、デジタル庁が公開している「ウェブアクセシビリティ導入ガイドブック」で分かりやすくまとまっているので、興味がある方はぜひ確認してみてください！
参考：ウェブアクセシビリティ導入ガイドブック
前提のお話が終わったところで、実際にサイトをどのようにチェックしているか説明していきたいと思います！
今回は試しに「アピリッツのサイトTOP」を例に説明をしていきます！
株式会社アピリッツ：https://appirits.com/
サイトを見る前に、まずは達成基準 1.1.1をチェックしていきたいと思います。
「達成基準 1.1.1: 非テキストコンテンツを理解する」の項目を確認すると、
利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている
といった内容が書かれています。
この内容を読み解いてみると……
「非テキストコンテンツ」はテキストではない要素なので、画像やグラフなどが該当します。
そして「同等の目的を果たすテキストによる代替が提供されている」とあるため、Webページ内の画像等のコンテンツに対して、その画像を説明する文章を何かしらの方法で提供されているべきだと理解できますね。
このように対応する事で、視覚的な情報を得る事が難しいユーザーに対しても、スクリーンリーダーの読み上げなどの代替情報を通して画像を見た時と同等の情報を伝えることが可能になります！
では、早速アピリッツのサイトTOPを見ていきましょう。
ページの最初の方に他企業様のロゴ画像がありますが、こちらはalt要素に企業名が入っており、読み上げをした時にもどのような企業ロゴが並んでいるか判断できます。
こちらの部分は問題なさそうですね！
この調子で他にも画像要素がないか見ていきましょう。
次はAPPIRITS SPIRITSの記事へのリンク画像です。こちらの箇所を確認してみると、読み上げた際には何の記事へのリンクかわからなくない状態になってしまっています……
実はアピリッツのサイトは現在「JIS X 8341-3:2016 適合レベルAAに準拠するWebサイト」を目指して改修を始めた段階となります。
そのため、現在は情報を入手できないユーザーがいた場合はお問い合わせなどで人的な対応をしつつ、徐々にアクセシビリティ対応したサイトになるように改修を進めております！
折角なので、どのようにしたら「APPIRITS SPIRITSの記事へのリンク画像」がWebアクセシビリティ的にもよくなるか確認してみましょう！
「達成基準 1.1.1: 非テキストコンテンツを理解する」の項目を改めて確認してみると、ページ下の方に「十分な達成方法」というWebアクセシビリティ対応の事例集が存在します。
あくまで事例のため、この通りにしないとWebアクセシビリティ対応ができないという訳ではありませんが 、困った時にはチェックしてみましょう！
今回の場合、「状況 A: 短い説明が非テキストコンテンツと同じ目的を果たし、かつ同じ情報を提示できる場合」が当てはまりそうです。
中でも、今回は下記２つの方法が使えそうですので内容をチェックしていきましょう！
１つ目は、企業ロゴの部分で使われていたImg要素のalt属性を設定するという内容です。
２つ目は、img要素のalt属性は空のまま、a要素内に画像の内容を補完するテキストがある状態にする内容になります。
例えば、下記のTOPICSのようにa要素内にテキストが存在すると、スクリーンリーダーで読み上げた際に、どのような記事へのリンクなのかわかる様になります！
Webアクセシビリティの対応方法は様々ですが、「ユーザーに何を伝えたいか、分かりやすく伝えるにはどうすればいいか」を考えることを忘れずに、日々の制作に打ち込んでいければと思います！
勉強会を始めてみて
一緒に勉強会を運営してくれるメンバーも増えてきて、勉強会をより良くしていこうという動きが活発になっています。
その結果、今ではWebアクセシビリティの話題がチーム内で当たり前に出てくるようになり、お互いに「これはWebアクセシビリティ的に問題がないか？」といった相談が活発的に行われるようになりました。
今後もWebアクセシビリティ勉強会を通じて、チーム全体で理解を深めていければと思います！
誰もがアクセス可能な情報発信のために
私たちデザインチームでは、アクセシビリティ方針策定やデザイン制作、マークアップ、アクセシビリティ診断など、さまざまなサービスをご提供しています。
Webアクセシビリティ対応支援
・Webアクセシビリティを考慮した制作・開発
・Webアクセシビリティ診断
・Webアクセシビリティ対応の立案・施策作成
アクセシビリティでお困りの方、一緒にプロジェクトに参加してくれる方がいらっしゃいましたら、ぜひご相談ください！
