VoiceOverを学ぶ第一歩

森のくま🌻
10 min readDec 13, 2019

--

初めまして!!!!

アクセシビリティについて日々「分からない」を「分かった気になるために頑張る」活動をしているアクセシビリティビギナーの森のくまです。(ゆくゆくは完全理解までしたいなぁ…笑)

この記事はアクセシビリティ Advent Calendar 2019カレンダーの13日目の記事になります。

概要

今回はCA11Yという渋谷を中心に行われるアクセシビリティの勉強会グループにて、オンライン上で毎月のように開催されている「スクリーンリーダーもくもく会」の一部の内容を紹介しようと思います!!
もくもくとは、黙々と何かに取り組む様子から生まれたワードです。

第一回目のもくもく会にて

まず皆でスクリーンリーダーの使い方を覚えることに挑戦しました!

使用したスクリーンリーダーはMacに標準搭載されているVoiceOverの操作の勉強をしました。

「スクリーンリーダー使うの難しいんでしょ?」と思う人もいると思いますが、驚くほど丁寧にチュートリアルを体験することができます。慣れると案外難しくないかも知れません!

この先の内容を読み始める前に

記事内では使い方の説明は一切していません。チュートリアルでは触れられない「なんでこんな操作必要なの?」と思われる部分を個人の視点から解説するだけの記事になっています。使い方については実際のチュートリアルで学べるのでわざわざ記事にする必要がないと感じているのでご理解ください。

VoiceOverを学ぶまでの手順

  1. 画面左上のアップルのマークを選択する
  2. システム環境設定…」を開く
  3. 環境設定パネルにある13項目の「アクセシビリティ」を選択
  4. 概要パネルにある「VoiceOver」を選択
  5. VoiceOverトレーニング…」のボタンを選択

紹介した5つ手順で「VoiceOverクイックスタート」が始まります。
※急に音声が流れるので、イヤホンするか周囲の迷惑にならないところで始めましょう。

VoiceOverトレーニングで学べること

VoiceOver修飾キー

MacのVoiceOverの操作は基本的に修飾キーを駆使して操作します。
支給されたMacが「USキーボード配列なんだけど」という人でもちゃんと説明してくれるので大丈夫です。

キーボードヘルプ

「キーボードヘルプって何?」と思った人もいるかも知れません。
私が学んだときも「何のためにあるのコレ?」とすぐ読み飛ばしましたが、チュートリアル上で「何のため?」は解説がされていないので解説しますと「触ったキーの文字を読み上げてくれるので、視覚情報を持っていない人でもMacの製品を有意義に使ってもらう為についている機能」です。aのキーボードの位置がどこにあるか分からない時にポチポチ触って場所がどこにあるのか確認することができます。

Macは高いから小さい頃からいきなり触っている人もいないだろうし、デビューした人はどこに何のキーボードがあるか分からないよね。

VoiceOverのカーソルの位置動かす

実際に修飾キーを使ったカーソルと表示範囲の移動のやり方をサンプルのGUIを元に操作しながら学べます。

VoiceOverのトレーニングで使われるGUI。ラジオボタン2つ、チェックボックス3つ、ボタン2つのUIが表示されている。
実際のトレーニングで使われるUI

声の調節

読み上げの速度、ピッチ、および抑揚を変更することができます。
最初VoiceOverを立ち上げた段階では読み上げが遅いと思う人もいると思います。好みの設定をできるので是非試してみてください。
また日常的にスクリーンリーダーを使う人の速さも気にしてみると良いかも知れません。中には聞き取れないぐらいの速さで読み上げている人もいますが、実際に聞き取れない速度で視覚情報がある人は文章を黙読していることも事実です。それがただ音声に変わっただけの話だったりもするので、慣れてくると速度がガンガンあげても良いと思います。

私はまだ初心者なので、速度60が丁度よく聞き取れます。
ロボットっぽい読み上げが苦手な人は、より人間っぽい話し方をしてくれるSiri(女性、日本)を選択することをオススメします。

修飾キーを用いた操作方法

下記の画像からも分かる通り、ラジオボタンの選択の仕方やチェックボックスのチェックの仕方と言うシンプルで基本的な動作を学ぶことができます。カーソル位置を動かす操作の次に多い操作だと思います。比較的利用頻度が高いので、スクリーンリーダー利用者が何回のアクションで、それらの目的に到達できるのか意識できてくる項目だとも思います。

VoiceOverのトレーニングで使われるGUI。チェックボックス4つ、チェックボックス2つのUIが表示されている。
実際のトレーニングで使われるUI

テキストフィールドについて

ここではただ入力フォームに入力するだけのことを教えてくれるわけではなく、入力フォームが何の入力フォームなのかを知ってから入力するのが普段VoiceOverを使う人の操作でもあるので、入力フォームが何の入力フォームなのかを知る術を教えてくれます。そのあとでテキストフィールドを入力することを丁寧な順序で教えてくれるので、ある意味でVoiceOver利用者の普段使いを擬似体験することができます。

