Webアクセシビリティ道場 in 福岡(2019/2/2）に参加したしました。
せっかく参加ということで、メモと残す意味でブログを書いております。

スクリーンリーダーユーザーによるユーザーテストのシーンより

よく利用するWebサイトとして、

• Google
• Amazon

購入に使うサイトとしては、

• Amazon
• 楽天
• 生協

一番頻度が高いのは、Amazon。
1クリックで購入できるところがいいとのこと。

購入時は、レビューも確認して、3.4~4のレビューをみて購入するそうです。

Google検索で上位のものを選んだりすることはないそうで、
Googleからアマゾンで売っているものを検索はするとのこと。

PCとスマホどちらをよく使うかというところでは、
PCよりスマホの利用頻度が上がっているとのこと。
特にiOSには、スクリーンリーダーが標準に装備されており、とても優秀。

 

スクリーンリーダーなどのツールのお話

PC-Talker

高知県の会社が作っているスクリーンリーダーで日本でトップのシェアを誇っているとのこと。
そのほかにも音声でガイドする専用ソフトウェアをたくさん作られているそうです。

JAWS

世界的なシェアを誇っているスクリーンリーダーは、JAWS。

NVDA

無料で使えるスクリーンリーダーとして、NVDA。

 

某サイトを使い、目的の情報へどうたどり着くのかの検証

実際に某サイトを使い、目的の情報をどのように辿っていくのかを見せて頂きました。

スクリーンリーダーで、

• 見出しから探していく
• 検索機能からワードを入れて調べていく

という手順をとっていました。
印象として、階層が深ければ、深いほど、目的の情報にたどり着けなくて、大変そうでした。

 

探していて、情報として困るのは

• PDFで掲載されているもの
• altがついていない画像

とのことでした。
PDFもソフトを使えば、情報を得ることができますが、
ソフトを立ち上げて、読み込ませるなどすごく手間がかかる印象でした。
使われていたソフトは、MyRead 7。

 あと、altに見出しと同じものが入っていると、同じものが2回読み込まれ、うっとうしいように感じました。

 

漢字について

読み方が同じ漢字で、どうやって正しい感じを選んでいるかのというところで
My editというツールが使われていて、音声案内で『わりばしのはし』など、どのような漢字なのかわかるようになっている。

 

地図について

地図については、わからないのでほぼほぼ使わないとのこと。
ちなみにタクシーに乗るときは、スマホのナビをつけて乗るそうです。

 

欲しい情報にたどり着けないときはありますか？

たどり着けないことは、ほとんどないとのこと。粘りますからね〜と。
どうしてもというときは、お問い合わせ先に電話をします。

ただ、電話をかけられたくなくないのか、お問い合わせ先を調べるのが一番難しいところだそうです。

 

Webサイトから電話をかける場合

PCからの場合、電話番号をスマートフォンに送り、メーラーで開く手順のようで、
スマートフォンだと1クリックでいけるので、電話がしやすい。

 

そのほか余談

PCよりスマホ、特にiOSの方が高性能で、PCからスマホを使う人が増えている。
どんな端末でも、AIスピーカーでも使えるものにしてほしい。

AIスピーカーは、障害者にはとても便利なものだそうです。

 

スマホで使うブラウザーなど

iOSを使っているときは、safari。とても優秀とのこと。
Siriなどもよく使うそうです。『近くにある居酒屋は？』など。

 

ボタンタグにラベルがないと

ボタンタグにラベルがないと「確認」とだけ呼ばれてしまう。
aria-labelを入れる設定すると、ボタンのラベルが読まれる。

 

aタグで囲っているものについて

画像と同じaltが入っていると、同じものが2度呼ばれるので、空にする。
リンクで調べているとき、リンク文字は最後まで聞かないことが多い。
リンクテキストの最初の文字が大切。

 

某社のアプリを使っているのをみて

再読み込みしないといけないケースが多々あり、再読み込みしないといけないというのは、アプリとしてよくないとのこと。

テーブルタグについて

重要な情報がテーブルタグで書かれていることが多いので、
テーブルタグを探すことが多い。
ただ、複雑なテーブルは探しにくい。
テーブルが、便利がいいものでは決してない。
リストや文字の方がありがたい。

dl,dt,ddの方がわかりやすく、構造的に調べやすい。

 

WAI-ARIA　roleについて

スクリーンリーダーで、ランドマークで移動して調べることがあるようで、
日本のサイトでは、とても有効とのこと。

formやasideにもつけるといいようです。

 

role="button"

はよくないそうで、

＜button＞

ボタンタグを使いましょうとのこと。

UIをマシンリーダブルに

htmlにtabというタグがありませんので、タブがあるようなものは


ul role="tablist"
li role="tab"
div role="tablanel"


と記載するといいとのこと。

また開ける、閉じるのようなの区別するものとして、

aria-expanded="true"
aria-expanded="flase"

で対応すると、いいようです。（動的に）

 

aria-current属性

• ナビゲーションの現在を読み上げる。
• パンくずの最後と位置などにも使われる。
• 今日の日付

属性では、trueをよく使われているそうですが、
step、location、dateなどいろんな設定ができる。

 

日本語の翻訳が便利

英語のサイトを読む場合は、Googleの翻訳が便利で、英語サイトも読めるそうです。

altについて

altに入っているものは、全てを読み上げてしまう。
大きな枠柄から、小さい枠へ移行するように伝えるとわかりやすい。
altの記載は、電話ごしの相手に伝えるイメージで。

スマホのスクリーンリーダー

• 右フリックで移動
• 開くには、ダブルたっぷ
• 2本指でくるって回すと、いろんな選択ができ、調べる時の選択肢が増える。

 

以上、個人的な振り返りで読む用の記事になってしまいましたが、記事として残しておきます。
早速案件で取り入れてみたり、知りたい情報がたくさんの素晴らしいWebアクセシビリティ道場でした。

普段からrole属性をつけるようにしていましたが、つけるおくといいポイントもわかってとてもよかったです。

 

ゆうてんさん登壇のセクション

株式会社デーゼロのゆうてんさんが、『ユニバーサルなマークアップをしよう』というテーマで登壇　。
ユニバーサルなマークアップをしようの登壇スライドはこちら。

飲みの場でゆうてんさんからアクセシビリティ のことを考えるきっかけになったお話を聞かせてもらいました。
なかなか興味深いお話だったので、とても印象に残っています。

 

Tシャツゲットいたしました

やった、Tシャツゲットいたしました。
Sサイズなので、痩せないと着れませんが（笑、着るため体絞りますよ〜。

 

同じく、Tシャツをゲットして早速着ている、はなださん。大喜び！！

 

以上、Webアクセシビリティ道場 in 福岡に参加したメモ日記でした。
Webデザイナー、コーダー、ディレクターなど、Webに関わる人には目から鱗の情報がいっぱいですので、
また福岡で開催の際は、参加をオススメいたします。