--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/advanced/accessibility' title: 'ページをアクセシブルにする | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:25:05+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'すべての画像に説明を付け、見出しを順序通りに保ち、色の上のテキストを読みやすくします。スクリーンリーダーやキーボードの利用者がページを使えるようにします。このページではDXPR Builderが代行する内容、自分で追加する内容、公開前に結果を確認する方法を列挙します。' tags: - 'Pagina’s toegankelijk en vindbaar maken' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:25:05+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: ページをアクセシブルにする description: 'すべての画像に説明を付け、見出しを順序通りに保ち、色の上のテキストを読みやすくします。スクリーンリーダーやキーボードの利用者がページを使えるようにします。このページではDXPR Builderが代行する内容、自分で追加する内容、公開前に結果を確認する方法を列挙します。' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:25:05+0000' dateModified: '2026-10-24T11:25:05+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/advanced/accessibility' articleSection: 'Pagina’s toegankelijk en vindbaar maken' - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/advanced/accessibility' description: 'すべての画像に説明を付け、見出しを順序通りに保ち、色の上のテキストを読みやすくします。スクリーンリーダーやキーボードの利用者がページを使えるようにします。このページではDXPR Builderが代行する内容、自分で追加する内容、公開前に結果を確認する方法を列挙します。' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: ホーム item: 'https://dxpr.com/ja' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ja --- [Help Center](/ja/node/75)/[Documentation](/ja/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Pagina’s toegankelijk en vindbaar maken](/hc/documentation/learn-dxpr-builder/manage/accessible-findable) # ページをアクセシブルにする. Learn DXPR BuilderManage the sitePagina’s toegankelijk en vindbaar maken ## In this guide Related guides - [キーボードショートカット](/ja/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts) - [Firewall and data residency](/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall) すべての画像に説明を付け、見出しを順序通りに保ち、色の上のテキストを読みやすくします。スクリーンリーダーやキーボードの利用者がページを使えるようにします。このページでは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**)と矢印キーでエレメントを移動します。[キーボードショートカットのリファレンス](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts)を参照。 レイアウトエレメント(セクション、ロー、カラム)は通常の`div`エレメントです。スクリーンリーダーが読み上げる構造は見出しから来ます。 ## 画像に代替テキストを付ける 1. 画像を指して**More** > **Settings**をクリックします。 2. 開くのは**SEO**パネルです。 3. 説明を入力するのは**Alt attribute**です。画像の内容とページにある理由を1〜2文で、"image of"なしで。 4. ダイアログで**Save**をクリックし、次にコンテナバーで**Save**をクリックします。 もし**Alt attribute**が空なら、Imageエレメントは`alt`をまったく書き出さず、スクリーンリーダーがファイル名を読み上げることがあります。純粋に装飾の画像には、代わりにセクション**Background image**を**Style**パネルで使います。スクリーンリーダーは背景を飛ばします。Imageカルーセルは全画像で1つの**Alt attribute**を使うため、セット全体を説明します。 AI生成画像はプロンプトを代替テキストとして開始します。要求ではなく結果を説明するよう編集します。[画像の代替テキスト](/hc/documentation/learn-dxpr-builder/ai/image-alt-text)を参照。 ## 見出しを順序通りに保つ 1. ページにHeading 1を1つ付けます。多くのテーマはページタイトルをHeading 1として表示するため、Builderで2つ目を追加しません。DXPR CMSでは代わりに1ページでそのタイトルを隠せます。編集フォームで**DXPR Theme Settings**を開き、**Page Title**(**DXPR Hide Regions**配下)にチェックします。 2. Textエレメントのツールバーで見出しリストを使い、セクションタイトルを**Heading 2**、サブセクションを**Heading 3**にします。レベルを飛ばしません。 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**を使います。[背景](/hc/documentation/learn-dxpr-builder/element-settings/background)に手順があります。 ## 説明的なリンクとボタンを使う ButtonとLinkエレメントは入力したテキストをリンクテキストとして表示します。リンクの動作を書きます(「Register for Open Day」)。"click here"は書きません。Linkエレメントには**Title attribute**が**SEO**パネルにあり、長い説明に使えます。 ## 表示内容 1. コンテナバーで**View mode**を**Preview**に設定し、エディターコントロールが邪魔にならないようにします。 2. Tabを押してページを移動します。すべてのボタン、リンク、タブに到達でき、目に見えるフォーカスリングが表示されます。 3. ブラウザのアクセシビリティ監査やaxe拡張機能などの自動チェッカーで、公開ページのBuilderコンテンツにエラーが出ません。 ## クリーンなレポートが出ない場合 - **チェッカーが代替テキストなしの画像を報告します。**Imageエレメントの**Alt attribute**が空です。入力するか、装飾画像をセクション背景に移動します。 - **チェッカーが2つのHeading 1を報告します。**Jumbotronの**Title**は常にHeading 1で、テーマのページタイトルと並びます。代わりにHeading 2のTextエレメントを使います。 - **チェッカーが飛んだ見出しレベルを報告します。**Cardの**Title**は常にHeading 5です。空のままにして、適切なレベルのTextエレメント見出しでカードを始めます。 - **チェッカーが写真上のテキストの低コントラストを報告します。**上記のグラデーションを追加するか、濃いテキスト背景を選びます。 ## 次のステップ - [キーボードショートカット](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts)：エディターのショートカット一覧。 - [ファイアウォールとデータレジデンシー](/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall)：その他のコンプライアンストピック。