ユーザー側でできる一工夫とは？ ラベル要素で解決！

こんにちは！
この記事を開いていただきありがとうございます。
今回の記事では、スクリーンリーダーを使ってスマートフォンを操作している際に、ボタンや画像だとは分かるけど、何を示すものか分からない時の解決方法を書いていこうと思います。

使用環境

• iPhone

アクセシビリティの問題

これはボタンに関わらず、画像などでも同じことが言えますが、スクリーンリーダーを使っていると、「ボタン」と読み上げるところでは、ボタンがあることは分かりますが、それが何を示すボタンなのかまでは分からないことがあります。
「ログイン」や「新規登録」といった他の内容でこんなボタンありそうだなと思い、ボタンの数や文章の内容から推測することはできますが、それもなかなか難しいです。
こんなとき、ユーザー側でラベル要素を設定して、何のボタンか分かるようにする方法があります。

ユーザー側のラベル要素の設定方法

もし、日常的に使うアプリやサイトで何を示すものかを分かるようにしたいときは以下の方法で解決できます。

1. ラベル要素をつけたいところにフォーカスを当てる
2. 選択された状態で2本指でダブルタップしてすぐに手を離さず、押したままにする
3. ウィンドウが出てきて「要素にラベルを設定」という文の下に入力欄が出てくる
4. 入力欄に「ログイン」「メニュー」「通知」など、何を示すものなのか、自分が分かるように記入する
5. 「保存」を押して、再度同じところにフォーカスを当てると、入力した内容が読み上げられるようになる
6. 設定完了

注意点

上記の方法で基本的には設定できるのですが、注意点があります。

• 使っているものによって操作方法が異なることがある。
  • アクセシビリティの設定で、ズーム機能を併用して使っている人とそうでない人では操作方法が異なることがあります。
• 押す時の操作方法は変わらない
  • ボタンにラベルを設定した際、通常であればダブルタップでページ遷移をしますが、ラベルが設定されていないもしくはアクセシビリティが確保されていない場合は、1本指でトリプルタップ（通常の長押し操作）をしないとページ遷移しないことがあります。これは、ユーザー側でラベルを設定したとしても、操作自体は変更されないので注意してください。

最後に

今回は、ユーザー側で要素にラベルをつける方法について紹介してきました。
ユーザー側の一工夫で使いにくいと感じるアプリも少しは使いやすくすることができるようになっています。
知らなかった方はぜひ試してみてください。
ここまで読んでいただきありがとうございました。