アクセシビリティー・ビギナーズ向けのセミナー「AccSell Meetup 008」に参加してきましたので、そのメモと感想を。
セッション1：イントロダクション JIS X 8341-3:2010を『日本語訳』してみる！～Webアクセシビリティの基本の『キ』～
- 講師
- 植木 真さん（株式会社インフォアクシア）
このセミナーで一番の目的のセッション。アクセシビリティについて学ぼうと思い、JIS X 8341-3:2010、及び
WCAGの日本語訳を読もうと思っても、規格や仕様の独特の言い回しが理解できなくて読む気が失せるということが多くあり、あえて日本語のJIS規格を日本語訳
する、と謳ったタイトルに期待していました。
スライドはPDFにて公開されています。 JIS X 8341-3:2010を『日本語訳』してみる！～Webアクセシビリティの基本の『キ』～
ビギナーズ向けということで、アクセシビリティって？Webそのものだよね、高齢者・障害者対応だけじゃないよね、というお話から、ここだけは抑えましょうというポイントの紹介があったのですが、やっぱり個人的に参考になったのはJIS規格の日本語訳のところ。
下記に一部抜粋しますが
- 表現を通じて伝達されている情報
- 装飾が施されている情報
- プログラムが解釈可能なリンクの文脈をリンクのテキストと合わせたもの
- リンクが含まれている文、リスト、パラグラフ、データテーブル、直前にある見出し
- 無視できるように実装
- alt属性を空にする
- CSSを用いた背景画像で表示
- 状況の変化
- 新しいウインドウ、ウェブサイトを開く、フォーカスを異なる要素へ移動させる、レイアウトが大きく変わること
- 同期したメディア
- 動画（ちょっと乱暴かもしれないそうです）
- 意味及び、操作性を保持した順序でフォーカスを受け取らなければならない
- つかいやすく順番に
だいぶ分かりやすくなったのではないかと。上記のような訳（言い換え）は、誤解を産んでしまうリスクがあるかもしれまないけれど、まずは理解の入り口としては良いなあと思います。
規格を理解する上での難しさってのはこういう独特の言い回しだったりすると思う（少なくとも自分にとってはそうだった）ので、このあたりを解説することでちゃんと読めるようになると思いますし、改めてちゃんと規格に目を通そうと意欲も湧きました。
セッション2 「ひとりひとりが取り組むWebアクセシビリティ」
- ゲストスピーカー
- 守谷 絵美さん（ChatWork株式会社）
続いて、ChatWorkのデザイナーである守谷さんのお話。基本的な内容については色とデザイナーとアクセシビリティの記事で書かれていることでしたが、それに加えてコントラスト比の計算を手計算でちゃんとやってみた、という話には会場からどよめきが起こっていました。ちゃんと自分で手を動かして確かめるってのは理解が深まるし大事ですね。
また話の中で驚いたのは、注意文とかでやりがちな赤文字（style="color: red;"）。これだと背景が白（#fff）の場合はコントラスト比が最低限のコントラストで定められている4.5:1を下回ってしまうということ。
改めてちゃんと計算や確認することが大事だよなーと思って、自分のブログも確かめてみたところ、リンクの文字色が#00aa88で背景が#fcfcfcのコントラスト比は、なんと2.88...ということで急遽、ブログの色全体を見なおしてみました。早速効果が出て嬉しい限りです。
セッション3 トークセッション：「アクセシビリティーLINEトークセッション」
- 登壇
- 守谷 絵美さん
- 中根 雅文さん(デモ)
- 植木 真さん
- 山本和泉さん
最後のセッションはスクリーンリーダーでChatworkを使ってみようというLIVEユーザーテスト。自分はVoiceOverでの読み上げは聞いたことがあったけど、実際にスクリーンリーダーを使用してのWeb体験は、体験したこともおろか見たこともなかったので、こちらもとても楽しみにしていました。
セッションでは実際に中根さんが普段使用されている、Windows 8.1 + JAWS + Firefox を使用。まず驚いたのは、読み上げスピードが普段の設定だとものすごく速くて、音の速読とでもいいますか、自分では聞き取れないほど。セッションでは、聞き取れるぐらいにスピードを落として実演されていました。
テストの流れとしては、下記の通り。
- Google検索からChatworkのウェブサイトに行き新規ユーザー登録
- 前のセッションで登壇された守谷さんをコンタクトに追加
- メッセージのやり取りを行う
言ってしまえばたったこれだけですし、中根さんは普段Chatworkを使われているそうなのですが、それでも改めてやってみると中々大変でした。
登録フォームではinputとlabelが関連付けられておらず、何を入力すべきかをplaceholderの値から推測しなければならなかったりとつまづきポイントが多くあってスムーズに登録できず。
やっと登録し、初めてアプリケーションの画面を開くと、ようこそChatworkへ！みたいなモーダルダイアログが。しかし中根さんは、まったく気づかずにどんどん他の操作を進めていくのです。
これはモーダルダイアログの要素がDOMの最後に記載されいているので、スクリーンリーダーでは最初に読まれないことが原因でした。要素の順序ってのも大事なんだと気付かされました。
似ている点として、最初にUIパーツの説明で出て来るツールチップのようなガイド。これもどのUIパーツの説明であるか、という関連性が視覚的な情報（レイアウト）に依存しているので、何か説明文が出て来ても何を説明しているかが分からない、という結果に。
色に依存しないっていうのはよく聞きますが、結局視覚的に依存しないと言う意味ではレイアウトや文字のサイズに意味を依存させないということが大事なんだろうなと。たとえば
<span style="font-size: larger">強調したいテキスト</span>
とするより、ちゃんと
<strong style="font-size: larger">強調文</strong>
とするとか。ちゃんとマークアップすることが大事。
他に気づいた点、仰ってたことなどメモ
- "|"は縦線と読み上げられる。すごく小さなことだけど装飾的なテキストまで読み上げられることのってどうなんだろう
-
input type="email" の validation結果も読み上げる!! - スクリーンリーダーで使いやすいサイトが必ずしもアクセシブルとは限らないということ
全体の感想、まとめ
セミナーに参加した目的（JIS規格日本語訳）は達成できたし、ブログのアクセシビリティも改めてチェックして改善できたし、とても得るものは大きかったです。
今後はWAI-ARIAとかMicrodataとかマークアップ関連の勉強会とかセミナーにも出てみたいですね。あとヒューマンリーダブルなアクセシビリティ、例えば色のコントラスト比を気にする感度がまだ低いのでそのあたりも頑張っていかなアカンなと思う次第。