「Webアクセシビリティ道場」に参加してきました!

こんにちは。01waveの冨永です。
先日、「Webアクセシビリティの学校」に参加してきました。
詳細につきましては、下記のブログに書いています。

その翌日(2019年2月2日)に行われた「Webアクセシビリティ道場」にも参加してきました!

講師は株式会社インフォアクシアの植木真(うえき・まこと)さん。
テーマが「道場」なので道着姿で登場!
見た目も挨拶もユーモアに溢れている方です。

正面に礼、互いに礼、師範代に礼

“LIVE” ユーザーテスト!実際に見るべし!

実際に視覚障害のある方がどんな風にウェブサイトを閲覧されているのかを見る「”LIVE”ユーザーテスト」が行われました。
今回、ユーザーテストにご協力いただいた方は、50の全盲の方で実際にマークアップされているほどウェブにお詳しい方でした。
ユーザー目線の意見をたくさん聞くことができましたので、その時の内容をまとめています。

スクリーンリーダーには種類がある!

視覚障害のある方は「スクリーンリーダー」という音声読み上げソフトを使ってウェブを閲覧されます。
スクリーンリーダにも種類があるとのことで、下記をご紹介していただきました。

 スクリーンリーダーの種類 

まずは見出しを探す!

初めて訪れたページでは、可能であれば見出しを探されるそうです。
確かに言われてみれば、初めてのページはどこに何の情報があるかわかりませんよね。
どんなページなのかを端的に伝えるためにも、見出しの書き方が重要になってきます!

PDFファイルの読み上げ

PDFファイルは、スクリーンリーダーが読み上げてくれないことがあります。
なぜかというと、画像がそのまま貼られているなど文字データではないことがあるからです。
そのような場合は、「MyRead7」を利用して、文字データへ変換して読み上げを行なってあります。
MyRead7とは
PDFをOCR(コンピュータが利用できるデジタル文字コードに変換する技術)で変換し、活字読み上げをしてくれるシステムのこと。
便利なシステムですね。
しかし、文字データで作成されていれば、このような煩わしい作業はいりません。
視覚障害のある方が少しでも利用しやすいようにPDFは文字データで作成しましょう!
また、文字データで作成していると、文字をコピペで使うことができ二次利用にも大変便利です。
みんなが使いやすいようにするためにも文字は文字で作成しましょう!!

漢字の読み上げ

漢字の読み上げも実際見せてもらいました。
「はし」という漢字の読み上げ方の違いは下記のようになります。

  • 「橋(はしのきょう)」
  • 「端(せんたんのたん)」
  • 「箸(わりばしのはし)」

おぉ!音として聞くと、なんか新鮮!!
目で見てこの字と判断している私にとっては、音で入る漢字の情報は不思議な感覚でした。

全角/半角、ひらがな/カタカナ読みの区別

全角/半角、ひらがな/カタカナの違いは、読み上げの音声で聞き分けてあるそうです。

PCTalkerの場合、下記のように男性と女性の音声で読み上げられます。
メイン音声:男性(読み秀くん)
サブ音声 :女性(読み子ちゃん)

情報の入れすぎに注意!

画像の「alt属性」はアクセシビリティの観点から必ず入れましょう!となっています。
しかし、下記のように1つのリンクに「alt属性」と「テキスト情報」を入れてしまうと、重複して読み上げてしまうため、その場合は「alt属性」を「alt=””」のように空にした方がいいそうです。

図:alt属性の使い分け

読むのも聞くのも移動するのも速い

音声のみでページの内容を聞き分けてあるため、判断がとても速いです!!
音声の読み上げの最初の部分を聞き、そこで必要な情報か不必要な情報か判断されています。
よくある質問(〇〇)などは、()内を読み上げる前に次の項目へ行ってしまってありました。
そのため、リンクテキストは最初の段階でわかりやすいようにしておくことが大切のようです。

ウェブサイトを探す時はキーワード検索

ウェブサイトのトップページから目的のページを探すというよりは、最初のブラウザ検索の段階で「01wave 求人 ウェブデザイナー」のようにキーワードを入力して検索されているそうです。
この検索方法で比較的見つかることが多いとのこと。
もし見つからない場合は、お問い合わせ先へ電話することもあるそうです。
しかし、お問い合わせの電話番号を探すのが一番難しいと話してありました。

地図の利用はできない

残念ながら、基本的に地図を使うことはできないそうです。
しかし、目的地までの距離数などは音声案内があるため、利用しているとのことでした。

ユーザーテストは同じ属性の5人で行うべし!

ユーザーテストを行う場合は、同じ属性のユーザー5人にチェックしてもらうといいそうです。
同じ属性とは、下記のように同じ障害であるということを指します。

全盲5名
× 全盲1名、弱視1名、色弱1名、聴覚障害1名、上肢不自由1名の計5名


なぜ5人かというと、同じ全盲の方でもAさんは「良くない」と言っても他の4人が「良い」ということもあるためです。
5人にチェックしてもらうことで問題点の8割を見つけることができるそうです。

また、下記の3つに注意して観察を行いましょう。
  • 話しかけない
  • 誘導しない
  • 教えない

もし声をかけるとしても、「今何をしようとしていますか?」「どこで迷っていますか?」などでとどめておきましょう。

ユーザーテストで、ユーザーの意見を聞くのは大切ですが、鵜呑みにするのは危険です!!
正確なのは「真実」のため、録画してリアルな「表情、独り言、時間など」を観察することをオススメしてありました。

まとめ

実際のユーザーテストを初めて見ることができ、生の声が聞けてよかったです。
視覚障害のある方はこのようにサイトを閲覧されていたのかと、新たな視点に気づくことができました。

わかりやすい見出しをつけるやPDFを文字データで載せる、読ませたい情報はテキストの最初に持ってくるなど、視覚障害のある方にわかりやすいサイトは、すべての人にわかりやすいサイトであることにつながるなと思いました。
今後は、情報を整理するデザイン目線も意識していきたいです!

写真:(左)Webアクセシビリティの学校 修了者之証ステッカー(右)Webアクセシビリティ道場 受講済之証ステッカー

最後には「Webアクセシビリティ道場」の受講済之証ステッカー(写真右)をいただきました。
ありがとうございました!!!!!

今回、ユーザーテストについて絞って書きましたが、「Webアクセシビリティ道場」では、アクセシビリティ基本の「ホ」や、alt属性について考えるワークショップなど、とても楽しい内容が盛りだくさんでした。
現在の私の知識では、少し難しい内容もありましたので、次回は
「WAI-ARIA」の知識をつけて参加したいと思います。