CSS Nite LP62「Webアクセシビリティの学校」特別授業 フォローアップ（3）辻 勝利さん（コンセント）、植木 真さん（インフォアクシア） | CSS Nite公式サイト

2019年6月1日に大崎ブライトコアホールで開催したCSS Nite LP62「Webアクセシビリティの学校」特別授業のフォローアップとして、辻 勝利さん（コンセント）、植木 真さん（インフォアクシア）の『辻ちゃん・ウエちゃんのアクセシブル GO GO!!「スクリーンリーダーで『Backlog』を使ってみる」の巻」』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップ

辻 勝利（コンセント）

先日はお忙しい中、Webアクセシビリティの学校特別授業にご参加いただき、本当にありがとうございました。 これを機に、皆様と様々な分野のアクセシビリティを高めていけることを願っております。

僕たちのセッションでは、スクリーン・リーダーを使ってBacklogを操作している様子をご覧いただきましたが、もしかしたらこれをきっかけに、ご自身でもスクリーン・リーダーを触ってみようと感じてくださった方もいらっしゃるかもしれません。

このフォローアップでは、そんな方のお役に立てるよう、スクリーン・リーダーと便利な関連リンクをご紹介したいと思います。 是非アクセスしてみてください。

NVDA

無償でオープンソースのスクリーン・リーダーで、今回デモで使用いたしました。

• NVDA日本語版 ダウンロードと説明
• NVDAチートシート - GitHub
• NVDA日本語版　操作ガイド

VoiceOver

Mac OSやiOSに標準搭載されているスクリーン・リーダーです。

• 視覚のアクセシビリティ - Mac - Apple（日本）
• 視覚のアクセシビリティ - iPhone - Apple（日本）

植木 真（インフォアクシア）

「辻ちゃん・ウエちゃんのアクセシビリティPodcast」をご存知ですか？

実は、2007年9月～2011年5月まで、辻ちゃん・ウエちゃんは、ポッドキャストをやっていたのでした。その迷コンビが復活してのセッション、アンケートを拝見すると、皆さんに楽しんでいただけたようで嬉しく思っています。

「アクセシビリティ」というと、必ず話題に上がるのがスクリーンリーダー。そして、最も難易度が高いのも、スクリーンリーダーのアクセシビリティ確保ではないかと思います。

でも、必要以上に身構えることはありません。今回「Backlog」を事例として紹介した基本の「キ」を実践してみるだけで、辻ちゃんにとってもより快適に利用できるコンテンツに「高める」ことができます。

スクリーンリーダーの読み上げを初めて聞いたという方もいらっしゃいましたが、辻ちゃんが紹介しているリンクなどを参考に、まずは体験してみてください。Windowsユーザーの方には、「NVDA日本語版　操作ガイド」に沿って試してみることをオススメします。

質問と回答Q1.ページ遷移するものが、aではなくbuttonだったり、ハンバーガーメニューのような開閉イベントを処理するものがbuttonではなくaだったり、この辺のHTML要素の使い方はあまり気にしなくて大丈夫なのでしょうか？

情報を設計するときにアプリ内でこういうパーツはボタンで、こんなパーツはリンクで、みたいにきちんと一貫性を持たせてもらえれば良いのではないかと思います。スクリーンリーダーの「NVDA」の場合、ボタンはB、リンクはKで拾い読みすることができるのですが、例えば、全てボタンだけで作られていたとしたら、もしかしたらユーザーとしては押したいボタンを探すのが少し大変かもしれません。とはいえ、サイト内やアプリ内で操作に一貫性があることがもっともありがたいこと、のような気がします。

Q2. aとbuttonの違い、使い分けがだんだん分からなくなってきました...。どのように分けるべきですか？

ページ遷移するものはリンク（a要素）、何かの機能を実行するものはボタン（button要素）にしたほうがよいと考えます。例えば、ユーザーがブラウザの新しいタブやウィンドウで開けるなら、それはリンク（a要素）だと考えればよいという考え方もあるようです。

• 参考：Links vs. Buttons in Modern Web Applications
  • 英語が苦手な方は、Google Chromeなどで日本語訳してご一読されることをオススメします。　

Q3. フォームで氏名を入力する場面で、「氏名：姓［ ］名［　　］」のような場合、labelは姓と名だけにつければいいでしょうか？

「姓」と「名」をlabel要素でマークアップするのに加えて、全体をfieldset要素で囲んで、「氏名」をlegend要素でマークアップすることで、全体をグループ化できます。

• 参考：H71: fieldset 要素及び legend 要素を使用して、フォームコントロールのグループに関する説明を提供する｜WCAG 2.0 達成方法集

Q4. 色を反転していた理由は、見づらいからだったのでしょうか？

スライドの色を反転していた理由は、その通りです。白の背景に黒文字よりも、黒などの濃い背景に白文字のほうが、見えやすく目に負担をかけないといわれています。海外のアクセシビリティのカンファレンスでは、スライドの背景を黒にすることが推奨されていることもあります。

また、ロービジョンなどの視覚障害がある人は、PCの画面を白黒反転していることがあります。伊原さんのセッションでも紹介されていた動画を最初からご覧いただくと参考になるかもしれません。

• 参考：視覚障害者（弱視）のウェブページ利用方法｜総務省動画チャンネル

Q5. 辻さんはセッションの内容を覚えて喋っていたのでしょうか？　点字メモ等があるのか？

点字ディスプレイを演台の上に置いて、点字を指でなぞりながら、スライドの内容にあわせてお話をしていました。ディスプレイはBluetoothで演題下に置いたPCと接続されており、話している間にもTwitterでメンションされた内容も表示されておりました。ちなみに、辻ちゃんが使用しているのは、Focus 40 Blue V 点字ディスプレイという点字ディスプレイです。もちろん、ウエちゃんと入念な打合せとリハーサルを繰り返して、本番に臨みました。

Q6. CSS無効化はどれぐらい使うものなのでしょう？

普段はほとんど使うことはないのですが、想定している操作が行えなくて困ったときなど、ふと思い出してCSSを無効化して試すことがあります。ただ、画面上から隠してあるものまで（エラーメッセージとか）読み上げてしまうので使いづらいことも多いのですが…。