App内のチャートへのアクセシビリティの導入

♪ (App内のチャートへの アクセシビリティの導入) こんにちはPrestonと申します さて 今日は App内のチャートに アクセシビリティを持たせる方法に ついてお話します 今日の内容をご説明しましょう まず チャートをアクセシブルに することで得られる メリットについて説明します 次に チャートの視覚的な側面に ついて 包括的な決定を行うための 原則を説明します 次に VoiceOverを使って チャートを 認識・操作できるようにする 方法について説明します そして最後に 「オーディオグラフ」という エキサイティングな新機能とそれを サポートする方法を説明します では 早速始めましょう 現代社会では データは 非常に重要です 私たちは毎日 経済 健康 目標 など 様々なことを決定するために データを利用しています しかし データを活用するためには それを理解できなければなりません チャートが便利なのは データが何を示しているのかを 詳細に調べなくても 素早く理解できるからです しかし 目の不自由な人は チャートを 利用することができません 見えなければ 視覚的なチャートの 価値はありません アクセシビリティチームは 目の不自由な方にもデータを 利用していただけるよう 何年も前から努力しています 今年は Appでオーディオグラフを サポートすることで 目の不自由な方にも チャートの力を最大限に 発揮していただけます 例を見てみましょう これは 1917年から1975年 までの 出生率の推移を示すAppの例です このグラフを見ると 幾つかの興味深い特徴が 一目で分かります 出生率は 1935年頃に最低になり その後 1960年頃まで急速に増加し そして再び減少していることが 分かります 新しいオーディオグラフ VoiceOver機能を使えば 目の不自由な方にも同じように データを素早く把握してもらう ことができます その仕組みをご紹介しましょう まず VoiceOverの ローターにある 「オーディオグラフ」の メニューを探します オーディオグラフです 次に 「チャートの詳細」が 表示されるまで下にスワイプします オーディオグラフを再生します チャートの詳細 次に ダブルタップして オーディオグラフの エクスプローラービューを開きます オーディオグラフ 見出し 次に 再生ボタンをクリックして オーディオを再生します オーディオグラフは データ系列を 連続した音で再生します 20世紀の出生率 オーディオグラフの再生 ボタン ボタンをクリックします

完了です すごいでしょう？ 今聞いていただいたのは 目で見るのと同じグラフを 視覚ではなく聴覚で 表現したものです 聞こえてきた音は 出生率の推移に対応しており 音が低いほど値が小さく 音が高いほど値が大きいことを 意味しています これらの音はビジュアルチャートの 線を正確に反映しています つまり チャートを見なくても オーディオグラフを見れば 僅か数秒でその重要な特徴を 認識することができるのです さて データの全体像が 掴めたところで 次は 気になる特徴を より正確に把握してみましょう 次に知りたいのは 最大出生率がどのくらいで それが何年に起こったか ということです そのため オーディオグラフには インタラクティブなモードが 用意されていてVoiceOver のユーザーは ダブルタップして ホールドした後 ドラッグして 自分のペースでデータを聞けます 一時停止すると VoiceOverは オーディオグラフ内のユーザーの 現在の位置に対応するデータ値を 読み上げます このインタラクティブモードを 使って 出生率の最大値と その年を探ってみましょう 20世紀の出生率

データポイント 1960 人口1万人あたりの出生率268人 音声グラフを最も高い音が 出るまでスクラブし 一時停止して データ値を聞くと 1960年頃に 1万人あたり268人の出生率が 最大だったことが分かります 最大値が1960年頃 であることから このピークがベビーブームの時代に 相当することも推察できます これらのことは 音声化されたチャートを 見るだけで理解できます さて 次に別の種類のチャートの 例を見てみましょう これは いくつかの種類の自動車に ついて X軸の車両重量と Y軸の燃費の関係を示した 散布図です このチャートの音声グラフでは 視覚的なチャートの データポイントと同様に 1つの音が 1台の自動車の データポイントを表しています 音の高さは 自動車の燃費（1ガロンあたりの マイル数）を表しており 音の高さが高いほど燃費の良い 自動車であることを示しています この音声グラフを再生すると どんな音が聞こえてくるのか 少し考えてみましょう どんな音がするか聞いてみましょう データが上向きに推移しているのか 下向きに推移しているのかを 聞き取るようにしましょう

