2019年6月15日に開催した「クロコラボ #23 スクリーンリーダーを使ってみよう」のレポートです。
スクリーンリーダーとは
スクリーンリーダー（英語:screen reader）とは、コンピュータの画面読み上げソフトウェアである。視覚障害者がパーソナルコンピュータを操作するために、視覚的に使うことが必要であるマウスに変わり、情報を音声で読み上げることによって、操作を補助するアクセシビリティである。
スクリーンリーダー – Wikipedia
スクリーンリーダは、Wikipediaで書かれているとおり画面の内容を音声で読み上げてくれるソフトですね。今回は、MacやiPhoneに標準搭載されているVoiceOverというソフトを使って、パソコンでウェブサイトがどのように読み上げられるかを試してみました。
岡山の勉強会、リーダブルな夜の「 スクリーンリーダーをいろいろ触ってみよう」（2019年1月15日に開催）のスライドも参考にさせていただきました。このスライドでは、VoiceOver以外のスクリーンリーダーについてや、実際のキー操作、実践できるサンプルも用意されていたので、まずはこちらから試してみると良さそうです。
余談ですが、このリーダブルな夜という勉強会にはテーマソングがあって、楽しくなるような音楽とアニメーションがかわいくて好きです。
リーダブルな夜のテーマ – (Theme from) The Readable Night –
キー操作に慣れない
このkurokorollのサイトをVoiceOverで読み上げてみようと思い、「command + F5」でVoiceOverを起動しました。VoiceOverの場合は、「VoiceOverキー」略して「VOキー」というものをベースに操作を行うことが多いようです。VOキーは「control + option / caps lock 」を同時に押します。例えば、見出し間の移動だったら「VOキー + command + H 」、連続読み上げなら「VOキー + A / control」というような操作です。普段よく使うショートカットだと、command + C や command + V くらいの2つのキーが多いので、3つや4つもキーを押すのに、つい目で確認して操作してしまいました。これは慣れだと思うので、使って体に染み込ませていくしかないかな…。まずはキーが覚えれないので、デスクトップによく使うもののメモを置いておくことにしました。
読み上げ方の一例
サイトの中ででてきた読み上げ方の例を一部ピックアップしてみます。
| HTML | VoiceOver |
| <h2>見出し2</h2> | （最初の / 最後の）見出しレベル2 |
| <a href=”./news/”>お知らせ</a> | （閲覧済み）リンク、お知らせ |
| <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> | リスト3項目 ※リストのはじめの場合 |
| <ul> <li><a href=”./news/”>お知らせ</a></li> <li><a href=”./works/”>制作実績</a></li> </ul> | （閲覧済み）リンク、お知らせ、1/2 ※「お知らせ」の部分の場合 |
| <img src=”./images/logo.png” alt=”ロゴマーク”> | ロゴマーク、イメージ |
| <a href=”http://kurokoroll.com”> <img src=”./images/logo.png” alt=”ロゴマーク”> </a> | （閲覧済み）リンク、イメージ、ロゴマーク |
見出しの最初や最後の場合は、そのまま「最初の」「最後の」をつけて読まれたり、リストの最後の項目のあとは「リストの終わり」と読まれました。
画像はalt属性がないとファイル名を読み上げられてしまいます。どんな画像かわからなくなったり、読まれなくてもいいものまで読まれてしまうので、alt属性はとても大事になりますね。ただ、何をどこまでどのように書くのか結構迷うので、どういう記述がいいかはまたの機会に。
気になったりわからなかったところ
このサイト以外に、いくつかのサイトを読み上げてみて、気になったところやわからなかったところをリストアップしました。
- ヘッダーがバナーって読まれるのは普通なのか？
- ブログの日付に<time>を使用しているものがあり<time>が「グループ編集可能」と読まれた（<div>になおした）
- 中黒（・）って何て読まれてるの？聞き取れず…
- アイコンと文字がセットのリンクの場合、アイコンのalt属性と文字が同じならアイコンのaltは読まれない？
- スライドショーのドットはどう表現するのがいいのか？
（リンク1、リンク2…ってなる） - モーダルで表示された画像に移動できない
- アコーディオンの開閉ができないものがあった
- たまに小さい声になって聞き取れない？
操作慣れしてないところもあるので、それはできるよ！ってのもあるかもしれませんが、スライドショーやモーダル、アコーディオンといったJavaScriptが絡むところは、きちんと実装しないと完全にそこにある情報が得られないとなるので問題ですね…
キューロコロール!?
このkurokorollのサイトを読み上げて、一番はじめに気になったのは「kurokoroll」が「キューロコロール」と読まれてしまうところでした。
キューって！！
「kuroko」がローマ字読みなので仕方がないのかもしれないけど、屋号なので正しく伝えたいところ。調べていると、WAI-ARIAの「aria-label」というものを使ってラベルをつけてあげれそうだと思いました。
ツイートのスレッドで澤田さんが教えてくださってるように、本文中では意味がないけど、リンクの場合はラベルとしては使っても良さそうだとのこと。
ARIA8_ リンクの目的を示すために aria-label を使用する _ WCAG 2.0 達成方法集
このように、WAI-ARIAはHTMLタグだけでは意味付けしきれないところを追加したり補ったりしてくれます。WAI-ARIAについては、またまた澤田さんのスライドですが、「WAI-ARIAの考え方と使い方を整理しよう」を見るとわかりやすいと思います。
ただこれを使っても、今回のケースはサイトのタイトル<title>や本文には正しい読み方をつけれないので、課題がのこりました。
まとめ
このような小さな勉強会をはじめて約2年になりました。今回残念ながらこの2年で初めて参加者がおらず、一人でもくもくしていましたが寂しかったですね…（笑）ちょっと内容が唐突だったかもしれませんが、適切なコードで少しでも使いやすい伝わりやすいものを作りたいと思ったとき、スクリーンリーダを使ってみるといいかなと思ったことから開催したものでした。また興味のあるテーマがあれば、参加いただけると嬉しいです！
そして、澤田さん、手を差し伸べてくれてありがとうございました！
澤田さんが主催されている岡山の勉強会「リーダブルな夜」は、次回7月8日（月）だそうです。