プロジェクトで行ったVoiceOver対応(読み方の変更)

はじめに

2021年6月に障害者差別解消法の改正により、民間事業者でも義務化され、公布から3年以内に対応が求められるようになりました。
そのため、自分の参画しているプロジェクトでもアクセシビリティの対応が増えました。
今後のためにも備忘録的に取り組んできた対応の一部を書いておこうと思った次第です。

自分の参加しているプロジェクトではApache Cordovaというモバイルアプリ開発向けのフレームワークをベースに開発を行っています。
技術的には3割ほどネイティブの実装で他はwebの技術を利用しています。
なので、iOS,Androidとタグにありますが、この記事ではHTML,TypeScriptでの対応方法です。

また、利用した一部の例を取り上げるだけなので、根本的な技術の理解みたいなのはこの記事ではできません。。

テキストやボタンの読ませ方の基本的な対応

基本的にはWAI−ARIAに定義されているaria-labelを利用します。
WAI-ARIAについてはこちらを見ていただけると良いと思います。
自分もここに述べられるほど詳しくはないですが、要はスクリーンリーダにその要素について連携するくらいで認識しています。
公式だと

HTMLだけでは表すことのできない構造や状態などを明示することができます。

とのことです。

実際の使い方

<button aria-label="xxエリアの続きを見る">続きを見る</button>

のような感じで指定してあげるだけ。

読ませたくないもの

例えば独自実装したグラフのUIを読ませないようにする際にaria-hiddenを利用します。
後述しますが、もちろんグラフに載っている内容を別途違う方法で読み上げるようにはしています。

実際の使い方

aria-labelと同様に要素を追加し、読ませたくない場合trueを設定します。

<div id="hoge" class="graph-container" ~省略~ aria-hidden="true"></div>

読み上げる専用の隠しUIを作る。

上記のaria-labelを利用してもうまくいかないものがありました。
独自実装したグラフのUIであったり、「GB」などが指定しても片方のOS（例えばiOS）では「ジービー」と読まれてしまうなど。

そういった場合は、読ませない・ユーザーに見せるUIと、読み上げる・ユーザーに見せないUIを作成しました。

実際の使い方

SCSSでhidden属性を持たせたクラスを作成し、それを指定してあげることで見た目にはないがスワイプしたりすると読み上げるようなものを用意しました。
実際の見えているUIにはaria-hidden="true"を指定しました。

<span id="hoge" aria-hidden="true">GB</span>
<span id="hogehoge" class="sr-only">ジービー</span>

// class設定
.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  font-size: 1px;
}

最後に

この対応をした箇所が全て正しいかはわからないので、自分でも
https://www.w3.org/WAI/ARIA/apg/patterns/
のようなサイトを見て推奨されているものを引き続き勉強していけたらなと思います。
これ以外にも多言語対応、キーボード利用対応、デザイン的な対応も行いましたので、その内容も当てはまるかはわかりませんが余裕のある際に書いていきます。