アクセシビリティ基準を満たすようにコンポーネントを調整する

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間：3分

    • Web コンテンツアクセシビリティガイドライン (WCAG) 2.1 を満たすようにコンポーネントを調整します。テーマビルダーでコンポーネントを編集しているときに警告記号が表示された場合は、コンポーネントが色のコントラストのガイドラインに準拠していないことを示します。

    始める前に

    必要なロール：ui_builder_admin

    詳細なロールの詳細については、「 Granular admin roles」を参照してください。

    このタスクについて

    テーマビルダー でコンポーネントを編集しているときに、コンポーネントが色のコントラストに関する Web コンテンツアクセシビリティガイドライン (WCAG) 2.1 に準拠していないことを示す警告記号 (アクセシビリティエラー) が表示される場合があります。コンテンツと UI 変数のターゲットを テーマビルダー する WCAG 2.1 のコントラスト比は 3:1 です。この比率は、明るい画面色と暗い画面色のコントラストと、それらがユーザーインターフェイスにどのように関連しているかを決定します。最初の桁は明るい色のレベルを示し、2 桁目は暗い色の相対的なレベルを示します。3:1 のしきい値は、視覚障害のあるユーザーに最適な可視化を提供します。詳細については、 WCAG 2.1 の W3C 推奨事項サイトを参照してください。

    アクセシビリティ違反の合計数は、アクセシビリティインスペクターパネルの横にある赤い番号の付いたバッジ ( アクセシビリティインスペクターの番号バッジ)に表示されます。

    手順

    1. [エディター] ページから、次の表に示す 2 つの方法のいずれかでアクセシビリティ違反にアクセスします。
      オプション説明
      アクセシビリティインスペクターから
      1. アクセシビリティインスペクターアイコン を選択すると、アクセシビリティエラーのあるコンポーネントのリストが表示されます。赤いバッジは、テーマ内のアクセシビリティの問題の数を示します。
      2. アクセシビリティに関する警告 アクセシビリティに関する警告を選択します。 記号をクリックすると、改善が必要なコンポーネントの状態に関する警告の説明が表示されます。
      3. 鉛筆アイコン 改善するコンポーネントステータスの横) を選択します。
        注:
        [コンポーネントエディター] ページが表示され、構成可能なスタイルパネルに、選択したコンポーネントで使用できる編集可能なフックが表示されます。
      [コンポーネントスタイル] メニューから
      1. [ 編集中 ] タブを選択します。
        コンポーネントスタイルの [編集] タブ。
      2. アクセシビリティ警告記号を表示するコンポーネントを選択します。
        アクセシビリティに関する警告
      3. 構成可能なスタイルパネルで、アクセシビリティ警告記号を選択して警告の説明を表示します。
        アクセシビリティ警告の説明。
      4. 警告メッセージに示されているように、 鉛筆アイコンを選択してコントラストの問題を改善できます。
        注:
        [コンポーネントエディター] ページが表示され、構成可能なスタイルパネルに、選択したコンポーネントで使用できる編集可能なフックが表示されます。
    2. コンポーネントエディターでアクセシビリティ警告記号を選択すると、問題を修正するための詳細情報が表示されます。
      アクセシビリティに関する警告
    3. 警告のリンクから選択して、コントラストの問題を修正します。
      カラーピッカーが開きます。
      注:
      カラーピッカー内の [アクセスできない選択肢を非表示にする] スライダーを選択すると、Web コンテンツアクセシビリティガイドライン (WCAG) ガイドラインに基づいて色の選択肢をアクセス可能と識別された色に限定できます。
    4. オプション: 必要に応じて、元に戻す記号を選択して変更を元の色に戻します。
      色の変更を元に戻す
    5. 変更を完了し、アクセシビリティ警告記号が表示されなくなったら、[ 変更を保存] を選択します。
      たとえば、コントラスト比違反を通過する色を選択すると、カラーピッカーで警告記号が緑色に変わります。