Yahoo! JAPANの事例で考える、iOSアプリのアクセシビリティと文字サイズ #yjtc / YJTC21 C-4

Yahoo! JAPANの事例で考える、 iOSアプリのアクセシビリティと文字サイズ iOSアプリ黒帯 林和弘 ©2021 Yahoo Japan Corporation All rights reserved.

林和弘 iOSアプリ黒帯 普段はYahoo! JAPANのiOSアプリを開発しながら、 iOSアプリ黒帯の仕事をしています。 OSS開発や技術記事を書いたりしているので良かったらフォローしてください(@kazuhiro4949) Copyrights 2019 Yahoo Japan Corporation. All Rights Reserved.

このセッションについて 今日はアプリ開発者に向けて、 プラットフォームのアクセシビリティ機能と どう向き合っていけばいいかの話をします

Yahoo! JAPANアプリ アプリの紹介 ・ニュース・天気・Yahoo!検索などの ヤフーが持つサービスを一つのアプ リで利用できる ・雨雲レーダー・災害プッシュ通知な どアプリ独自のサービスも提供 提供: アフロ

Yahoo! JAPANアプリ アクセシビリティ関連 ・1年程前にDynamic Typeへ一部対応 ・対応するに辺り、この分野特有の課題へ直面したので今回はその話をします ・iOSの技術的な詳細についてはあまり触れません

アジェンダ 1. iOSアプリでアクセシビリティを扱う 際の課題 2. Yahoo! JAPANではどう取り組んで いるか

アジェンダ 1. iOSアプリでアクセシビリティを扱う 際の課題 2. Yahoo! JAPANではどう取り組んで いるか

アプリ開発でアクセシビリティへの考慮はしていますか？

iOSのアクセシビリティ iOSが持つアクセシビリティ機能の特徴 ・多くの機能はOS機能としてまとめて対応している ・ただし一部機能はアプリで補助的な実装が必要

iOSのアクセシビリティ OSがまとめて対応 ・AssistiveTouch ・拡大鏡 ・カラーフィルター ・etc.

iOSのアクセシビリティ アプリ側で補助的実装が必要 ・Dynamic Type ・VoiceOver

iOSのアクセシビリティ Dynamic Type ・iOS全体の文字サイズを変更可能 ・アプリでは以下の対応が必要 ・Text Styleに対応 ・UIFontMetricsでフォント毎 にサイズとText Styleへ対応を 設定 テキストサイズ デフォルト

iOSのアクセシビリティ Dynamic Type ・iOS全体の文字サイズを変更可能 ・アプリでは以下の対応が必要 ・Text Styleに対応 ・UIFontMetricsでフォント毎 にサイズとText Styleへ対応を 設定 Text Plain Label Color Default (Label) Font Body mic Type Automatic lignment Lines Behavior Enabled Highlighted Baseline Align Baselines ine Break Truncate Tail utoshrink Fixed Font Size Tighten Lette Custom System System System Italic Text Styles Body Callout Caption 1 Caption 2 Footnote Headline Subhead Large Title Title 1 Title 2 Title 3

iOSのアクセシビリティ Dynamic Type ・iOS全体の文字サイズを変更可能 ・アプリでは以下の対応が必要 ・Text Styleに対応 ・UIFontMetricsでフォント毎 にサイズとText Styleへ対応を 設定 let font = UIFont(name: "MyFont", size: 16)! let metrics = UIFontMetrics.default.scaledFont(for: font) let label = UILabel() label.font = metrics label.adjustsFontForContentSizeCategory = true

iOSのアクセシビリティ VoiceOver ・画面内の構成要素や文章を読み上げる 機能 ・アプリでは以下の対応が必要 ・UI要素にAccessibility Labelをつ ける(ラベルであれば不要) ・Accessibility Hintをつける Localizer Hint Comment For Localizer Accessibility Accessibility Enabled Label 何かのUI Hint Hint Identifier Identifier

iOSのアクセシビリティ VoiceOver ・画面内の構成要素や文章を読み上げる 機能 ・アプリでは以下の対応が必要 ・UI要素にAccessibility Labelをつ ける(ラベルであれば不要) ・Accessibility Hintをつける let view = UIView() view.accessibilityTraits = .image view.accessibilityLabel = "何かのUI"