完了です 下向きに推移しているのが 聞こえたはずです この傾向は このデータでは 大きな自動車ほど燃費が悪い傾向に あることを意味しています もし 生のデータだけがあって それぞれのデータを 個別に見ていたら この関係を理解するのに どれだけ時間がかかったか 想像してみてください また このデータセットでは 耳を澄ませていると 非常に高い音の異常値が 聞こえたかもしれません 視覚的なチャートで目立つように オーディオグラフでも 目立つ存在であり このデータセットの中で 唯一のハイブリッド車です この異常値について更に詳しく 知りたい場合は 外れ値の詳細を知りたい場合は 出生率のグラフでしたように インタラクティブモードを使って 最も高い音が聞こえるまで データを移動し 一時停止して データの値を聞くことができます このエクスプローラービューでは オーディオグラフに加えて 形状 トレンド 外れ値などの データの重要な特徴に関する サマリー情報が提供されます これらの情報は このチャートのデータの 自動統計分析から推測されます オーディオグラフと一緒に VoiceOverが この サマリー情報を読み上げることで データの理解を 深めることができます さて アクセシブルなチャートの 利点を簡単にまとめてみましょう チャートをアクセス可能に するにすることで データ量の多いAppを 視覚障碍者を含む より多くの人々に 届けることができます また データを理解するための ツールを提供することで ユーザーの利便性を 向上させることができ 個人生活や仕事において データの持つ素晴らしい力を 活用することができます そして最後に 今年は新しいAPIが登場し チャートの作成がこれまで以上に 簡単になります 今回は Appでオーディオグラフを サポートする方法をご紹介したいと 思いますが その前に チャートの アクセシビリティに関する 一般的なトピックをいくつか ご紹介します まず チャートをより視覚的に 利用しやすくする方法について 説明します 視覚的なチャートを誰にで もわかりやすくするには いくつかの簡単な方法があります このチャートを 例に挙げてみましょう これは 熱帯地域と乾燥地域の 月別平均降水量を示す シンプルな折れ線グラフです このグラフの視覚的な使いやすさを 向上させるために いくつかのアクセシビリティの 原則を適用してみます まず 可能な限り コントラストの高い色を 使うことが重要です 前景色と背景色の コントラストが高いと 特に弱視の方にとっては チャートが見やすく 理解しやすくなります ご覧のように 線と背景の コントラストがかなり低いですね また タイトルやラベルの文字も 少し暗い印象です これらの色を更新して 背景とのコントラストを 高めてみましょう かなり良くなりました コントラストが十分かどうかは 色のコントラスト比を 確認することで判断できます Xcodeに同梱されている Accessibility Inspectorには Color Contrast Calculatorが ありますので使ってみましょう コントラスト比は最低でも 4.5:1を目安にしましょう 次に チャートのビジュアル アクセシビリティを向上するために 問題のある色の組み合わせを 避けることができます 一般的には 赤と緑の併用は 可能な限り避けるのが良いでしょう 赤と緑の色覚異常は最も一般的な タイプで これらの色を一緒に使うと 人によっては チャートを理解でき難くなります この折れ線グラフでは 緑の線が熱帯地方の降水量を表し 赤の線が乾燥地方の降水量を 表しています 凡例の色分けを見れば どのデータがどの系列なのか 分かると思います しかし 赤と緑の色覚異常である 識別困難なの方には このチャートは次のように 見えるかもしれません この色では どの線が熱帯雨林の雨を表し どの線が乾燥雨林の雨を表して いるのか分かりませんね これを改善するために 赤い色を青に変えてみましょう これは大きな変化ではない かもしれませんが 赤緑色盲の人にとっては チャートは 次のように見えます このように少し調整するだけで 赤緑の色覚異常の方でも シリーズの違いが 分かりやすくなります また ２番目に多い色覚異常である 青と黄も 一緒に使わない方が良いでしょう ここまでは良い改善点ですが さらに一歩進んで 色に加えて記号を使って データ系列を区別してみましょう データシンボルを使えば 色に頼らなくてもチャートを 理解できるようになります さて ここでもう一度チャートを 見てみましょう 次に 各データ系列に記号を 追加してみましょう 熱帯地方のデータ系列には丸が 乾燥地方のデータ系列には四角が ついています この記号を見れば どのデータがどの系列なのかが 分かります これで 色を全く認識できない人 でも 自分のチャートを理解できるように なりました これらをデフォルトで行えれば 良いのですが 設計や製品の制約によって 色の選択や記号の使用が 制限される場合もあります このような場合でも いくつかの 簡単なアクセシビリティ設定を サポートすることで アクセス可能な体験を提供できます デフォルトのケースでチャートに 記号を入れられない場合でも 「色彩なしで区別する」システムの アクセシビリティ設定が 有効になっていれば 記号を追加してアクセス可能な体験 を提供することができます 製品の理由でカラーセットを 簡単に変更できない場合は アクセシビリティ設定 「コントラストを上げる」が 設定されている時にコントラストの 高い色の採用を検討してください 透過性の使用を減らすことでも チャートの視覚的なアクセス性を 高めることができます チャートに透明効果が 使われている場合は アクセシビリティ設定「透明度を 下げる」がオンになっている時に 透明効果を無効にすることを 検討してください iOS Appではなく macOS Appを作成している場合 これらの設定は それぞれmacOS上で 対応できるものがあります これらのAPIの開発者向け ドキュメントへのリンクは このセッションの資料の中に あります それでは VoiceOverで データを操作可能にする方法を 見ていきましょう 私はコーヒーが大好きで プログラミングも大好きです このチャートのように コーヒーの消費量とエンジニアが 作成するコードの量には 関係があるということにしましょう あくまでも仮定ですが なお データはコーヒー12杯分 までありますが データを作成する際に健康に害を 及ぼしたエンジニアはいませんので ご安心ください 全て作り話です では このデータを VoiceOverのユーザーが 操作可能にするにはどうすれば よいかを考えてみましょう これは チャートビューのクラスと それに対応するモデルオブジェクト のコードの例です チャートビューは モデルへの参照と それ自らを描画するための関数を 持っています そしてモデルは チャートの タイトルとデータポイントを 単純な構造体に格納しています まず最初にやるべきことは チャートをコンテナにすることです それにより VoiceOverが チャートの要素を 正しくグループ化し ナビゲーションの助けになります チャートをコンテナにするには 単にチャートビューで accessibilityContainerTypeを オーバーライドして semanticGroup コンテナタイプを返します 繰り返しますが これは VoiceOverのナビや どの要素がチャートに属しているか を伝えるために重要です 次にaccessibilityLabelを チャートに与える必要があります これは VoiceOverが チャートに出会ったときに 何を話すかを指示します 一般的には チャートの タイトルなど VoiceOverが UI上でチャートを識別できる ようなものを指定します 最後に 各データポイントに アクセシビリティ要素を 提供する必要があります これらの要素はチャートビューの accessibilityElements プロパティをオーバーライド することで提供できます これにより VoiceOverが ナビゲートできる要素が チャート内に作成され 個々のデータポイントに関する 情報を得ることができるように なりました これを実装するには 単に「map」を使用して データポイントのリストから アクセシビリティ要素の配列を 作成します 各データポイントに対して 新しい AccessibilityElement オブジェクトを作成し そのaccessibilityContainer としてChartViewを指定します そして 要素の accessibilityValue プロパティにデータポイントの 文字列表現を指定します この文字列はVoiceOverが これらのデータポイント要素に 移動したときに話す要素です コードの中では この文字列をローカライズする 必要があるでしょうし 文字列辞書を使って適切な複数形の ルールを定義することも できるでしょう この例では シンプルにしておきましょう 最後に VoiceOverが 要素の画面上の位置を 認識できるように 要素アクセシビリティフレームを 提供する必要があります ビジュアルチャートを 描くのに必要だったので データポイントごとに フレームを計算するロジックは 既に別の場所にあるでしょう そのロジックがあれば ここで再利用できます これで このデータポイント用の完成した アクセシビリティ要素を 返すことができます これでOKです では これまでの成果を見てみましょう コーヒー杯数対コード行数 0杯 20行のコード 1杯 30行のコード 2杯 35行のコード 3杯 32行のコード 素晴らしい ご覧の通り VoiceOverが チャート内の要素に フォーカスしたときに タイトルを話すようになりました これは チャートを セマンティックグループにして アクセシビリティラベルを 付与したからです また 各データポイントを表す UIAccessibilityElementを 作成することで 各データポイントを ナビゲートできるようにしました 次に進む前に もう1つ 言っておきたいことがあります 何百 何千ものデータポイントが ある場合があります このような場合 データポイント ごとにアクセシビリティ要素を 作成するのは必ず避けてください データポイントの数が多すぎて ナビゲートするのが大変だからです 代わりに チャートを適度な間隔で 分割し 各データポイントではなく 各間隔にアクセシビリティ要素を 作成することをお勧めします こうすることで 分かりやすさを維持しながら より良いナビゲーションをし パフォーマンスを 向上させることができます まだ終わっていません できることは まだあります データをナビゲートできるように することは重要ですが VoiceOverユーザーに 生のデータを提示するのは まだ1度に1点だけです グラフの価値は データの本質を示し 個々のデータの先を見通すことが できることにあります そこで オーディオグラフの出番 となります 最後に チャートにオーディオグラフを サポートするための 実装方法について説明します 特定のチャートを定義するために 必要な全ての情報を含む ChatModel構造体が あるとします あなたのコードには 恐らくこのような モデルオブジェクトが あると思います もしなくても 心配しないでください これらの概念は どのように構成されたコードにも 適用されます 例えば チャートには タイトルとサマリーがあり X軸とY軸があり 各軸には タイトルと その軸で 表示可能な最小値と最大値を表す 数値範囲があるとします そして最後に チャートの実際のデータを含む データポイントの配列があります このモデルオブジェクトの列の 情報を使って チャートのオーディオグラフ機能を 有効にしてみましょう まず Accessibility フレームワークをインポートし ChartViewクラスを AXChartプロトコルに 適合するように拡張します AXChartプロトコルへの 準拠は 対応するプロパティが 1つだけなので簡単です accessibilityChartDescriptorを 実装すればよいのです 作成した チャート記述子オブジェクトには VoiceOverが オーディオグラフ体験を 提供するために必要な情報が すべて含まれています それでは このチャート記述子の作り方を 順を追って説明します まず 各軸に軸記述子オブジェクト を作成する必要があります 各軸記述子は カテゴリーデータを表すのか 数値データを表すのか 軸の表示可能な値の範囲 グリッド線の位置 音声化可能なデータ値の フォーマット方法などの情報を VoiceOverに提供します 今回のコーヒーチャートでは X軸が数値なので 数値軸の記述子を作ります X軸にカテゴリーデータがある場合 代わりにカテゴリー軸記述子を 使用します モデルオブジェクトを使用して この軸のタイトルと範囲を 指定します また この軸上に グリッド線がある場合は オプションでその位置を 指定することもできます グリッド線を指定すると 再生時やインタラクション時の 触覚フィードバックとして オーディオグラフに表示されます 今回のチャートには X軸のグリッド線がないので ここでは空欄にしておきます 数値軸の場合は valueDescriptionProvider クロージャを 作成する必要があります このクロージャは非常に重要で VoiceOverに この軸の値を どのように話すかを伝え 単に「５」と言うのではなく 「５杯」と言えるようにします この軸では 値の後に 「杯」と話すように 説明をフォーマットします コードの中では この文字列を 適切な複数形のルールで ローカライズしたいところですが この例はシンプルにしておきます 同じことをしてY軸の軸記述子を 作成します ただし 値の記述を 「杯」ではなく 「コードの行数」と フォーマットすることにします グラフの基本的な構造を 定義したので データを追加しましょう データを追加するには 各データ系列にデータ系列記述子を 追加します このチャートには データ系列が1つしかないので データ系列記述子を1つだけ 作成し 系列の名前 連続性の有無 実際のデータポイントを渡します isContinuousには 系列が点やマークで 視覚的に表現されている場合は 「false」を 系列が線で 視覚的に表現されている場合は 「true」を渡します 系列のデータには AXDataPoint オブジェクトの配列を 指定する必要があります 最も簡単な方法は チャートモデル のデータから マッピングする方法です これでほぼ完成です 最後にもう1つだけ やることがあります それは すべてのパーツを組み合わせて AXChartDescriptor オブジェクトを作ることです このオブジェクトには タイトルを付けますが これもチャートのタイトルである 必要があります そして もしあれば チャートの 要約を提供することができます これはチャートのaltテキストを 提供するようなものです このプロパティを使って データから得られる 最も重要なインサイトを 1文か2文で伝える必要があります このサマリーテキストは オーディオグラフの エクスプローラービューで ユーザーに表示されます これは VoiceOverの ユーザーが チャートを理解するのに 非常に役立ちます 最後に 先程作成した軸と データ系列の記述子を提供して グラフの記述子を完成させ それを返します これで完成です 最終的な結果を見てみましょう オーディオグラフ オーディオグラフの再生 チャートの詳細 オーディオグラフ 見出し： コーヒー杯数対コードの行数 オーディオグラフの再生 ボタン

完了です 復習しましょう グラフの視覚的なデザインには 利用しやすいものを 選ぶようにします これには 適切なコントラスト比を 使用すること データのカテゴリを区別するために 色を加えて記号を使用すること 色覚異常のユーザーにとって 問題となるような色を 避けてください また アクセシビリティツリーで データ要素を公開し VoiveOverユーザーが 認識して 操作できるようにしてください 最後になりますが AXChartプロトコルと accessibilityChartDescriptorを チャートビューに実装することで VoiceOverユーザーが 健常者と同じようにチャートを 利用できるようになります これで 誰でも使える リッチでアクセシブルな チャートを作成するのに 必要なものが全て揃いました データは私たちの生活の中で 非常に重要なものですから これらのツールを使ってユーザーに 力を与えていただきたいと思います チャートは データが豊富な世界で データを理解するための 最高のツールの1つですが この利点を誰にでも 提供できるようになりました ♪