きっかけ
SPAはパフォーマンスの観点や制作コストの観点から、近年多くのサイトで採用されています。
数ヶ月前にこのSPAのアクセシビリティについて少し調査をする機会がありましたが、W3Cでもまだ作業中で指針が出ていないようでした。
先日とある勉強会に参加し、その中でこの件に触れる時間があったので、こちらのページを紹介しました。
Single page applications, Angular.js and accessibility
今回あらためて読んでみると参考になる内容だと思いますので、こちらに日本語訳を掲載したいと思います。(勝手に)
ただし書き
- だいぶ長いので、何回かに分けて掲載します。
- 資料として使えることを第一に考えて、
- 逐一完訳しません。ところどころサマライズして省略します。
- 言い回しや文体はあまり気にせず、箇条書きにできるところはそのようにします。
では、ここから翻訳スタート。Part1 はイントロ部分だけ翻訳を掲載します。
アクセシブルな Angular.js プロジェクトを作成するには
アクセシブルなSPAのベストプラクティスを提示するために、フロントに Angular.js を、バックエンドに Firebase を使ってAccessibility Ticket Tracker Application というサンプルプロジェクトを作成、公開した。共有するので、アクセシビリティについてどんなチャレンジがあるか、見て欲しい。
GitHubでソースを公開してる。
何を学べるか
はじめる前にお断り
このチュートリアルはAngular.js をアクセシブルにするために必要なことのすべてを網羅的に記述するものではない。多くのケースで共通するであろうアクセシビリティ上のチャレンジをウォークスルー形式で見ていく。
以下の内容で構成
- 文書構造、ナビゲーション、キーボードのアクセシビリティ
-
フォーカスを管理する
-
不可視テキスト
-
ARIA ライブ
-
Angularの ngAria と ARIA 一般
上記各項翻訳ができしだいリンクします。
必要な知識など
- Angular.jsアプリケーションの基本
-
GitHubのコードを動かすなら、Firebase と AngularFire を使う Angulra.js アプリのビルド方法についての基本理解。Firebase と Angular.js appのセットアップについてはこちらにグレートな記事がある。
この記事の目的は、
– SPAのアクセシビリティ対応に関するベストプラクティスを示すこと、
– およびSPA(とくにAngular アプリ) の開発者が考慮すべきアクセシビリティ的なチャレンジ(基本から中級レベル)を明らかにすること。
である
注記 :
この記事はAngularにかなり特化した内容になっており、例示されたコードを追うには Angularの知識が必要ではあるものの、提示する基本的な考え方の多くはSPAかどうかに関わらず、すべてのアプリに共通するものだ。
Part1 は以上です。
Part2 では 「文書構造、ナビゲーション、キーボードのアクセシビリティ」を掲載します。