Ext JS 5.0.1は、第508条および ARIA に準拠するために必要なツールを開発者に提供することにより、アクセシビリティの高い JavaScript アプリケーションの作成を可能にします。Ext JS を使用することで、アプリケーション開発者はウェブ閲覧用の支援技術を利用している人々が使える UI を簡単に作成できます。
アクセシビリティの概要
ソフトウェアアクセシビリティとは一般的に、アクセシビリティは以下の対象者がアプリケーションの機能とコンテンツを利用できることを意味します。
- 特に視覚障害者
- コンピュータを使用するためにスクリーンリーダーなどの支援技術に依存している人
- マウスを使用してアプリケーションを操作できない人
1998年、米国議会は一般に第508条と呼ばれる「改正1973年リハビリテーション法第508条」を可決しました。第508条は、連邦政府にすべての電子情報を障害者がアクセスできるようにすることを義務付けています。第508条はアクセシビリティは米国政府関係機関向けのアプリケーションを作成する者に対する要件です。
ところが、追加機能によって多くのユーザーに接触できるため、すべてのアプリケーションにとってもメリットがあります。ウェブアプリケーションは、Web Accessibility Initiative（WAI）の「Accessible Rich Internet Applications Suite」、別名 WAI-ARIA もしくは「ARIA」の中に記されているガイドラインに従うことにより、第508条に準拠する上で大きな一歩を踏み出すことができます。
Ext JS のアクセシビリティ
Ext JS の組み込みタブのインデックス付けやフォーカス機能によって、ブラウザは思い通りに Tab キーの利用やフォーカスができます。このアプローチによって、デフォルトキーボード操作を可能にするため、コンポーネントをブラウザが認識できるアイテムに変換します。
Ext JS のアクセシビリティのサポートは、キーボード操作とフォーカス、DOM 属性の2つの主な目標を念頭においています。
Ext JS 5.0.1では、フォーカスとキーボード操作機能はフォーカス可能として知られるクラスレベルのプロパティによって「常に利用」できます。これによって、すべてのキーボード対応コンポーネントがタブ付けされていればユーザーとやりとりを行うことができます。
これは、開発者が追加で変更することなく、フォーカスがすべてのアプリケーションの一部となっていることを意味します。
フォーカスのスタイル設定
フォーカススタイル設定は、要素がキーボードイベントや、その他のユーザー入力を受け付ける準備ができていることを視覚的に示す方法と説明できます。これはアクセシビリティとキーボード操作に大きく依存しているパワーユーザーにとって重要（かつ必要）です。
このフレームワークは現在フォーカスされているコンポーネントを明確に示し、フォーカスされているコンポーネントが変更されると更新します。これは通常フォーカスされた要素の内側の枠線、本体の枠線とみなされます。これはアプリケーションのテーマによって若干異なります。これらの視覚要素をコントロールするために、フォーカスに関連した複数の Sass 変数と mixin パラメータをコントロールできます。
ボタン
旧リリース版では、ボタンフォーカスのスタイル設定はホバー時のスタイル設定と同じで、一部のユーザーを混乱させていました。5.0.1では、「内側」の枠線を使用してフォーカスを示せるようにボタンを変更しました。これは、Neptune や Crisp テーマでボタンの外側の枠線内に直接 1px の実線枠線を引くことになります。
Classic テーマでは、フォーカス枠線は Classic “Windows” のようにボタンの内側の要素の周りに点線としてレンダリングされます。
デフォルトのホバー状態とは違ってホバーまたは押下された場合のフォーカスされたボタンのスタイル設定をコントロールする必要があります。このために、「フォーカスオーバー」と「フォーカス押下時」の2つのボタン状態の SASS 変数を追加しました。
タブ
タブは今まではフォーカスを視覚的には示していませんでした。Ext JS 5.0.1では、タブはボタンと同様に取り扱われています。フォーカスは Neptune/Crisp テーマでは実線枠線、Classic では点線の本体外枠で示されます。
Crisp:
Classic:
ボタンのように、タブには「フォーカスオーバー」と「フォーカス有効時」のフォーカス状態をコントロールする2つの SASS 変数が追加されています。
グリッド
フォーカスされたグリッドセルにも以下のような明確なフォーカス枠線が含まれます。
さらに、グリッドカラムヘッダーは以下のように個別にフォーカスできます。
フォーカススタイル設定のカスタマイズ
キーボードナビゲーションのサポートでより多くのユーザーがさらに多くのアプリケーションにアクセスできるようになるため、好ましい変化が期待できます。同時に、すべてのアプリケーションには異なるニーズや要件があることも理解しています。場合によっては、デフォルトのフォーカススタイル設定が好ましくないこともあるため、SASS 変数や mixins の堅牢な API を使用してコンポーネントのフォーカススタイル設定をカスタマイズできるようにしています。
フォーカススタイル設定を行う必要のある変数はすべて名前に「フォーカス」を含んでいるので、ドキュメントで見つけるのは難しくはありません。スタイル設定したいコンポーネントのクラスのドキュメントに進み、「CSS 変数」セクションにスクロールダウンするだけです。
例えば、「デフォルト」ボタン UI のフォーカス枠線の色のスタイルを設定するには、$button-default-inner-border-color-focus SASS 変数を使用します。アプリケーションでの SASS の使用に関する詳細は、テーマ設定ガイドを参照してください
キーボードナビゲーション
アプリケーションのフォーカス可能なコンポーネントとはマウスを操作せずにキーボードを使用して完全に操作できます。Ext JS では、これは Tab キーを押すと、フォーカスを URL バーで始まるアイテムからアプリケーションドキュメントの本体内の次にフォーカスできるアイテムに進むことを意味します。
ただし、ツールバーなどの特定のコンテナは動作が若干異なります。Tab キーはツールバー間のフォーカスを移動させ、矢印キーはツールバー内のフォーカスを移動させます。このように、WAI-ARIA 規格は必要以上に Tab キーを押す必要をなくすことで操作性を向上させることができます。
この例では、複数のボタンを含む2つのツールバーを見ていきましょう。これはフォーカス可能なアイテムの例です。
ツールバー1に Tab キーを押すと、上記のようにボタン1にフォーカスします。続けて Tab キーを押すとフォーカス可能な次のアイテムに移動します。この場合、次のフォーカス可能なアイテムであるボタン A がツールバー2内に残ります。フォーカス可能なアイテムはボタン、タブ、フォームフィールド、グリッドなどです。
代わりに、「shift + tab」で逆の順序に tabindex に従い、上記の同じルールに従います。例として、ツールバー2内で「shift + tab」を押すとフォーカスがツールバー1に戻ります。
上記のツールバーのいずれかに入ると、矢印キーを使ってボタンを移動することもできます。矢印キーはツールバー内のすべてのボタンをループします。ボタン4に達すると、フォーカスはボタン1にループして戻ります。
Tab キーでツールバーを終了し、「shift + tab」を押してツールバーに戻る場合、フレームワークは、既にフォーカスされていたボタンにフォーカスを戻します。これによって、ツールバーやその他のフォーカス可能なコンテナ内に状態のフォームを作成します。
注意：入力フィールドに入ると、矢印キーナビゲーションはそのフィールド内でだけ動作します。フィールドを終了するには、Tab または Shift-Tab キーを押す必要があります。
DOM 属性
コンポーネントの DOM 要素は、要素の種類、状態、記述に関する意味的情報を提供する属性を使用する必要があります。このような属性は支援技術で使用され、スクリーンリーダーからユーザーに言語的な手がかりを与えることができます。属性は2種類に分けられます。
ARIA Role
ARIA Role は、コンポーネントまたは要素のタイプを主に示すものです。ユーザーはコンポーネントとやり取りするため、Roleは不変です。Ext JS で最も使用される ARIA Role は Widget Role です。これらの Widget Role の多くは Ext JS コンポーネントに直接対応します。Widget Roleの例を以下に示します。
- ツールバー
- Tab バーとタブ
- チェックボックス
- ラジオボタン
- ボタン
- パンくずグループ
ARIA の状態とプロパティ
DOM 属性は、ユーザーインタラクションまたはアプリケーションの状態に対応して変更出来る属性です。“aria-checked” 属性はARIA の状態の一例です。これは、ユーザーがチェックを入れるとチェックボックスコンポーネントに適用されます。同様に、フォームフィールドの “aria-invalid” プロパティは ARIA プロパティの一例です。これは、バリデーションまたはユーザー入力に従って動的に変更できます。
以下の ARIA パッケージセクションで、ARIA の状態とプロパティについて説明します。
ARIA パッケージ
“ext-aria” パッケージは ARIA 状態とプロパティをサポートする個別の Cmd パッケージです。‘ext-aria’ パッケージは他のパッケージのように app.json requires ブロックに含めることができます。
次はその例です。
"requires": [
"ext-aria"
],アプリケーションの app.json ファイルを変更したら、アプリケーションを再ビルドするだけです。ビルド後に、上記の説明のようにコンポーネントには ARIA の状態とプロパティが含まれます。
つまり、“ext-theme-aria” テーマを利用している場合は “ext-aria” パッケージを直接必要としない場合があります。‘ext-theme-aria’ はデフォルトで ‘ext-aria’ パッケージを必要とします。次のセクションでは ‘ext-theme-aria’ の実装について説明します。
注意：上記のようなアプリケーションのビルドに精通していない場合、はじめにを参照してください。
ARIA のテーマ
“ext-theme-aria” はアプリケーションが視覚障害のあるユーザーにとって見やすくなるコントラストの強いテーマです。“ext-theme-aria”は即座に利用することも、拡張して外観をカスタマイズすることもできます。
Ext JS ARIA テーマをアプリケーションに組み込むには、theme ブロックを app.json で変更するだけです。次はその例です。
/**
* このアプリケーションのテーマの名前です。*/ "theme":"ext-theme-neptune",は次のようになります。
/**
* このアプリケーションのテーマの名前です。*/ "theme":"ext-theme-aria",アプリケーションの app.json ファイルを変更したら、アプリケーションを再ビルドするだけです。ビルド後に、アプリケーションは以下のように ‘ext-theme-aria’ テーマを利用します。
カスタムテーマの詳細は、Ext JS テーマガイドを参照してください。
注意：上記の説明に従ってアプリケーションをビルドすることに慣れていない場合、はじめにで詳細を参照してください。
結論
Ext JS 5.0.1 では、新しいフォーカスとキーボードナビゲーションを追加することで基本レベルのアクセシビリティをサポートする中核的な機能を導入しています。ARIA パッケージと ARIA テーマを追加することで、アクセス可能なアプリケーションを作成するためのより簡単なパスを提供します。今後のリリースでは、堅牢なアクセシビリティサポートを提供する機能の拡張に取り組んでいます。