creative-hunt 
こんにちは。クリエイティブハント山口の初心者主婦・ムラカミです（Web制作を独学しながら修行中）。2017年11月23日、『Webアクセシビリティの学校 in 山口』が開催されました！
この講座は、株式会社インフォアクシア様が全国各地で開催している『Webアクセシビリティの学校』の山口版。Webアクセシビリティについて基礎的な概念から、障がいを持つ方の実際のWebへのアクセス方法、マークアップの具体的な書き方まで、易しく詳しく学べます。
今回クリエイティブハントはアクセシビリティ部という部会を発足し、山口での開催のお手伝いさせていただきました。
ご参加いただいたみなさま、ありがとうございました！
授業のノート
山口市中心商店街の一角にある『mirai365』の多目的ルームに集まった約30名の“生徒”。学校さながらのチャイム音で着席し授業に臨みました。どれも重要でしたが、特に私が心に残ったものをピックアップして紹介します！
１時間目：Webアクセシビリティとは︖
Webアクセシビリティとは、Webでの情報の取得しやすさのことです。紙などと比べるとWebはマシンで読み上げることができる（マシンリーダブル）ため、それ自体がアクセシブルであると言えます。が、もっと伝わりやすくする為にいろんなことができるということを全体を通して学びました。
日本のWebアクセシビリティ事情
世界ではAmazon、Disney、NETFLIXなどの大手企業がWebアクセシビリティ確保不足で訴えられてきた歴史があります。それを機にアクセシビリティの確保に積極的に取り組む企業も多数あり、多くの国がWebアクセシビリティを義務化しています。
一方で日本は出遅れていると言えますが、2016年に施行された『障害者差別解消法』によりWebでも“合理的配慮”すなわちWebアクセシビリィの確保が求められるようになりました。公共団体のWebサイトは2018年3⽉末までに「WCAG (Web Content Accessiblity Guidelines) 2.0」の達成基準レベル「AA」 準拠を推奨しています。民間でも日本の名だたる企業が続々とWebアクセシビリティの⽅針や試験結果を公開してます。
アクセシビリティは儲かる
障がいを持つ一部の人の為だけに大きなコストがかかると誤解されがちなWebアクセシビリティ対応。でも実際は、企業の利益に貢献するものなのです。
例えば、デパートなどのエスカレーターを思い浮かべてもらうと分かりやすいですが、脚力に不安がある人の為に設置されたものだったとしても、全ての人に恩恵がありますよね。私も使っています。同じように視覚に障がいのある人が使いやすいWebは全ての人のとって使いやすいのです。というとは、企業にとってはユーザーとの接点が増えて利益につながるチャンスが増える！ということです。
また、Webの制作側が「アクセシビリティ対応できる」と他との差別化となり、お仕事に繋がります。
Webアクセシビリティのガイドラインは抽象的で難解？でも大丈夫！
日本のWebアクセシビリティの規格として使われている『JIS X 8341-3:2016』（WCAG 2.0と同じ内容）、読んでみると（私にとっては）難しく感じます。その理由は実は、『HTML』や『Flash』のような”特定の技術”を単語として使わないようにしていからなのです。
でも大丈夫！この規格を分かりやすく解説した『Webアクセシビリティ逆引きガイドライン』（Presented by 株式会社インフォアクシア）を利用すれば理解しやすくなります。要チェックです。
ムラカミ注釈：
この『Webアクセシビリティ逆引きガイドライン』は、Webアクセシビリティ専門の情報提供Webサイト『エー イレブン ワイ』のコンテンツです。サイトの説明に”ユーザーフレンドリーでみんなが利用できるWebコンテンツづくりをサポートします”とあるように、とっても分かりやすく、またアクセシビリティに関する最新情報やセミナー情報などがアップされているので、ぜひチェックしてみてください。また、もちろんこのサイト自体がアクセシビリティ確保のお手本のようですごく参考になります。
２時間目：アクセシビリティ確保の基本
障がい者への対応として捉えられがちなWebアクセシビリティの確保ですが、実はそれだけではありません。スマホやタブレットなどWebを使うデバイスや使用環境が多様化している中、誰でもWebコンテンツについて「○○できない、○○しづらい」ことがあります。
キーワードは『マシンリーダブル』
アクセシビリティの確保では読み上げられること、すなわち『マシンリーダブル』であることが大事です。マシンとはHTMLを解析するブラウザやスクリーンリーダーなどのことです。
マシンリーダブルにする最も基本的な対応は、適切なマークアップです。＜title＞や＜h1＞などタグでテキストに意味付けすることで、そのテキスト（文字情報）が読み上げられ、情報を伝えることができます。
画像はそのままではマシンは読み取れないので、何を表現しているかを＜img＞のalt属性に記述します。こうすることでマシンが読み取れるようになるだけでなく、検索クローラーも情報を取得できるようになります。
ポイント
- 写真を掲載するときは、alt属性に『写真：』と入れると親切。写真は情報量が多いので、alt属性の記述だけで伝わりにくいときは周囲の人に改めて説明してもらうなどの対応を取りやすくなる為。
- 近年AIにより様々な分野で自動化が進んでいるが、画像のalt属性は同じ画像でも伝えたい情報が異なることがあるので、まだまだ人によるテキスト化が必要。
３時間目：明⽇から実践できるキホンのキ
３時間目はマークアップの実装編でした！初心者の私にとっては少し難しい内容でしたので、まとめというよりは私が理解したことを書きますね。
ページの領域を分ける
Webページの中には、ヘッダー部分、メインコンテンツ部分、ナビゲーション部分、フッター部分など様々なセクションに分かれています。これをそのまま、＜header＞＜main＞＜nav＞＜footer＞などでマークアップします。こうすることで、その部分が何のセクションかマシンに伝えられます。このことは、セミナーに参加された株式会社リバース様のブログに詳しく解説されていますので、ぜひご覧ください。
role属性とaria-label属性
恥ずかしながら、HTMLの入門書に出てこないこれらの属性のことを私はほとんど知りませんでした。初耳と言っても過言ではありません…。
例えば複雑なWebページでは、＜nav＞要素がいくつも使われることがありますが、この時にこれらの属性を使うと、その要素がどういう役割かよりマシンに伝えやすくなります。
関連：Webアクセシビリティ 逆引きガイドライン「ページの領域」
印象的だったのはウェブアクセシビリティ基盤委員会（WAIC）の委員長でもある植木さんが『今はこれが最善と考えているけど、今後は必要なくなるかもしれない』と仰っていたことでした。
Webアクセシビリティも確立途中で『これが未来永劫正解！』というものではないのだなということを知りました。だからこそ、今最善であることを実装することや、将来的に柔軟な対応ができるように基本的な考え方を身につけていくことが大事なのだと感じました。
まだまだWebを勉強中の私にとって難しい部分もありましたが、まずはアクセシビリティの確保を実践していく上で大きな一歩を踏み出せた気がします。
アクセシビリティ確保のキホンの「キ」
最後はアクセシビリティ確保の基本10ケ条について、例を交えて具体的なケースを学びました。
- ページの内容が分かるページタイトルを記述する
- ⾒出しやリストなどの⽂書構造をマークアップする
- リンクテキストは、リンク先が分かる⽂⾔にする
- 情報を伝えている画像に代替テキストを提供する
- ⽂字⾊と背景⾊のコントラストを確保する
- ユーザーがコンテンツを拡⼤表⽰できるようにする
- キーボードだけでも操作できるようにする
- フォーム・コントロールのラベルを提供する
- データテーブルの構造をマークアップする
- エラーメッセージではエラー箇所を明⽰する
最後の最後は『お楽しみコンテンツ』で締めくくりました。どんな内容だったかは、ぜひこれから開催されるお近くの講座に足を運ばれて確認してください(^^)
補講（フォローアップ）
授業後のアンケート（Web）で質問を送ると、フォローアップメールで全ての質問に植木さんが詳しく解説してくださいました。
授業と関係ないかも？と思われることでも、すごく丁寧にお答えしてくださっていた上に、それを参加者全員で共有することで、さらに理解が深まりました。
制作者だけでなく、様々な立場の方と受講できました
『Webアクセシビリティの学校』は基本的にはWebの制作者向けですが、今回はWebを発注する側の自治体にもお声がけし、数名にお越しいただきました。
現実問題として、アクセシビリティを確保したサイトを制作しようとした際に受注者は
- 技術的な問題
- アクセシビリティを確保するための予算がつかない
- 『大・中・小、背景色変更ボタン必須』など、間違った認識で作られた仕様を渡される
に直面します。
１の技術的な問題は制作者の技術向上で解決できますが、２・３の予算や仕様に関する問題を解決するには発注する側の理解が不可欠です。このような現状を打開するチャンスということで、講師の植木さんに相談し山口県・県内の市町全てに今回の講座を案内した結果、自治体から数名ご参加いただきました。
また自治体以外でも公共性の高いサイトを発注されている立場の方や、メディアの方など、様々な立場の方にご参加いただきました。講座を通じて、やはりアクセシビリティを実践するのは制作者だけでなく、発注者、そして利用者の意識の向上も不可欠と感じました。個人的にはWeb業界だけでなく社会的にも徐々に認知が広まって、例えば今やスマートフォンに対応していないサイトが少なくなっているように・多くのサイトがSSL対応してきているように、普通のこととしてWebサイトにアクセシビリティが確保されれば良いなと思います。
『Webアクセシビリティの学校』今後の開校情報
現時点（2017/12/30）で次の開催が決定しています。
- 2018/2/3 東京【申込受付中】
- 2018/5/19 広島
- 2018/6/16 名古屋
私自身、参加してとても良かったです！既にWeb制作で活躍されている方はもちろん、私のような初心者や異分野の方にもきっと『Webアクセシビリティって何？』という疑問の答えを持ち帰っていただけると思います。
マークアップの部分は、Web制作に詳しくない方がこの日だけで全てを理解して帰るのは難しいかもしれません。でもこれからWebアクセシビリティを学んでいく方にとっては、何かキーワードだけでも心に残れば、これから書籍やネット上の情報で学んでいく際にきっと『あの時、植木さんに教わったことだ！』と結びつくのではないかと思います。また異分野の方には、Webアクセシビリティの重要性や、実践にあたり技術や予算も必要だということをお分かりいただけるのかもしれない思いました。
ぜひお近くの会場にぜひご参加ください！
最後に
改めて、ご参加いただいたみなさまありがとうございました！遠方からもお越しいただき、心から感謝しています。
そして株式会社インフォアクシアの植木真さま、スタッフさまありがとうございました！
また告知に協力してくださったセミナー・個人のみなさまありがとうございました。
- 岡山Webクリエイターズ（岡山）
- WordBench倉敷（岡山）
- CSS Nite in 広島（広島 ※17/12/3、実行委員解散）
- !important（福岡）
（東西順）
セミナーやその関連レポートをお書きくださったみなさん、ありがとうございます！
最後に、クリエイティブハント山口アクセシビリティ部のみなさん、お疲れ様でした。ありがとうございました。
『Webアクセシビリティの学校』をはじめ、全国でWebアクセシビリティの勉強会など盛んになっているようですので、またいつかどこかでお会いできたら嬉しいです。
私自身はまだまだこれからですので、今後も勉強して実践していきたいと思います。