「Webアクセシビリティの学校」に参加してきました！

2019年2月1日(金)に福岡市中央区にあるクリエイティブセンター福岡で開催された「Webアクセシビリティの学校」に参加してきました。
今回、福岡県で開催されたのですが、参加者の中には大阪府や鳥取県など県外から参加されている方もいて、とても注目度の高い勉強会だと感じました。

「アクセシビリティって何？」という気持ちで参加したので、同じ気持ちの人に向けてブログを書いていきたいと思います。

講師は株式会社インフォアクシアの植木真（うえき・まこと）さん。
グータッチ挨拶が大好きな非常にユーモアのある方です。
今回大ファンになり、サインもいただきました！♡

♪キーンコーンカンコーン
学校のチャイム音とともに「Webアクセシビリティの学校」はじまり〜はじまり〜

1時間目　ウェブアクセシビリティとは

ウェブアクセシビリティとは、「障害のある人がウェブを使えるようにすること」です。
しかし、この言葉のみでの説明には語弊がありますので、詳細は読み進めて理解していただけたらと思います。

アクセシビリティが法律で義務付けられている？！

諸外国（アメリカ、カナダ、韓国など）では、ウェブのアクセシビリティ確保が法律的に義務付けられています。
アメリカでは視覚障害者の対応を怠ったとして、法的に提訴されたケースもあるそうです。

日本では法律が定められてないから緩いのでは？と思いましたが、、、
日本にも平成28年4月1日から「障害者差別解消法」が存在しているそうです！

しかし、諸外国ほど法的な効力は強くなく、、、日本は遅れているのが現状(´・ω・｀)

諸外国で当たり前にしているのであれば、日本でも当たり前にすることが大切ですよね。
皆さん、アクセシビリティについて理解を深めていきましょう！！

視覚障害者はどのようにウェブを利用しているの？

視覚障害のある方がウェブを利用していることを存知でしょうか。
私は、視覚障害のある方はデータ入力など入力する場所が予測できるものは可能で、日々内容が更新されるウェブは予測できないので利用されていないと思い込んでいました。
どのように閲覧されているのか下記にまとめています。

全盲の方について

全盲の方は「スクリーンリーダー」という音声読み上げソフトを使ってウェブを閲覧されています。
実際にウェブを閲覧されている様子を下記の動画より見ることができます。

出典：総務省ホームページ

ロービジョンの方について

「ロービジョン（弱視）」という言葉をご存知ですか？
眼鏡やコンタクトレンズで矯正しても視力が十分に上がらない視覚障害です。

ロービジョンの方は、画面をもの凄く拡大して閲覧されています。
白い背景に黒い文字だと、背景が眩し過ぎて目が疲れたり読みづらかったりするため、画面の色を反転させて使ってあるそうです。
また、色が原因で文字が読みづらくなることもあるため、コントラスト比の達成基準（コントラスト比は4.5:1以上）を満たしておくことがとても大切です。
詳細は下記の動画で閲覧できます。

出典：総務省ホームページ

実際に都バスでは、背景を黒色にし、強調したい部分はコントラストの高い黄色で表示されているそうです。
このようにすることにより、ロービジョンの方にはもちろん、ロービジョンでない方も後部座席から文字が見えやすいなどの利点があるそうです。
その話を聞いたセミナーの帰り道、天神地下街の案内板がまさにそれでした！！

※写真の撮影が下手なだけで、実際はもう少し見えやすい濃い色をしています。

2時間目　アクセシビリティの考え方

高齢者も含めたアクセシビリティ

世界で最も高齢化が進んでいる国は断トツ「日本」です！
ウェブアクセシビリティが「障害者だけでなく高齢者にもメリットがある」と世界で考えたのは日本だそうです。

インターネット使用率も年々高齢化してきています。
高齢者と障害者ユーザを比較してみると、下記のように悩みは共通しています。

しかし、これは単に高齢者と障害者だけの共通点ではありません。

普段、メガネやコンタクトレンズを装着しているので外すと「見えづらい」、周囲が騒がしくて「聞こえづらい」、手を怪我していて「入力・操作しづらい」、お菓子を食べていて手が汚れているので「入力・操作できない」などあると思います。

このように、誰でも「〇〇できない、〇〇しづらい」ことがあります。
状態や状況が異なっていてもユーザのニーズは同じなのです。

アクセシビリティが必要とされる時代

今後アクセシビリティが必要とされる時代が近づいてきています。
その理由としては、下記の3つの要素が組み合わさるからです。

障害者差別法 × 超高齢社会 × 2020年

平成28年4月1日から存在する「障害者差別解消法」
目に見えて高齢化が進んでいる「超高齢社会」
オリンピック、パラリンピックが行われる「2020年」

このような背景もあり、「障害者が使いやすいように」から「みんなが使いやすいように」へ！

アクセシビリティに対応するということは、ウェブコンテンツを「マシンリーダブル」にすることです。
「マシンリーダブル」…私の苦手なカタカナ用語。何それおいしいの？(´・ω・｀)
簡単に説明すると、「機械に正しく読み取ってもらうために、意味合いのあった正しいHTMLを書きましょう！」ということでした。

ということで、どのような点に注意してHTMLを書けばいいのか「３限目アクセシビリティ基本の「キ」」へレッツゴー！

3時間目　アクセシビリティ基本の「キ」

JISで定められたガイドラインが存在しますが、非常に難しくて理解できないため、会場では非常にわかりやすく面白い動画「アクセシブルウォーズ」を鑑賞しました！！
ブログで動画をシェアしたかったのですが、この動画は参加された方限定だそうです。
まさかまさかの出演者がいますので、気になる方は是非「Webアクセシビリティの学校」へ参加されてみてはいかがでしょうか。

「Webアクセシビリティ確保の基本のキ」

動画がなくても大丈夫！株式会社インフォアクシアが制作された「アクセビリティ確保の基本の「キ」」に有難いほどわかりやすくまとめてあります。
下記の「アクセシビリティ確保の基本の「キ」」に、すぐに実践できる10項目が挙げられていますので、できることから始めていきましょう！

ページの内容が分かるページタイトルを記述する
ページタイトルは、どのようなウェブページなのかが分かる文言になっているか？

見出しやリストなどの文章構造をマークアップする
見た目だけではなく、適切な要素を用いて文書構造や意味をマークアップしているか？

リンクテキストは、リンク先が分かる文言にする
リンクテキストだけで、ユーザーがその場でリンク先へ移動するかどうかを判断できるか？

情報を伝えている画像に代替テキストを提供する
画像の代替テキストは、画像と同等の情報を過不足なく提供しているか？

情報を伝える色の使い方に注意する
色のコントラスト比を確保していて、色の違いが分からなくても情報が伝わるか？

ユーザーがコンテンツを拡大表示できるようにする
文字サイズを標準の 200％まで拡大しても、コンテンツの閲覧や操作に支障はないか？

キーボードだけで操作できるようにする
ウェブコンテンツは、マウスやタッチだけでなく、キーボードだけでも同じように操作できるか？

フォーム・コントロールのラベルや説明をマークアップする
コントロールのラベルや入力方法、入力例をコントロールの要素と関連付けているか？

エラーメッセージではエラー箇所と修正方法を明示する
ユーザーがエラーメッセージを読んで、どのように修正すればよいかを理解できるか？

動画にはキャプション（字幕）を提供する
ユーザーが動画の音声を聞くことができなくても、コンテンツを理解できるか？

引用元：アクセビリティ確保の基本の「キ」
制作：株式会社インフォアクシア