マークアップによっては(※1)、inputタグにtitleが入っているとラベルごと読み上げれくれるフォームも存在します。ですが、そこまで気を利かせているサイトも少ない為ラベルの読み上げの操作が重要になってきます。ちゃんとここら辺の操作できていないと、アンケートに適切に回答することもできなければECサイトでショッピングすることも難しくなってきます。操作して初めて分かる不便さは皆に伝わって欲しいです。

VoiceOverのトレーニングで使われるGUI。ラベルのついた入力フィールドが表示されている。
実際のトレーニングで使われるUI

※1 達成基準1.3.1の内容を元にマークアップのやり方の見本を紹介してます。https://weba11y.jp/know-how/guidelines/identify-form-control-without-visible-label/

要素の操作

インターフェースによってはツールバーやナビゲーションなど、一つのまとまりにいくつもの目的が連なっているケースがよくあります。その際の細かい操作方法について学ぶことができます。操作方法は細かいですが、その細かさを知ったり、その面倒を知るのにも丁度良いです。知るだけで、サイトのナビゲーションの操作で以下にしてエラーが起きるのか把握することにも役に立つ気がします。

実際のトレーニングで使われるツールバーのUI。ツールバーには、メール受信、新規メッセージ、新規メモ、新規To DO、カラーの選択の5つの項目が表示されている

表の中を移動

表のセルを意図した順序で読み上げる方法について紹介されています。
この操作は、例えば画面を見ずにイベントの料金表の欲しい情報をスムーズに知れます。とても画期的な操作なので是非覚えて欲しいです。またテーブルセルの情報をどのようにしてVoiceOverで情報を取りに行っているのかが体験できるので面白いはずです!操作も細かく指示ができてセルごとに読んだり、行や列ごとにも読ませることができます。覚えたら得意げに自慢しましょう!笑

実際のトレーニングで使われる表のUI。表には13項目ありボイスオーバーを操作している画面のスクリーンショット
画像のようにちゃんと読み上げくれてます。

日付と時刻を選択

たまに生年月日や時刻のフィールドが一つになっているケースがあります。個人的にはネイティブアプリケーションではドラムロールなどで見かけますが、通常のWebサイトだとすっかり見かけなくなったインターフェースです。笑

一つのフィールドでどんな操作をするのかイメージつかない人は試してみると面白いと思います。生年月日のフィールドはyyyy/mm/ddと3つに区分されるので、表の操作ほどではないですが少しトリッキーな操作かな?と思います。

実際のトレーニングで使われる生年月日や時刻のフィールドが一つになっているのUI
(あんまり見ないUIこそ、遭遇したら困る!!)

ステッパーの使い方

ステッパーはご存知ですか?ステッパーも最近はあまり見かけなくなったインターフェースだなーと個人的には思っています。たまに直接の入力が制限されいてるようなお店予約の人数の入力のインターフェースや時刻の入力で1分1秒単位で変更する際に登場しますよね。イレギュラーですが遭遇したら操作に困るのでしっかりと覚えてみると良いかもです!

実際のトレーニングで使われるステッパーのUI。年齢や子供の人数といったサンプルのステッパーを用いた入力フィールドのUI

Dock

Macのパソコンに標準で搭載されている多機能的なUI。Docがパソコンの画面下部に設置されているスクリーンショット
筆者のMac BookのDockのスクショ

Mac愛用者なら知っているインターフェースですね。
FinderやLaunchpadのアイコンやメールSafariなど、利用頻度の高いアプリケーションと思われるものがまとめられていて、Macには標準で搭載されています。インターフェースにすぐにアクセスする方法を学ぶことができます。視覚情報があれば「Dock?それがどうした。」と思われるでしょうけど、スクリーンリーダーを普段から使用している人からすると、とてもありがたい機能で、何かに困ったらすぐ戻れると言うのは心理的安全性があって良いんですよね!!

続きは実際に…

今回は、Macに標準搭載されているVoiceOverのチュートリアルのほとんどを紹介しました。

この先の続きが気になる方は実際にVoiceOverトレーニングをトライして知って欲しいです!!!

アクセシビリティ勉強しているけどスクリーンリーダーを触ったことない人やこれから学びたいけど躊躇している人が「お!ちょっとやってみようかな」と言う気分に少しでもなればと思い書きました。

アクセシビリティの勉強は文面を読むだけじゃないし、マークアップで悩んでネットで調べたり知ってる人に聞いたり本を読んだりするだけで終わらせて欲しくないと思ってます。

実際に私たちが同じ環境に置かれて初めて気づくことが多いからこそ是非スクリーンリーダーを触って欲しいです。

最後に

定期開催されているもくもく会でスクリーンリーダーを皆で触るのも良いと思います。操作に困ったら参加しているメンバーに聞くことも手軽にできるので本当にオススメです!Twitterから勉強会の最新情報も知れます。是非、フォローよろしくお願いします!!!

https://twitter.com/CA11Y_

--

--