AccSell Meetupに行ってVoiceOverの使い方を教えてもらった

はじめに

2019/01/19 (Sat) に AccSell Meetup #14 に行って、iOS のスクリーンリーダーである VoiceOver の使い方について教えてもらってきた。
二ヶ月月以上前のことだけど、思い出しながらログとして残しておこうと思う。

イベントの概要はこちらのページに載っている。
AccSell Meetup 014『おしえて！iOS VoiceOver 2019新春ver.』｜お知らせ｜AccSell

イベントに参加したときの写真を一枚も取らなかったことが悔やまれるけど、どんな感じだったかは AccSell のホームページや PodCast にて語られている。

accsell.net

ミートアップ中は音声から字幕への変換アプリであるUDトークが活躍し、これはいろんなイベントで使ってほしいなと思った。 udtalk.jp

どういうモチベーションで参加したか

普段業務でアクセシビリティについて取り組むときは、img 要素の alt を適切に設定するだったり、適切に見出し要素を使ってページを構造化したり、どちらかというと SEO 方面を意識したコーディングをしていた。

a11y の文脈でコーディングしても、実際に使われているところを見たことがないのが問題だなと思っていて、全盲でありながら a11y の啓蒙活動を行っている中根さんが講師としてお話しされる機会があるとのことで参加した。

イベントレポ

当日は前半後半で2つのセッションが行われた。
以下、当日の雑なメモ。

イントロダクション w/ 植木さん

マシーンリーダブル?

Machine = UserAgent
User Agent Accessibility Guidelines (UAAG) 2.0
HTML を解釈するあらゆるデバイスが Machine と定義できる..?

WAI-ARIA

html5 のマークアップだけでは表現できないものを表現できるように仕様化された
- 表現できないhtmlの例
  - タブを ul li で実装
  - role 属性をつけることでリストではなくタブであることをマシンに伝えることができる
  - aria-expand="true" でリストが開いているか閉じているかを表現できる

ワークショップ w/ 中根さん

VoiceOver

iOS と macOS の　VoiceOver は操作性がまったく違う
- 一歩間違うと帰らぬ人となる..!
全盲の人はスクリーンカーテンをよく使う（ほとんど）
- スマホを覗き見られないようにするため
シングルタップで選択(Activate)
ダブルタップで選択中の要素をクリック
- ダブルタップは選択中の要素の上をダブルタップする必要はない
- activate にしている要素があるなら、画面上のどこをダブルタップしても決定できる
両手を使うと操作性があがる（スプリットタップ）
- 左手である要素をactivateしたまま、そこから指を離さない
- 右手で画面のどこでもいいのでシングルタップする
- これでダブルタップしたことと同じ動作になる
- ためしてみるとたしかに操作性がいい
ダブルタップして長押し
- ドラッグアンドドロップのようなふるまいをする
ヘルプ
- 4本指をダブルタップでヘルプモード
- 2本指のスクラブでヘルプ終了
  - スクラブ: 2本指をスクリーン上でがしゃがしゃする
ボタンにラベルが付いていないものに、自分でラベルをつけることができる
【課題】VoiceOver で天気アプリを探してください
- 3/6ページの official フォルダの2ページ目にあるので難しかった
- VoiceOver に慣れている人でも、どこにあるのかわからないアプリを探すのは大変
- 検索を利用して見つけることもできそう..?
VoiceOver を使うときは画面の向きをロックしておくと楽
【課題】「今日は AccSell Meetup に来ています。」と VoiceOver を使って入力してみましょう。
- 最初、日本語入力ができなくて途方にくれた（日本語ローマ字入力キーボードをoffにしているため）
- このページが参考になった
  - http://shin-matsuda.com/20120708.htm

ロータージェスチャー

これを知らないと VoiceOver を7割くらい損をしている..?
一本指の上下フリック のふるまいをローターで設定する
テキストを読むときの使われ方 -「行」単位で移動して、「単語」単位で探す
コピー＆ペースト(テキストの選択)
- ローターの編集を使う -ピンチアウト・ピンチインで選択範囲を拡縮する
- ローターのテキスト選択を使う
- コピペの操作はめちゃくちゃ大変..
入力モード
- タッチモードを普段使っていらっしゃる

VoiceOver で Web 閲覧

2本指でシングルタップでページ読み上げ・一時停止をトグルする
ローターを活用して読み飛ばしていく
- ARIAランドマーク?

アクセシビリティチェック

伝えるべき情報は 過不足なく 音声化されるか
- 情報過多になっていないか?　という視点も必要
1本指上下フリックの各種操作で適切なナビゲーションができるか
- 見出し、ランドマーク、フォームコントロール、ラベルなどが設定されているか..?
img 要素の longdesc 属性はhtmlの仕様には載っているが、対応してもブラウザが対応できていない
- 仕様を満たしたとしてもアクセシブルではない..

ワークショップのおわりに

昔は視覚障害者の中では携帯といえばらくらくホン一択だった
- 最近は iPhone を選択し VoiceOver を使う人が増えてきた
- VoiceOver 人工は増えてきている
VoiceOver で正しく動作すると、スイッチインターフェース（指が動かないなどの障害を持つ人が使う）でも正しく動作する

気づき

イベントに来て思ったのが、視覚に障害のある方が参加されていたこと
- 全盲、ロービジョン
- ロービジョンというのを今まで意識できていなかった
  - ロービジョン - Wikipedia
- トイレ休憩のときなど、植木さんが付き添って案内されていたのが印象に残ってる
パブリックなプロダクトを開発しているのであれば、常に a11y を考慮して作る必要がある
- Web、ネイティブアプリどちらも必要
- どんなにハイパフォーマンスなサイトを作っても、一部の人が使えないのでは可用性が低い