2017年6月9日金曜日、第1回「京都でウェブアクセシビリティたいらげ会」に参加。かなり頭を使う会となりました。普段いかに考えることをしていないかwしかし、大変良い勉強会だったので、今後の開催も熱烈希望です!
大阪のアクセシビリティおじさんを自称しておりますが、言ったからにはやりきらねば。と昨日の勉強会で強く思った次第です。勉強不足が露呈してしまったんですがwまぁ、これを機会にもう少し踏み込んで勉強していく次第です。(がんばれ、おじさん)
- はじめに
- アクセシビリティの4つの原則を理解する
- テキストによる代替: ガイドライン 1.1 を理解する
- 非テキストコンテンツ: 達成基準 1.1.1 を理解する
- 勉強会後のアクセシビリティ談義
- 追伸:A11yc アクセシビリティ バリデーション サービス
はじめに
京都の時代工房さんで「ウェブアクセシビリティたいらげ会」に参加させていただきました。今回の勉強会開催の発端として、私の軽率な発言がフックになったようで(;´Д`)責任感じながら、関西からアクセシビリティを盛り上げていければと思っている次第です。
それは、さておき。。。
今回は、WCAG2.0 解説書を読み進めて行くというもの。実は、WCAGもJISもここまでがっつり読み込んだことがありませんでした(;´Д`)
この仕様書のたぐいって、一人ではとうてい読み進みることができないwというのも、言葉が難しくて(日本語むずかしい)、挫折してしまうんですね。。。これ、経験ある方いらっしゃるかと思います。
しかし、今回は、時代工房の柴田さんをはじめ、ウェブアクセシビリティ基盤委員会(WAIC)で仕様書の翻訳をされているもんどさんもいらっしゃるということで、まぁ、勉強になりましたわ。これは、ぜひ続けて欲しい!(個人的に)
ちなみに、たいらげ会の前夜にもんどさんが、必死こいて翻訳を修正されてたそうで。。。ありがとうございます。その新しいバージョンが、GitHubにありますので、そちらも併せてご覧いただければと思います。
今回、読み進めたのは、WCAG 2.0 解説書のイントロダクションの中にある、「アクセシビリティの4つの原則を理解する」という箇所から。
アクセシビリティの4つの原則を理解する
4つの原則とは、
- 知覚可能(Perceivable)
- 操作可能(Operable)
- 理解可能(Understandable)
- 堅牢性(Robust)
です。
4つの原則は、よく聞く内容なんですが、実際に中身を読み進めていくと、結構難しく書かれてる印象。アクセシビリティの前に、日本語勉強せなwと思いました。これは、基本事項なので、しっかりと理解しておかなければ。
柴田さん曰く、「日本語で意味がわからなければ、原文を当たってみると良い」とのことでした。なるほど。私、英語もままならないですがwニュアンスは理解できそうですね。ありがとうございます。原文:Understanding WCAG 2.0もぜひ参考にしてみてください!
テキストによる代替: ガイドライン 1.1 を理解する
いよいよ、本文を読み進めていきます。一発目は「テキストによる代替: ガイドライン 1.1 を理解する」です。
ガイドライン 1.1: すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、テキストによる代替を提供すること。
非テキストコンテンツには、テキストによる代替手段を提供しましょう、ということです。書いてる通りですねw
つまりは、テキストサイコー\(^o^)/ってことですね。テキストは、利用者のニーズを最もよく満たしますし、どんなものにも変えられる。すばらしいです。
非テキストコンテンツ: 達成基準 1.1.1 を理解する
続きまして「非テキストコンテンツ: 達成基準 1.1.1 を理解する」です。
非テキストコンテンツには、代替テキストを提供しましょうと書かれてるのですが、その中でも、一部例外も存在します。はじめ、よく理解出来なかったんですが、読み進めていくうちに自分の中にすーっと入ってきた感じがしました。これは、1人で読んでても駄目だなと感じました。内容を理解している人がいるだけで、ここまで理解度が変わるのか!と思わされた勉強会でした。(おじさん、勉強不足でした。。。)
1.1.1 非テキストコンテンツ: 利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。ただし、次の場合は除く: (レベル A)
コントロール、入力: 非テキストコンテンツが、コントロール又は利用者の入力を受け付けるものであるとき、その目的を説明する名前 (name) を提供している。 (コントロール及び利用者の入力を受け入れるコンテンツに関するその他の要件は、ガイドライン 4.1を参照。)
時間依存メディア: 非テキストコンテンツが、時間に依存したメディアであるとき、テキストによる代替は、少なくとも、その非テキストコンテンツを識別できる説明を提供している。 (メディアに関するその他の要件は、ガイドライン 1.2を参照。)
テスト: 非テキストコンテンツが、テキストで提示されると無効になるテスト又は演習のとき、テキストによる代替は、少なくともその非テキストコンテンツを識別できる説明を提供している。
感覚的: 非テキストコンテンツが、特定の感覚的体験を創り出すことを主に意図しているとき、テキストによる代替は、少なくともその非テキストコンテンツを識別できる説明を提供している。
CAPTCHA: 非テキストコンテンツが、コンピュータではなく人間がコンテンツにアクセスしていることを確認する目的で用いられているとき、テキストによる代替は、その非テキストコンテンツの目的を特定し、説明している。なおかつ、他の感覚による知覚に対応して出力する CAPTCHA の代替形式を提供することで、様々な障害に対応している。
装飾、整形、非表示: 非テキストコンテンツが、純粋な装飾である、見た目の整形のためだけに用いられている、又は利用者に提供されるものではないとき、支援技術が無視できるように実装されている。
いかがでしょうか。これだけ見てもよくわかりませんよねwこの場合、実例を併せて見ていくと理解が進むとのことでした。(勉強会では、深掘りはしませんでしたが)実例は「WCAG 2.0 達成方法集 WCAG 2.0 の達成方法と不適合事例」に詳しく載ってますので、ぜひ御覧ください!
では、簡単に各項目を見ていきましょう。
コントロール、入力
初め「name」ってなんぞや??と思いましたが、、、たとえば、フォームのお話ですね。label付けましょうということです。詳しい説明は、別の項に書かれております。「名前 (name) ・役割 (role) 及び値 (value) : 達成基準 4.1.2 を理解する」をご参照ください。
時間依存メディア
動画や音声、カルーセルなんかもそうですね。つまり、動画である!ということをしっかりと伝える必要があるということです。
テスト
これ、最初なんのことかわからなかったんですが、問題を出された時に、altに答えが書かれてあるようなことはNGということ。画像であるということが伝わればよいとのことでした。いわゆる試験のことですね。
感覚的
説明がむずかしい。。。目が見えない人は、ピカソの絵を理解できないし、耳が聞こえない人は、オーケストラの音楽を理解できない。そんな事例が上がりました。感覚的体験は言葉で説明できませんよね、という話。
話の流れで、感覚モダリティのお話が出てきました。「感覚モダリティ=ニュアンス、印象」的な捉え方。この言い方の方が理解しやすいですね。
CAPTCHA
キャプチャと読みます。よく、「表示されてる文字を入力してください」というアレ。ここにも、表示されてる内容をaltに書くのはNG。意味がなくなりますからねw気をつけましょう。
装飾、整形、非表示
装飾するための画像、たとえば罫線などには、特に代替テキストは必要ないという話です。昔話で、スペーサーGIFのお話が例として上がりました。懐かしい。縦横1pxの透過GIFを見栄えのために利用するという、なんともムダな指定ですwあの頃(10年以上前)は、スペーサーGIFがないとレイアウトできなかったんですけどね(๑´ڡ`๑)
勉強会後のアクセシビリティ談義
アクセシビリティ談義の後はビール! pic.twitter.com/OYKbSJk0vR
— 小畑 タカユキ (@kobatatakayuki) 2017年6月9日
勉強会後は、ビールを片手にアクセシビリティ談義。みなさん、よく勉強されておられます。中でも印象的だったのが、、、柴田さんが、神崎先生のユニバーサルHTML/XHTMLにサインを貰ってたこと!神崎先生の生サイン拝ませていただきました!ただ、上には上がいるとのことで、、、本家アクセシビリティおじさんは、一緒に飲みに行く機会もあるとかwさすがっす。
お酒の力もあったのか、お話がアクセシビリティの本筋とはズレたりしましたがwみんな同じ方向を向いてるなーというのは感じ取ることができました。関西で盛り上げていかねば!という気持ちにもさせられました!今回企画いただいた、柴田さんをはじめ時代工房の皆様、貴重な機会をありがとうございました!
そして、次回開催熱烈希望です( ー`дー´)キリッ
追伸:A11yc アクセシビリティ バリデーション サービス
あと、これ言うとかなっ!
時代工房さんで開発している、「A11yc アクセシビリティ バリデーション サービス ver.0.9.2」は、制作のお供にどうぞ!あと、地味に「参考資料 - A11yc アクセシビリティ バリデーション サービス」が勉強になる!!!!!こちらもぜひご一読を!
併せて、Webアクセシビリティ学ぶなら、ピンク本がおすすめ〜!これは超絶読みやすいので、Webアクセシビリティをお勉強される方は、手元においておくべきですね!
おわり。