iOSのアクセシビリティ 他にも様々なものがあります アクセシビリティとiOS11 - Nagoya iOS meetup #1 アクセシビリティとiOS11 Kazuhiro HAYASHI Nagoya iOS Meetup #1 kazuhiro4949 January 12, 2018 Technology 1 1.4k https://speakerdeck.com/kazuhiro4949/akusesibiriteiois11-nagoya-ios-meetup-number-1

Yahoo! JAPANアプリでは、Dynamic Type(の一部)へ積極対応(2020年現在)

そもそも対応のハードルが高かった理由 アクセシビリティ全般に言える課題 サービスとしては対応の必要性を感じて いる いつかはやりたい…

そもそも対応のハードルが高かった理由 アクセシビリティ全般に言える課題 ただし他の企画に比べて、開発時間を取 るための説明がしにくい KPI立てにくいなぁ… 対象ユーザー絞られる なぁ…

そもそも対応のハードルが高かった理由 アクセシビリティ全般に言える課題 プロダクトのメンテコストがかかる テストケースが膨らむ… これから必ず考慮して 実装する必要が…

そもそも対応のハードルが高かった理由 iOS特有の課題 標準アプリに近いデザインにしなければ ならない 決まったフォントファミリー (iOS11からは変更可能) WebView内での独自フォントファミ リー 独自フォント (~iOS11)

そもそも対応のハードルが高い理由 iOS特有の課題 テキストサイズを変更するという文化 が世の中的にそこまで根付いていない 設定アプリが複雑でサイズ変えられる のを知らなかった… 動的にテキストサイズが変わる前提で 作ってないなぁ…

そもそも対応のハードルが高い理由 結果的に… 多様なユーザーのために公共的な体験を 提供したいという理想 具体的なプロダクト開発・運用にリソースを 割けるかというテクニカルな問題 この2つがどんどん離れていく…

アジェンダ 1. iOSアプリでアクセシビリティを扱う 際の課題 2. Yahoo! JAPANではどう取り組んで いるか

こういった課題には、解決策を具体かつ運用可能な形へアレンジしていく

Yahoo! JAPANの場合は 仕様を極力小さくする ・お問い合わせを見ると殆どが文字を大 きくしたいというもの ・3段階設定にして、文字サイズを大き くしすぎない 最小 最大 iOSのDynamic Typeのサイズ感

Yahoo! JAPANの場合は アプリの機能として提供する ・経験やデータから、設定 アプリへ案内してもド ロップしてしまう ・アプリ内で設定できるよ うに仕組みを作る Yahoo! JAPANアプリ内 の設定 iOSの設定

Yahoo! JAPANの場合は OS提供のAPIはあくまでも補助的なものにする ・Dynamic Typeの設定変更 イベントのみを使う ・イベントが来たときにテキ ストサイズを大きくする仕 組みは自前で用意する override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) { super.traitCollectionDidChange(previousTraitCollection) if previousTraitCollection?.preferredContentSizeCategory != traitCollection.preferredContentSizeCategory { // 現在のフォントカテゴリからアプリなフォントサイズを判定 } }

Yahoo! JAPANの場合は ビジネス的な視点ではない事ができる組織を作る ・アクセシビリティなどの、公共 的なユーザー体験も検討できる ワーキンググループを作った ・ビジネスに直結しないユーザー 体験の課題が取りこぼされない ようにする メインのPJ体制 独立 UXの課題を扱う WG

Yahoo! JAPANの場合は 最終的な成果物 ・大きさに制限を加える ・アプリ内で設定できるように ・OSの設定「にも」連動するように

Yahoo! JAPANの場合は リリースしてみてどうだったか ・ABテストを実施した所、ビジネス面での影響は特になし ・ヘビーユーザー層からの印象が良かった ・OS設定よりもアプリ内設定のほうが使われている

まとめ アクセシビリティ機能をアプリへ組み込む上での良いバランス ・OSの機能・フレームワークベースで考えない ・求められているケースを考慮して、部分的・不完全性を許容する ・集計値に現れにくいことができるチームを作っておくといいかも

21 Yahoo! JAPAN Tech Conference 2021