note、iOSアプリのアクセシビリティ強化 画面読み上げ機能や文字の大きさ変更を一部可能に

  • このエントリーをはてなブックマークに追加
2021/06/15 05:00

 メディアプラットフォームnoteは、iOSアプリのアクセシビリティ向上のため、画面読み上げ機能「VoiceOver」(iOSに内蔵された画面読み上げ機能)で操作ができる箇所を増やした。また、「Dynamic Type」(システム全体のフォントサイズを調整できる機能)に対応し、アプリ内の文字の大きさが端末の設定に合わせて一部変更されるようになった。文字が見えづらい人等に対し、画面の内容がより伝わりやすくなるようにとの意図(ver 5.8.0以降)。

 同機能追加は5月25日(火)に発表した「ウェブブラウザでの閲覧時の、スクリーンリーダーによる読み上げ」に続く、noteのアクセシビリティ向上のための取り組みのひとつ。ほかにも、今回とは異なる方向でアクセシビリティを必要とするケースにおいても、取り組みを実施していく。

 iOSアプリのアクセシビリティ向上のための取り組み詳細は、次のとおり。

記事内画像に代替テキストを設定可能に

 記事の投稿画面で、挿入した画像に代替テキストを設定できるように。

 VoiceOverは、テキストやボタンや入力フォームといった要素は読み上げができるものの、画像の中身を理解して読み上げることはできない。しかし、画像の代わりとなるテキストがあれば、それを読み上げることで「この画像が何なのか、何を意図して置いているのか」が、視覚障害のある人にもわかりやすくなる。

altを入力出来る場所を説明した図
altを入力出来る場所を説明した図

見出し画像の挿入・削除がVoiceOverで読み上げられるように

 これまでは見出し画像部分にフォーカスが当たっていなかったため、見出し画像の挿入・削除ができなかった。同取り組みで、VoiceOverをオンにした状態でもフォーカスが当たるようになり、見出し画像の挿入や削除ができるようになった。

ハッシュタグ削除がVoiceOverで読み上げられるように

 これまではVoiceOverを利用したとき、各ハッシュタグの項目にフォーカスが当たらず、ハッシュタグを削除できなかった。今回の取り組みから、記事の公開設定画面で、VoiceOverをオンにした状態でハッシュタグの削除ができるようになった。

ハッシュタグ削除へフォーカスが当たることを示した図
ハッシュタグ削除へフォーカスが当たることを示した図

アカウント設定画面、通知設定画面をVoiceOverでON/OFF操作がしやすく

 これまでもVoiceOverで操作はできていたが、ON/OFFの切替ボタンもすべて読み上げてしまい、今の状況がONなのかOFFなのかわかりづらい状況となっていた。今回の取り組みで、読み上げが「フォローされた時 オン」のようにシンプルになり、理解しやすくなった。

記事作成時、バッジ選択時などフローティングメニューをVoiceOverで閉じられるように

 アプリ下に固定表示されている「つくる」ボタンや、バッジ一覧画面でバッジを選択したときに表示されるメニュー画面で、VoiceOverをオンにした状態でも元の画面に戻れるように修正した。

フローティングメニューとは何かを示した図
フローティングメニューとは何かを示した図

アプリ内の文字を読みやすく変更可能に

 Dynamic Typeに対応し、アプリ内の文字の大きさが端末の設定にあわせて一部変更されるようになった。今後も対応箇所を広げていく。

  • 「ホーム」画面
  • 「みつける」画面
  • 「アカウント」画面

公開設定画面でハッシュタグをスペースで確定できるように(ver 5.9.0以降)

 記事の公開設定画面でのハッシュタグ入力時、これまでは「完了」ボタンをタップしないとハッシュタグとして確定できなかった。ver 5.9.0以降、ウェブブラウザ版にそろえて、「空白」ボタンをタップすればハッシュタグを入力できるように変更した。

 これまでウェブブラウザ版、iOSアプリとカイゼンを発表したが、今後はAndroidアプリについても、Androidの音声読み上げ機能「TalkBack」操作のカイゼンを行う予定とのこと。