2015年12月26日（土）、ソラシティホールで開催したShift9：Webデザイン行く年来る年（CSS Nite LP43）のフォローアップとして、植木 真さん（インフォアクシア）、中根 雅文さん（AccSell）、山本 和泉さん、伊原 力也さん（ビジネス・アーキテクツ）、太田 良典さん（ビジネス・アーキテクツ）の『アクセシビリティ』セッションのスライドなどを公開します。
メッセージ：【植木さん】
インフォアクシアの植木です。
「WAI-ARIA」は、ゼロから実装しようとすると難易度が高いかもしれませんので、例えばセッションでもご紹介したように、最初のスタートとしては、WAI-ARIA対応を進めている「Foundation」や「Bootstrap」といったフレームワークや「jQuery UI」のウィジェットを使ってみるのがよいかもしれません。
例えば、「Bootstrap 3」用のプラグインがあるのですが、そのデモページではよく使われるリッチなUIにそのプラグインを用いてWAI-ARIAを実装してアクセシブルにしたサンプルを見ることができます。
このページには、モーダルウィンドウ、ドロップダウンメニュー、タブ＆タブパネルなどのサンプルがあります。デフォルトではプラグインが適用されていないのですが、ページ先頭にあるリンク「load bootstrap accessibility plugin features」をクリックすると、プラグインが適用された状態になります。
適用されているとき、先ほどのリンクは「unload bootstrap accessibility plugin features」という文言に変わっているのを確認してください。「unload ......」のリンクをクリックすれば、再びプラグインが適用されていないデフォルトの状態に戻ります。
デフォルトのときとプラグイン適用後のHTMLコードを見比べてみていただけると、違いが分かるかと思います。スクリーンリーダーの読み上げも、やはり明らかに変わりますよ。
こういった人気のあるフレームワークやライブラリなどでのWAI-ARIA対応が強化されていくといいなと思います。
その他、「WAI-ARIA」を実装したサンプルは、以下のURLなどで実際にご覧いただくことができます。
デモで使用したモーダルウィンドウは、こちらをベースにしました。
また、WebアクセシビリティのJIS規格（JIS X 8341-3）の元にもなっているW3C勧告「Web Content Accessibility Guidelines (WCAG) 2.0」の関連文書として、達成基準を満たす方法を解説したものがあり、以下のURLで日本語訳が公開されています。
それでは、また来年お会いしましょう！
メッセージ：【中根さん】
AccSellの中根です。
今回は、WAI-ARIAに注目してみました。
普段からアクセシビリティー関連の技術動向を追いかけている人でないと、まだあまり認知されていない技術だと思いますが、セッションの中でも触れたBootstrapやFoundationのようなフレームワーク、また最近のCMSが生成するコードを見ていただくと、role属性を初めとするWAI-ARIA関連の記述が意外に多いことに気づかれるのではないかと思います。
コンテンツの見た目にはなにも影響を与えないこれらの記述ですが、デモでご覧いただいたとおり、スクリーン・リーダーには大きな違いをもたらします。
W3Cが発行している仕様書を読んで理解しようと思うとかなり大変なこのWAI-ARIAですが、セッションの中でも取りあえげた書籍、「コーディングWebアクセシビリティ」や「わかりやすいWAI-ARIA 1.0仕様解説書」などを読んでいただければ、この技術の全貌を理解し、そしてアクセシビリティーとはなにかということを考えるきっかけになるのではないかと思います。
2015年は、WAI-ARIAの実装が、コンテンツ側でもユーザー・エージェント側でも進んで、ユーザー視点でもいよいよ使い物になるレベルになったなと強く感じさせられた年でした。おそらくこの流れはさらに続いて、いろいろなWebコンテンツをより多くの人にとって使いやすいものにしていく上で、WAI-ARIAが欠かせない技術になっていくのではないかと思います。
今回のセッションをきっかけに、そんなWAI-ARIAについて知り、そしてアクセシビリティーについても思いを巡らせてみていただければ嬉しいです。
AccSellでは、WAI-ARIAのようなWebアクセシビリティーに関連する最新技術に加えて、アクセシビリティーに関する社会的な動向、Web以外の分野も含めた情報アクセシビリティーに関連する話題、そしてアクセシビリティーに関連するイベント情報などを、ポッドキャスト、メール・マガジン、Twitter、そしてAccSellのサイト上で紹介しています。ぜひ一度覗いてみてください。
http://accsell.net/
メッセージ：【山本和泉さん】
こんにちは。AccSellのアクセシビリティ・ビギナーのガイドを担当している山本和泉です。
今回のアクセシビリティのセッションはいかがでしたか？
2015年はアクセシビリティの話題がネットやリアルや書籍等々でとても多かったなぁって本当に思いました。
以前、ミツエーリンクスの木達さんは「Webアクセシビリティ・ファースト」（http://web.a11y1st.jp/）というページで、『アクセシビリティは、マルチデバイス時代において、全てのWebサイトに必ず求められる品質の一つでしょう。』と書かれている通り、制作の追加の作業というポジションではなく「Webサイトの品質」として意識していく時代なんだろうなーって思います。
また、Webサイトが品質としてアクセシビリティを担保していくことで世界が変わるような気がします。
今回のセッションを機にぜひWebアクセシビリティについて一緒に意識していけたらうれしいです！！
追伸：ちなみに当日の伊原さんと太田さんは書籍に合わせた「アクセシビリティピンク」と「アクセシビリティグリーン」の衣装だったのをお気づきですか？
安心してください、動画で確認できますよ。
メッセージ：【太田さん】
ご参加ありがとうございました。
WAI-ARIAは難しそうだ、と感じられた方もいらっしゃるかもしれません。ご紹介した書籍『
コーディングWebアクセシビリティ』は、イギリス人の著者が高度なジョークを交えてWAI-ARIAの基礎的な考え方を紹介する、非常にフランクな読み物になっています。難しそうだと思われた方にこそお勧めですので、ぜひ一度お手にとって見ていただければと思います。
WAI-ARIAの難しさは、ぱっと見ではその効果が分からないところにもあります。今回のセッションでは中根さんにデモをしていただきましたが、このデモで初めてWAI-ARIAの効果を実感できたという方も多いのではないでしょうか。中根さんお勧めのNVDAやVoiceOverなどは気楽に導入できますので、興味をもたれた方は、ぜひ一度スクリーンリーダーでの読み上げを体験していただければと思います。
また、セッションでも簡単にご紹介しましたが、CSSフレームワークにWAI-ARIAが組み込まれていることも多くなってきています。きちんと設計されたフレームワークを使えば、あまり意識しなくても、自然とアクセシブルなコンテンツを作ることができるようになります。今後も普及は進んでいくと思いますので、恐れずに、かつ気楽に、WAI-ARIAに触れていっていただければと思います。
メッセージ：【伊原さん】
ご参加ありがとうございました。
書籍『
デザイニングWebアクセシビリティ』では、今回取り上げたネタも含め、いろんな状況における「使いづらさあるある」と実際の解決例を200件以上にわたって紹介しています。ぜひご覧ください。
こういったあるある問題を回避・改善するには、複数人でのプロトタイプのレビューや、近くに居る人へのゲリラ的なユーザビリティテストといった手法が有効です。
言い換えると「作り手の考えだけに閉じないようにする」ということであり、これって実は、今回のイベントで出た「プロセスを共有する」「コミュ障になるな」といった話、そのものだったりするのです。
アクセシビリティとは、多様な状況におけるユーザビリティの集合体です。だとすれば、作り手がなるべくスタンスを広く取って、周りに目を向け、共創していくことがアクセシビリティの改善に繋がるのは、至極当然のことだと言えます。
2016年の展望でも述べたとおり、これからWebやデバイスの利用はさらに多様化の一途を辿ります。アクセシビリティという引き出しを持っているかどうか、何か少しでも実践経験があるかどうかが、今後のWeb活用においての重要なヒントになることは間違いありません。
ぜひ視点をShiftさせて、一緒にアクセシビリティの世界を覗いてみませんか。安心してください、面白いですよ。
動画
Shift9［#3］アクセシビリティ from CSS Nite on Vimeo.
ベストセッション2019
2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。
