---
title: Yahoo! JAPANの事例で考える、iOSアプリのアクセシビリティと文字サイズ #yjtc / YJTC21 C-4
tags:  #yjtc  
author: [Yahoo!デベロッパーネットワーク](https://www.docswell.com/user/ydnjp)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/PLJ16K6N7G.jpg?width=480
description: 世の中のスマホアプリには、優れたUXを提供してWebアプリよりも使いやすさを追求しているものが数多くあります。 しかしアクセシビリティへ目を向けると、アプリはWebに比べ十分普及しているとは言えません。 そこには様々な要因があり、このセッションではYahoo! JAPANアプリの文字サイズに関する取り組みを通じてそれらについて議論したいと思います。  Yahoo! JAPAN Tech Conference 2021 は2021年1月22日に開催しました。 https://techconference.yahoo.co.jp/2021/
published: January 15, 21
canonical: https://www.docswell.com/s/ydnjp/ZGMNLZ-2021-01-15-154553
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/PLJ16K6N7G.jpg)

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

# Page. 2

![Page Image](https://bcdn.docswell.com/page/8GJWWD4MJ2.jpg)

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

# Page. 3

![Page Image](https://bcdn.docswell.com/page/W4EZ5G2MJ3.jpg)

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

# Page. 4

![Page Image](https://bcdn.docswell.com/page/KY769YV57V.jpg)

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

# Page. 5

![Page Image](https://bcdn.docswell.com/page/5G75NGDGJ4.jpg)

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

# Page. 6

![Page Image](https://bcdn.docswell.com/page/V9J25Y8DJR.jpg)

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

# Page. 7

![Page Image](https://bcdn.docswell.com/page/5DEYKG6M7M.jpg)

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

# Page. 8

![Page Image](https://bcdn.docswell.com/page/2VJNRGZ3E8.jpg)

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

# Page. 9

![Page Image](https://bcdn.docswell.com/page/GYE9MWZPJ3.jpg)

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

# Page. 10

![Page Image](https://bcdn.docswell.com/page/5GE8LN1XJD.jpg)

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

# Page. 11

![Page Image](https://bcdn.docswell.com/page/MLELLPQNER.jpg)

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

# Page. 12

![Page Image](https://bcdn.docswell.com/page/54JMM41QJW.jpg)

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

# Page. 13

![Page Image](https://bcdn.docswell.com/page/ZPJRVWLKE9.jpg)

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

# Page. 14

![Page Image](https://bcdn.docswell.com/page/NPEXZPW5JX.jpg)

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

# Page. 15

![Page Image](https://bcdn.docswell.com/page/63EK8DVRJD.jpg)

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

# Page. 16

![Page Image](https://bcdn.docswell.com/page/4L732RMGE5.jpg)

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

# Page. 17

![Page Image](https://bcdn.docswell.com/page/V87DZY6NJG.jpg)

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

# Page. 18

![Page Image](https://bcdn.docswell.com/page/4VJPD6YNJ8.jpg)

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

# Page. 19

![Page Image](https://bcdn.docswell.com/page/L2EV13GYJQ.jpg)

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

# Page. 20

![Page Image](https://bcdn.docswell.com/page/Z57G238W7L.jpg)

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

# Page. 21

![Page Image](https://bcdn.docswell.com/page/V4EQP59QJP.jpg)

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

# Page. 22

![Page Image](https://bcdn.docswell.com/page/DKJ4Y9XYE1.jpg)

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

# Page. 23

![Page Image](https://bcdn.docswell.com/page/PLE16KNNJG.jpg)

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

# Page. 24

![Page Image](https://bcdn.docswell.com/page/8GEWWPMME2.jpg)

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

# Page. 25

![Page Image](https://bcdn.docswell.com/page/W47Z5KQME3.jpg)

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

# Page. 26

![Page Image](https://bcdn.docswell.com/page/KYJ69Q65JV.jpg)

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

# Page. 27

![Page Image](https://bcdn.docswell.com/page/5GJ5NR6GE4.jpg)

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

# Page. 28

![Page Image](https://bcdn.docswell.com/page/4LE32PQPJ5.jpg)

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

# Page. 29

![Page Image](https://bcdn.docswell.com/page/V8EDZL937G.jpg)

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

# Page. 30

![Page Image](https://bcdn.docswell.com/page/4V7PD2ZP78.jpg)

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

# Page. 31

![Page Image](https://bcdn.docswell.com/page/L2JV1DWV7Q.jpg)

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

# Page. 32

![Page Image](https://bcdn.docswell.com/page/Z5EG2YD1EL.jpg)

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

# Page. 33

![Page Image](https://bcdn.docswell.com/page/V4JQPM1N7P.jpg)

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

# Page. 34

![Page Image](https://bcdn.docswell.com/page/DK74YVR3J1.jpg)

21
Yahoo! JAPAN
Tech Conference 2021