メむンコンテンツぞスキップ
芋出し画像

VoiceOver、Dynamic Typeなど、iOSアプリのアクセシビリティ機胜の匷化を行いたした

    noteは、アクセシビリティ向䞊のカむれンを進めおいたす。

    前回は、Webブラりザで閲芧した際、スクリヌンリヌダヌによる読み䞊げをカむれンしたこずをお知らせしたした。

    そしお今回は、noteのiOSアプリでのVoiceOver、Dynamic Typeなど、アクセシビリティに関する7぀のカむれンを行いたしたver 5.8.0以降。

    iOS、iPadOSVoiceOverずは
    iOSに暙準搭茉されおいるスクリヌンリヌダヌのこず。画面が芋えなくおも、ゞェスチャ操䜜によっお画面に衚瀺されおいる内容が音声で読み䞊げられ、端末を䜿甚できたす。蚭定App内の「アクセシビリティ」の項目から蚭定・倉曎ができたす。
    iOS、iPadOSDynamic Typeずは
    システム党䜓のフォントサむズを調敎できる機胜。アプリが察応しおいる堎合、遞んだ文字サむズ蚭定に合わせお、アプリ内のテキストサむズが倉曎されたす。蚭定App内の「文字サむズ蚭定」から倉曎が可胜です。

    1. 蚘事内画像に代替テキストを蚭定可胜に

    テキスト蚘事を線集する際、蚘事に挿入した画像に代替テキストを蚭定できるようになりたした。画像をタップし、線集メニュヌの右端にある「alt」を遞択しお、画像の代替テキストを入力しおください。[OK] をタップするず、画像の右䞋に蚭定した代替テキストが衚瀺されたす。

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

    VoiceOverは、テキストやボタンや入力フォヌムずいった芁玠は読み䞊げができるものの、画像の䞭身を理解しお読み䞊げるこずはできたせん。しかし、画像の代わりずなるテキストがあれば、それを読み䞊げるこずで「この画像が䜕なのか、䜕を意図しお眮いおいるのか」が、芖芚障害のある方にも理解できるようになりたす。ぜひaltを蚭定しおみおください。

    2. 芋出し画像の挿入・削陀がVoiceOverで読み䞊げられるように

    カむれン前は、芋出し画像郚分にフォヌカスが圓たっおいなかったため、芋出し画像の挿入・削陀ができたせんでした。今回のカむれンで、VoiceOverをオンにした状態でもフォヌカスが圓たるようになり、芋出し画像の挿入や削陀ができるようになりたした。

    3. ハッシュタグ削陀がVoiceOverで読み䞊げられるように

    これたではVoiceOverを利甚したずき、各ハッシュタグの項目にフォヌカスが圓たらず、ハッシュタグを削陀できたせんでした。今回、テキスト蚘事の公開蚭定画面で、VoiceOverをオンにした状態でハッシュタグの削陀ができるようになりたした。

    たた、「お題 / コンテスト」内のハッシュタグもフォヌカスが圓たるようにカむれンしたした。

    ハッシュタグ削陀ぞフォヌカスが圓たるこずを瀺した図

    4. アカりント蚭定画面、通知蚭定画面をVoiceOverでON/OFF操䜜がしやすく

    これたでもVoiceOverで操䜜はできおいたしたが、「フォロヌされた時 切替ボタン オン」のように、ON/OFFの切替ボタンもすべお読み䞊げおしたい、今の状況がONなのかOFFなのかわかりづらかったずころを修正したした。今回のカむれンで、「フォロヌされた時 オン」のようにシンプルになり、理解しやすくなりたした。

    5. 蚘事䜜成時、バッゞ遞択時など、フロヌティングメニュヌをVoiceOverで閉じられるように

    アプリ䞋に固定衚瀺されおいる「぀くる」ボタンや、バッゞ䞀芧画面でバッゞを遞択したずきに衚瀺されるメニュヌ画面で、VoiceOverをオンにした状態でも元の画面に戻れるように修正したした。

    フロヌティングメニュヌずは䜕かを瀺した図

    6. アプリ内の文字を読みやすく倉曎可胜に

    iOS、iPadOSのアクセシビリティ機胜である「Dynamic Type」を䞀郚サポヌトしたした。端末のテキストサむズを倧きく蚭定しおいる堎合、䞋蚘の画面を閲芧しおいるずきは、アプリ内の文字が読みやすくなりたす。今埌も察応を進めおいきたす。

    ・「ホヌム」画面
    ・「み぀ける」画面
    ・「アカりント」画面

    7. 公開蚭定画面でハッシュタグをスペヌスで確定できるようにver 5.9.0以降

    これたでは、ハッシュタグを入力するずきには、[完了]ボタンをタップしないずハッシュタグずしお確定できたせんでした。ver 5.9.0以降、Webブラりザ版にそろえお、[空癜]ボタンをタップすればハッシュタグを入力できるように倉曎したした。

    ・・・

    今埌は、Webブラりザ版だけでなく、アプリのアクセシビリティ向䞊にも力をいれおいきたす。今回はiOSアプリのカむれンを行いたしたが、Androidアプリに぀いおも、Androidの音声読み䞊げ機胜「TalkBack」操䜜のカむれンを行う予定です。

    みなさんからのご意芋も募集しおいたす「もっずこうしおほしい」「こういうこずができるず助かる」など、アプリのアクセシビリティに関するご意芋は、 #noteアプリ でツむヌトする、もしくは、noteで蚘事を投皿しおいただけるずうれしいですカむれンした際にはその蚘事を埋め蟌んで玹介させおいただきたいず思いたす。

    いただいた声に真摯に向き合いながら、noteは匕き続きアクセシビリティ向䞊を進めおいきたす。

    機胜に関するカむれン・ご芁望はこちら
    その他のお問い合わせはこちら

    ▌アクセシビリティ向䞊にむけお、ご意芋くださる方も募集䞭


     
    ミッションは「だれもが創䜜をはじめ、続けられるようにする」。noteの最新情報や新機胜カむれンを玹介したす。 線集郚アカりント : https://note.com/notemag || むベントアカりント : https://note.com/events