アクセシビリティ

現在、Wijmoのメインコントロール(FlexGrid、Inputなど)は最新のWCAG規格に準拠しています。

これらのコントロールを特別な設定なしで使用すれば、アクセシビリティテストツール(Axe-DevToolsなど)を通過し、スクリーンリーダー向けにより豊かで正確なコンテンツ(NVDAなど)を提供できます。

これにより、身体的に不自由な方々がWijmoを利用する際の体験が大幅に向上し、国際的なアクセシビリティガイドラインを満たす申請も容易になります。

コントロールのアクセシビリティを支える主なポイントは以下の通りです。

DOMノード向けのWAIラベル( 「role」「aria-labelledby」「aria-descriptedby」「aria-disabled」など)を包括的に強化し、これらのラベルに対応する値の正確性の修正も行っています。
UIデザインに影響を与えることなく、入力コントロールにラベルが表示されました。
コントロールのカラーコントラストをできるだけ4.5:1の比率に合わせて調整しました。
システムのハイコントラストモードでの操作のUIパフォーマンスが向上しました。
補助的なキーボード動作が追加され、マウスに頼らずに操作できるようになった。

また、過度に柔軟なユーザーシナリオはWijmoの直接的なサポートには適さない場合がありますが、目標達成のためのいくつかの可能な解決策も提供しています。

シナリオ:autocomplete属性の追加

HTML属性は、ウェブ開発者がautocompleteユーザーエージェントフォームフィールドの値を自動で入力する支援や、フィールドで期待される情報の種類についてブラウザにガイダンスを提供する必要があります。

例えば、ComboBoxコントロールに「autocomplete=email」を追加したい場合です。

// 1. ComboBoxから入力要素を取得する
const input = combobox.inputElement;
// 2. autocomplete属性を設定する
input.setAttribute("autocomplete", "email");

API参照：ComboBoxクラス | Wijmo API

シナリオ:動的ステータスメッセージ

ステータスメッセージは重要な内容変更を知らせ、スクリーンリーダーで読みます。

このタイプの通知メッセージは完全にユーザーシナリオに依存し、ユーザーによってカスタマイズされるため、ここに参照実装を提供します。

例えば、ComboBoxのテキストが変わったときにスクリーンリーダーに「現在の値:{何か}」と表示させたい場合、

// 1. HTML部分:通知DOM要素を準備する
<div id="valueAnnouncer" role="status" aria-live="polite" aria-atomic="true"></div>

// 2. CSS部分: 通知を非表示にしてレイアウトに影響を与えないようにする
<style>
#valueAnnouncer { width: 0; height: 0; overflow: hidden; }
</style>

// 3. JS 部分: コンボボックスが変更されたときに通知のテキストコンテンツを変更する
const announcer = document.getElementById('valueAnnouncer');
combobox.textChanged.addHandler((sender, e) => {
    let text = sender.text; // display value
    announcer.textContent = `Current value: ${text}`;
});