プログレッシブ・エンハンスメントと ARIA チェックリスト

JavaScript が利用できない場合でも動作する動的機能を提供する。

このボードは Web のプロフェッショナル向けのレビュー用チェックリストです。機能がリリースされる前に、動的なページやコンポーネントに対して実行する 17 項目のチェックで、下にある静的な基盤、障害時の挙動、更新がユーザーに気づかれるかどうか、そしてスクリーンリーダーやキーボード操作のユーザーが利用できるかどうかを確認します。

静的な HTML の基盤：

• 必須のコンテンツ、リンク、メタデータが初期の HTML に含まれて配信される

• JavaScript が利用できない場合でも、ページは単に閲覧できるだけでなく操作できる

• 動的な機能は、基盤の動作を置き換えるのではなく、その上に重ねて追加される

• 検索エンジンのクローラーが到達できない JavaScript のみのウィジェットに必須の要素が埋もれていない

グレースフルデグラデーション:

• すべてのリクエストに明確なエラー処理があり、失敗が放置されたり終わらないローディング状態になったりしない

• 動的な機能が完全に失敗した場合に備えて、機能的なフォールバックが用意されている

• 動的な更新後も、戻る・進むボタンが期待どおりに動作する

• 見た目が似ている要素は同じように動作する

更新を可視化する:

• フィードバックは、ユーザーが操作した要素の隣に表示される

• 更新はサイズ、コントラスト、または動きで注意を引く

• 一時的なメッセージは永続的な表示を残す

• 操作に同時に二か所を注視する必要がない

ARIA とスクリーンリーダーのアクセシビリティ：

• カスタムウィジェットに適切な ARIA ロールが設定されている

• 構造的な領域にはランドマークや HTML5 のセマンティック要素が使用されている

• 動的に更新される領域には aria-live が付与されている

• 実際のスクリーンリーダーでテスト済み

• キーボードのみの操作で全体を移動でき、フォーカスが失われたり閉じ込められたりしない

ボードの使い方：

• ご自身のコピーを作成するには、ボード > 詳細 > 複製 を開いてください。無料の Miro アカウントがあれば十分です。

• 項目にチェックを付けるには、ボックスをダブルクリックして x と入力してください。

• 各動的な機能、コンポーネント、スプリントごとにカードを複製してください。

このテンプレートは Interaction Design Foundation のコース UX Essentials: アクセシビリティ、SEO、動的インターフェイス に付属しています。