近年、社会的ニーズやユーザビリティ向上の観点から、Web開発においてアクセシビリティに配慮することの重要性が高まっています。
その背景のひとつとして、2024年に施行された「改正障害者差別解消法」により一般企業に対しても「合理的配慮の提供」が義務化されたことが挙げられます。
また、直近ではJavaScriptフレームワーク「Angular」においても「Angular Aria」というアクセシビリティに関連する機能が追加されました。こうした動向からは、Angularを利用するような高機能なWebアプリケーションにおいても、アクセシビリティを意識する機会が増えていることがうかがえます。
JavaScript UIライブラリ「Wijmo（ウィジモ）」でも、これまで継続的にアクセシビリティの向上に取り組み、最新バージョン「2026J v1」では主要なコントロールがウェブアクセシビリティの国際基準「WCAG 2.2」のレベルAAに対応しました。
本連載の前編では、WCAGの概要と対応が求められている背景について解説しました。
後編となる今回は、WijmoにおいてWCAGの基準がどのように達成されているか、具体例を交えてご紹介します。
目次
FlexGridにおけるWCAG達成基準の実現例
前回の記事では、WCAGには「適合レベル」が設定された多数の「達成基準」が定義されており、Webコンテンツは対応するレベルに応じて、これをクリアする必要があることをみました。
今回はWijmoの代表的なコントロールである「FlexGrid（フレックスグリッド）」を例にとって、実際に達成基準がどのようにクリアされているかをみていきます。
ここでは多数ある達成基準のうち2つについてご紹介します。
達成基準1.3.1 情報及び関係性
1つ目の例として、達成基準「1.3.1 情報及び関係性」についてみていきましょう。
| 原則 | ガイドライン | 達成基準 | 適合レベル |
|---|---|---|---|
| 知覚可能 | 1.3 適応可能 | 1.3.1 情報及び関係性 | A |
この項目では、Webコンテンツ上の要素の構造や関係性が視覚的（または聴覚的）に表現されている場合に、その提示方法が変わったとき（たとえばスクリーンリーダーを使用するとき）にも正しく伝わることが求められています。
達成のためには、コンテンツの役割に合ったHTMLを設定することや、意味が理解できるような順序で要素を配置するといった対応が求められます。
WAI-ARIA
では、WijmoのFlexGridのように高機能で複雑なUIコントロールでは、どのように対応しているのでしょうか。FlexGridでは「WAI-ARIA（Web Accessibility Initiative Accessible Rich Internet Applications）」という仕組みを使って対応しています。
WAI-ARIAはW3Cによって定められており、この仕組みを利用することで、コンテンツの構造や意味合いをHTMLだけで表現することが難しい場合に、HTML属性として意味を追加することができます。WAI-ARIAで追加する属性は、ロール（役割）、プロパティ、状態、の3種類があります。
実際にFlexGridでどのように設定されているかみてみましょう。
WAI-ARIAの設定状況はブラウザの開発者ツールの「要素」タブにある「アクセシビリティ」のパネルで簡単に確認することができます。「ユーザー補助ツリーを表示する」のトグルボタンをONにすることで、コンテンツの構造を見通し良く確認できます。
さらにグリッドの各要素をみると、グリッド全体にはrole=”grid”、列ヘッダーセルにはrole=”columnheader”、データセルにはrole=”gridcell”といった「ロール」が設定されていることが確認できます。また、aria-rowcount（行の総数）、aria-colcount（列の総数）、aria-colindex（列の位置）などの「プロパティ」、aria-required（必須）、aria-readonly（編集不可）などの「状態」を表す属性も設定されています。
スクリーンリーダーでの読み上げ
以下の動画は、実際にスクリーンリーダーを使ってFlexGridを読み上げた様子です。セル内のテキストだけでなく、グリッドの構造を反映して行／列の情報や、列ヘッダー名が併せて読み上げられていることがわかります。
※ 動画を再生すると音声が流れますので、ご注意ください。
達成基準2.1.1 キーボード
2つ目の例として、達成基準「2.1.1 キーボード」についてみていきましょう。
| 原則 | ガイドライン | 達成基準 | 適合レベル |
|---|---|---|---|
| 操作可能 | 2.1 キーボード操作可能 | 2.1.1 キーボード | A |
この項目では、Webコンテンツ上の機能がマウスやタッチ操作に依存せず、キーボードからも操作可能であることが求められています。主にマウスやタッチ操作が困難な視覚や運動機能に障害のある方が、キーボードを使用してコンテンツを利用できるようにするための項目です。
FlexGridで利用可能なキーボードショートカット
FlexGridでは、この項目に対応するため多数のキーボードショートカットが用意されています。
ここではよく使うものをピックアップしてご紹介します。
障害の有無にかかわらず、便利な機能となっておりますので、ぜひご確認ください。
移動・選択
| キー | 動作 |
|---|---|
| 矢印（↑↓←→） | セル選択の移動 |
| Shift＋矢印（↑↓←→） | 選択範囲を拡大 |
| Ctrl＋Home／End | 最初／最後のセルに選択を移動 |
| Tab | グリッド外の次の要素にフォーカスを移動 |
編集
| キー | 動作 |
|---|---|
| F2 | 編集モードの開始 |
| Esc | 編集のキャンセル |
| F4 | ドロップダウンの展開 |
| Space | チェックボックスの切り替え |
フィルタ・ソート・ピン留め
バージョン「2025J v1.1」では、列ヘッダー上のアイコンに対応する機能がキーボードショートカットのみで利用できるようになりました。
| キー | 動作 |
|---|---|
| Ctrl＋Shift＋F | フィルターダイアログの表示 |
| Ctrl＋Shift＋S | 列のソート |
| Ctrl＋Shift＋P | 列のピン留め |
並べ替え・リサイズ
バージョン「2026J v1」では、ドラッグ操作に対応する機能もキーボードショートカットのみで利用できるようになりました。
| キー | 動作 |
|---|---|
| ヘッダーにフォーカスした状態で Shift＋矢印（↑↓←→） | 行／列の並べ替え |
| Alt＋矢印（↑↓←→） | 行／列のリサイズ |
さいごに
今回は、WijmoにおいてWCAGの基準がどのように達成されているか、FlexGridでの具体例を交えてご紹介しました。
ウェブアクセシビリティは今後も重要性が高まるとともに、利用環境や技術の発展にともなって求められる対応も変化していくことが予想されます。しかしながら、高機能なUIに対して基準を満たすように対応することは容易ではありません。
そこで、あらかじめWCAGに配慮して設計されたUIライブラリであるWijmoを利用することで、最新の規格に準拠するアクセシビリティを備えたWebコンテンツの開発にかかる工数の削減が期待できます。
製品サイトでは、Wijmoの機能を手軽に体験できるトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。