Webアクセシビリティの学校 in 京都に行ってきました

株式会社インフォアクシアさんが開催している「Webアクセシビリティの学校 in 京都」に行ってきました。

「Webアクセシビリティの学校 in 京都」にご参加いただいた皆さん、昨日はありがとうございました！

アンケートのURLをご案内するフォローアップメールをお送りしました。皆さんの率直なご感想、ご質問をお待ちしております！ pic.twitter.com/eC4wmfHaWU

— WebA11y.jp［エーイレブンワイ］ (@weba11y) 2017年9月24日

国際会議でも開かれるのかようなテーブルが並ぶ会場で、入場した瞬間、恐れおののきましたが非常におもしろい内容でした。

以下、レポートですが、メモからの書き起こしなので間違っている部分や大切な部分が抜けていることもあると思います。
僕自信がHTMLやWebアクセシビリティについての知識が乏しい部分もありますのでご了承下さいませ。

近年の世界でのWebアクセシビリティの動向

アメリカではWebアクセシビリティを巡る訴訟が増加傾向にあります。
例えばAmazonやディズニー、マクドナルドなど多数の企業が訴えられています。

2015年に提起された訴訟件数は57件だった。これが2016年には262件に、2017年は8月15日までに432件に増加している

引用：米国でウェブアクセシビリティ訴訟は増加の一途 – アゴラ

W3Cでは「障害のある人がWebを使えること」を掲げていますが、様々な国が法律でWebアクセシビリティを義務化する流れが広まっています。

日本のWebアクセシビリティの動向

日本では2016年4月1日に障害者差別解消法が施行されました。

障害者差別解消法では、差別を解消するための措置として「不当な差別的取扱いの禁止」と「合理的配慮の提供」を求めています。

インターネットやスマートフォンが普及した今、ウェブサイトは障がいの有無にかかわらず、多くの人にとって必要不可欠なメディアであり、「障がい者への合理的配慮 = 十分なアクセシビリティの確保」が求められます。

引用：「障害者差別解消法」施行によってウェブ担当者が考えるべきこと : ビジネスとIT活用に役立つ情報

障害者差別解消法の効果もあってか、アクセシビリティ方針や試験結果をサイトに掲載する企業が出てきています。

身近なところでは、2020年オリンピックのサイトでアクセシビリティについて言及しています。（オリンピックのサイトは世界で初のWebアクセシビリティに関する訴訟の判例となったことで有名）

・ウェブアクセシビリティについて｜東京オリンピック・パラリンピック競技大会組織委員会

特に日本は高齢化が急激に進んでいるので、アクセシビリティへの取組みはより重要になるとのこと。

勘違いされているWebアクセシビリティ

文字サイズ変更ボタンは必須？

実は、JIS規格上では必須とされていないそうです。
もし文字サイズ変更ボタンを付けるのであれば200%まで段階的に拡大出来るようにすること。

ほとんどサイズの変わらない文字サイズ変更ボタンは意味がありません。言われたから名目上付けただけの機能を果たしていないものは見直す必要があります。

デザインがダサくなる？

No！現状はアクセシビリティを考慮したWeb制作に、腕のいいデザイナーがコミットしている例が少ないだけ。

アクセシビリティとデザイナーは遠い関係にあるように思えますが、Webデザインにおいてアクセシビリティは非常に密接な関係です。
アクセシビリティを考慮してWebサイトをデザイン出来てこそ、Webデザイナーと名乗れるのではないでしょうか。

Webアクセシビリティは障害者のためのもの？

W3Cではアクセシビリティについて「障害がある人」に対して行うべきだと記されていますが、誰しもにとって有用なものであると再認識されています。

近年、デバイスの多様化によってWebサイトを利用するシーンやユーザーも様々になっています。

Webサイトを使う上で、どんな人でも「～できない、～しづらい」ことがありますが、
それを「～できる、～しやすい」にすることがアクセシビリティをデザインするということです。

スポンサードリンク

Webサイトを「マシンリーダブル」にする

Webサイトはいろんな人に利用されます。その「いろんな」の中で忘れてはいけない一つがマシンです。

ここでいうマシンとは「ユーザーエージェント」のこと。

• ビジュアルブラウザ
• ノンビジュアルブラウザ（スクリーンリーダーや点字リーダー）
• サーチエンジン

これらのマシンにも理解できるようなサイト制作を心がけることが、これからより重要となっていきます。

また、スクリーンリーダー対応とSEOには共通点が多い。このあたりは、「沈黙のWebライティング」で読んだ内容とも関連性が高く感じました。人に伝わるライティングはSEOにも強い。

沈黙のWebライティング ?Webマーケッター ボーンの激闘?

マークアップの方法について

このセクションでは実際にアクセシビリティを向上させるにはどうマークアップすればよいのかを、ソースを例に解説していただきました。

印象的だったのは「ARIAを使うな！」ということ。

出来る限りHTMLで用意されたタグだけでマークアップをできるに越したことはないのです。HTMLで再現できない場合、それを補完するためにARIAを使うのですね。

つまり、HTMLはもとからアクセシブルに出来ているということです。

「WAI-ARIA」というワードをよく聞くようになりましたが、乱用や誤用には注意が必要ですね。セマンティックなHTMLのマークアップを心がけることが大事です。やはりそのほうが作業者にとっても見やすいソースになりますし。

アクセシビリティを考慮したマークアップについては以下の書籍が参考になるかと思います。

コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション

さいごに

今年2017年あたりからアクセシビリティについてちょくちょくチェックをしているのですが、今回のイベント「Webアクセシビリティの学校」はアクセシビリティ入門にとても良いセミナーでした。

ユーザーに情報を届ける役目をするWebデザインにおいて、アクセシビリティはベースの部分でありとても重要です。

制作者のちょっとした知識で、サイトを使える人が増えたり、または色んな人にとって使いやすいものになります。特にマークアップについてはとても顕著にでますので、気をつけてコーディングをしないといけないなと思いました。

次回は高知県や山口県で開催されるようで、もし近くで「Webアクセシビリティの学校」のイベントがある場合は、ぜひ行ってみて下さい。

・Webアクセシビリティの学校 | Doorkeeper

セミナー後のフォローアップメールのQ&Aもとても役に立ちました。

 Webアクセシビリティを勉強するのに一番分かりやすいのはやはり以下の本とのこと。

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ

まもなく上記の書籍の作者である太田さん、伊原さんが本を出されるようでこちらも楽しみです。

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン

 これからは「インクルーシブ」というワードに要注目です。