ページをアクセシブルにする.
すべての画像に説明を付け、見出しを順序通りに保ち、色の上のテキストを読みやすくします。スクリーンリーダーやキーボードの利用者がページを使えるようにします。このページではDXPR Builderが代行する内容、自分で追加する内容、公開前に結果を確認する方法を列挙します。
Builderが代行する内容
- 実際のテキスト構造。TextエレメントはCKEditor 5を使い、実際の見出し(Heading 1からHeading 6)、段落、リストを使います。
- 対話エレメントのARIA。タブは
role="tablist"とrole="tab"を持ちます。プログレスバーとサークルカウンターは最小・最大・現在値とともにrole="progressbar"を持ちます。Collapseパネルのタイトルは、パネルが開いているかを報告するボタンです。 - アクセシブルなエディターダイアログ。すべての設定ダイアログは
role="dialog"で、aria-modalとタイトルを持ちます。 - エディターのキーボードアクセス。 Enterでエレメントの設定を開き、Escapeでパネルを閉じるかエレメントの選択を解除し、Ctrl(MacではCmd)と矢印キーでエレメントを移動します。キーボードショートカットのリファレンスを参照。
レイアウトエレメント(セクション、ロー、カラム)は通常のdivエレメントです。スクリーンリーダーが読み上げる構造は見出しから来ます。
画像に代替テキストを付ける
- 画像を指してMore > Settingsをクリックします。
- 開くのはSEOパネルです。
- 説明を入力するのはAlt attributeです。画像の内容とページにある理由を1〜2文で、"image of"なしで。
- ダイアログでSaveをクリックし、次にコンテナバーでSaveをクリックします。
もしAlt attributeが空なら、Imageエレメントはaltをまったく書き出さず、スクリーンリーダーがファイル名を読み上げることがあります。純粋に装飾の画像には、代わりにセクションBackground imageをStyleパネルで使います。スクリーンリーダーは背景を飛ばします。Imageカルーセルは全画像で1つのAlt attributeを使うため、セット全体を説明します。
AI生成画像はプロンプトを代替テキストとして開始します。要求ではなく結果を説明するよう編集します。画像の代替テキストを参照。
見出しを順序通りに保つ
- ページにHeading 1を1つ付けます。多くのテーマはページタイトルをHeading 1として表示するため、Builderで2つ目を追加しません。DXPR CMSでは代わりに1ページでそのタイトルを隠せます。編集フォームでDXPR Theme Settingsを開き、Page Title(DXPR Hide Regions配下)にチェックします。
- Textエレメントのツールバーで見出しリストを使い、セクションタイトルをHeading 2、サブセクションをHeading 3にします。レベルを飛ばしません。
- リストには入力したダッシュではなくツールバーのリストボタンを使います。
3つのエレメントは見出しレベルが固定です。JumbotronのTitleは常にHeading 1、CardのTitleは常にHeading 5、各CollapseパネルのToggle titleはHeading 2です。
色のコントラストを確認する
カラーピッカーはテーマのパレットを提供しますがコントラストは測定しないため、自分で確認します。
| テキスト | 最小比率(WCAG AA) |
|---|---|
| 本文テキスト | 4.5:1 |
| 大テキスト(24 px、または約19 pxの太字) | 3:1 |
写真の上のテキストには、画像全体で比率を保てるよう写真を暗くします。セクションのBackground effectsパネルでBackground effectをGradientに設定し、半透明の濃いStart colorとEnd colorを使います。背景に手順があります。
説明的なリンクとボタンを使う
ButtonとLinkエレメントは入力したテキストをリンクテキストとして表示します。リンクの動作を書きます(「Register for Open Day」)。"click here"は書きません。LinkエレメントにはTitle attributeがSEOパネルにあり、長い説明に使えます。
表示内容
- コンテナバーでView modeをPreviewに設定し、エディターコントロールが邪魔にならないようにします。
- Tabを押してページを移動します。すべてのボタン、リンク、タブに到達でき、目に見えるフォーカスリングが表示されます。
- ブラウザのアクセシビリティ監査やaxe拡張機能などの自動チェッカーで、公開ページのBuilderコンテンツにエラーが出ません。
クリーンなレポートが出ない場合
- チェッカーが代替テキストなしの画像を報告します。ImageエレメントのAlt attributeが空です。入力するか、装飾画像をセクション背景に移動します。
- チェッカーが2つのHeading 1を報告します。JumbotronのTitleは常にHeading 1で、テーマのページタイトルと並びます。代わりにHeading 2のTextエレメントを使います。
- チェッカーが飛んだ見出しレベルを報告します。CardのTitleは常にHeading 5です。空のままにして、適切なレベルのTextエレメント見出しでカードを始めます。
- チェッカーが写真上のテキストの低コントラストを報告します。上記のグラデーションを追加するか、濃いテキスト背景を選びます。
次のステップ
- キーボードショートカット：エディターのショートカット一覧。
- ファイアウォールとデータレジデンシー：その他のコンプライアンストピック。