📈

Audio Graphs API を使ってチャートをアクセシブルにする

2021/12/20に公開

Swift

こんにちは、この記事はアクセシビリティ Advent Calendar 2021 の20日目です。

freee株式会社でiOSアプリ開発をしている @RyoAbe と申します。普段私は「freee会計」という個人事業主や法人の方が帳簿付けや確定申告等を行うための会計アプリの機能開発と並行し、アクセシビリティの推進もしております。

この記事では、先日のWWDC2021のセッションの一つ「Bring accessibility to charts in your app」で紹介された Audio Graphs という APIについて、実際に使ってみたので紹介してみようと思います。

「Bring accessibility to charts in your app」でAudio Graphs APIを使ったチャートを発表者が操作している様子

視覚的なチャートは意味をなさない（ことがある）

チャートは、増加や減少といった傾向をさっと掴むのにとても便利です。
ただ、視覚的な表現となっているため、目の不自由な方が内容を把握するのは難しいです。表形式の情報を合わせて配置すればピンポイントな情報を得ることは可能にはなります。ただチャートの傾向を掴むよう全容を把握するには、各数値を頭に記憶しながら聞き取ることになるので、とても難しく（ぼくにはまず無理）、晴眼者が視覚から直感的に情報を得るような体験とはたいぶ異なります。

そこで Audio Graphs API の出番

チャートの情報を可聴できるようピッチ（音の高さ）で表すようにするためのAPIが、Audio Graphs API になります。Audio Graphs に対応したチャートを、 VoiceOver というiOSに標準に備わっているスクリーンリーダを用いて再生すると、x軸に沿ってy軸の値を高いところは高い音で、低いところは低い音で再生されるようになり、より直感的にチャートの情報を得られるようになります。

また、ただ再生するだけでなく、 VoiceOverローターから「グラフの詳細」を選ぶと、ダブルタップホールドで特定のx軸のy座標の値を確認できたり、チャート全体としてどんな特徴を持ったチャートなのかといったことも確認できたりします。

ツイートの添付動画にあるように、iOSの標準アプリの「株価」アプリに実装されているので、iPhoneをお持ちの方は是非試ししてみてください。（利用方法: VoiceOverオン -> ホームに移動 -> 左右スワイプで「株価」アプリに移動 -> ダブルタップで開く -> チャートにフォーカスを当て -> VoiceOverローター -> 「オーディオグラフ」に合わせる -> 上下フリックで「オーディオグラフグラフを再生」に合わせダブルタップ）

いざ Audio Graphs API を使ってみる

APIの使い方については「Bring accessibility to charts in your app」を見れば分かります。
簡単に説明すると、

オーディオグラフを提供したいクラスで、 AXChartプロトコルを実装
x軸とy軸を AXNumericDataAxisDescriptor で定義
データ系列を AXDataSeriesDescriptor で定義
作ったパーツを組み合わせて AXChartDescriptor を作ればよいだけ。
簡単ですね。

出来上がったのがこちら（棒グラフで試した）

サンプルもGitHubにあげたので参考まで。

以下、ソースを抜粋

// モデル
struct ChartModel {
    let title: String
    let summary: String
    let xAxis: Axis
    let yAxis: Axis
    let data: [DataPoint]
    
    struct Axis {
        let title: String
        let range: ClosedRange<Double>
    }
    
    struct DataPoint: Identifiable {
        let name: String
        let x: Double
        let y: Double
    }
}

// チャート
extension ChartView: AXChart {
    // AXChartプロトコルに対応する accessibilityChartDescriptor を実装
    var accessibilityChartDescriptor: AXChartDescriptor? {
        get {
            // X軸を定義
	    // （軸のタイトル、範囲、グリッド線（任意）、軸の値の読み上げさせ方を設定）
            let xAxis = AXNumericDataAxisDescriptor(title: model.xAxis.title,
                                                    range: model.xAxis.range,
                                                    gridlinePositions: [],
                                                    valueDescriptionProvider: { value in
                return "\(value)"
            })
            // Y軸を定義
            let yAxis = AXNumericDataAxisDescriptor(title: model.yAxis.title,
                                                    range: model.yAxis.range,
                                                    gridlinePositions: [],
                                                    valueDescriptionProvider: { value in
                return "\(value)"
            })
            // データ系列の定義
	    // （系列タイトル、連続性の有無（折れ線グラフの場合は true）、系列のデータを設定）
            let series = AXDataSeriesDescriptor(name: model.title, isContinuous: false, dataPoints: model.data.map { point in
                AXDataPoint(x: point.x,
                            y: point.y,
                            additionalValues: [],
                            label: point.name)
            })
            // 作ったパーツを組み合わせて AXChartDescriptor を作る
	    // （棒グラフや折れ線グラフが重なったチャートであれば、複数のデータ系列を指定可能）
            return AXChartDescriptor(title: model.title,
                                     summary: model.summary,
                                     xAxis: xAxis,
                                     yAxis: yAxis,
                                     additionalAxes: [],
                                     series: [series])
        }
        set {}
    }
}

まとめ

最後までお読みいただきありがとうございます。Audio Graphs API のおかげでオーディオグラフをとても簡単に実装できました。iPhoneをお持ちの方はまずは株価アプリでオーディオグラフをお試しください（単純に面白いです）
また、iOSエンジニアでアプリ内にチャートがある場合は、モデルさえあればとてもお手軽なので是非 Audio Graphs API を使ってオーディオグラフを実装してみてください。

視覚的なチャートは意味をなさない（ことがある）

そこで Audio Graphs API の出番

いざ Audio Graphs API を使ってみる

まとめ

Discussion