はじめに
以前にプロジェクトで行ったVoiceOver対応(読み方の変更)を投稿しましたが、今回はアプリ全体で行った対応について、目標にしているところとその対応方法をまとめて備忘録としてまとめます。
自分の参加しているプロジェクトではApache Cordovaというモバイルアプリ開発向けのフレームワークをベースに開発を行っています。
技術的には3割ほどネイティブの実装で他はwebの技術を利用しています。
なので、iOS,Androidとタグにありますが、この記事ではHTML,TypeScriptでの対応方法です。
方針
Web Content Accessibility Guidelines (WCAG) 2.0に準拠したアプリの実現。
WAI-ARIAを用いたSR対応を基本としている。
実装例一覧
| No | やりたいこと | 方法 | 実装例 | 備考/参考 |
|---|---|---|---|---|
| 1 | 指定した読ませ方をしたい （画面には表示させずに支援技術に対してのみラベルを設定した） |
aria-label="読ませたい文言" | <ion-icon name="icon-external" aria-label="外部遷移"></ion-icon> |
|
| 2 | 読ませない | aria-hidden="true" | ■固定値<ion-icon name="icon-arrow-right" aria-hidden="true"></ion-icon>■動的に切り替える ① <ion-icon name="icon-sample" [attr.aria-hidden]="sampleFlag"></ion-icon>② <ion-icon name="icon-sample" [attr.aria-hidden]="sampleFlag ? true : false"></ion-icon>
|
|
| 3 | フォーカスをしたい | tabindex="0" | ■固定値<p tabindex="0">サンプルテキスト</p>■動的に切り替える <p [attr.tabindex]="sampleFlag ? '0' : '-1'">サンプルテキスト</p>
|
|
| 4 | フォーカスをしたくない | tabindex="-1" | ■固定値<p tabindex="-1">サンプルテキスト</p>■動的に切り替える <p [attr.tabindex]="sampleFlag ? '0' : '-1'">サンプルテキスト</p>
|
|
| 5 | 画像を読ませたい | alt="読ませたい文言" | <img src="sample.png" alt="'サンプル画像'" /> |
|
| 6 | テキストをひとまとまりで読ませたい | ・各OS用に対応をする 【iOS】role="text" 【Android】tabindex="0" キーボード操作時に影響が出るため、キーボード操作時はtabindex="-1"にする |
sample.html<p role="text" tabindex="0">1行目のサンプルテキスト。<br>2行目のサンプルテキスト</p>sample.ts if(キーボード操作時){ element.setAttribute('tabindex', '-1'); } else{ element.setAttribute('tabindex', '0'); } |
|
| 7 | 変更をアナウンスしたい | role="status" aria-live="assertive" |
sample.html<p role="status" aria-live="assertive" [innerHTML]="sampleText"></p>sample.ts if(ボタン押下時){ this.sampleText = 'ボタンを押下したよ' } else{ this.sampleText = '' } |
|
| 8 | スクリーンリーダー使用時のみ読ませる | sr-onlyクラスを作成 | プロジェクトで行ったVoiceOver対応(読み方の変更)を参照 |
実装時の考慮点
・要素に正しくフォーカスが当たるか。
cssのプロパティの影響で当たらない場合があるため。
・要素を読み上げられるか。
・スワイプ操作で次/前の要素に移動できるか。
・通常使用時と同様に、アクションする要素がダブルタップでアクションする。
目的の要素にフォーカスが当たっているように見えて、アクションしない子要素などに当たっている場合があるため。
・アクセシビリティ用属性はタグ内の末尾につける
※形式統一のため