このドキュメントではKARTEで配信されるアクションのアクセシビリティ対応方法について記載しています。

アクション上のHTML/CSS/JavaScriptの編集はテンプレートのカスタマイズにあたるため、サポート対象外となります。

KARTEで配信されるアクションのアクセシビリティ対応

KARTEで配信されるアクションでアクセシビリティ対応を行う場合、前提としてアクセシビリティを考慮しながらアクションのHTML/CSSを記述する必要があります。
アクセシビリティを考慮したHTML/CSSを作成するには、Web Content Accessibility Guidelines (WCAG)などを参考にしてください。

またアクセシビリティについての基礎知識については、ウェブアクセシビリティ基盤委員会等をご確認ください。

※テンプレートとしてアクセシビリティに対応したものを使っている場合でも、変数設定の内容に応じてアクセシビリティ対応ができていない状態になってしまう可能性があります。下記は留意が必要な変数の一例です。

  • テンプレート上で設定可能な色
  • テンプレート上で設定可能な画像
  • テンプレート上に記載されるテキストの内容

スクリーンリーダーへの対応

KARTEで配信されるアクションをスクリーンリーダーなどの支援技術（iOSのVoiceOverやAndroidのTalkBackなど）から利用できるようにするためには、前提としてアクセシビリティを考慮したHTML/CSSを記述する必要があります。

以降ではKARTEで配信されるアクション上で、アクセシビリティの観点に基づいた対応を例示します。

下記の例はスクリーンリーダー対応の一例に過ぎず、配信されるアクションに内容に応じて必要な対応内容は異なります。またこの例のみを満たすことでスクリーンリーダーへの対応を保証するものではありません。

対応例1: テキストによる代替

  • 関連するガイドライン
    • ガイドライン 1.1 テキストによる代替

      すべての非テキストコンテンツには、大活字、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、テキストによる代替を提供すること。

対応例1-1: 適切な代替テキストを設定する

  • 観点 アクション上に設定されている画像リソースやボタン、閉じるボタン等に、適切にalt属性等でテキストによる代替が設定されているか？
  • 以下は適切な設定がされている例です。
<a href="/items/123">Aを購入する</a>

<a href="/look/2018ss"><img src="..." alt="carte Look Book 2018SS"></a>

<button type="button" class="karte-close">閉じる</button>

<button type="button" class="karte-close"><img src="..." alt="閉じる"></button>
  • 画像で適切でない例として、画像の内容がaltに設定されていない、もしくは画像その内容を説明しないような内容が設定されている、文字列の画像を設定している場合にalt属性と記述内容が異なるといった場合も挙げられます。
<img src="..." alt="画像1">
  • またボタン等で適切でない例として、button要素ではなくi要素やdiv要素としてボタン、閉じるボタン等が実装され、代替テキスト等も設定されていない場合が挙げられます。詳細は対応例2: ナビゲーション可能 をご確認ください。

対応例1-2: 不適切な代替テキストを設定しない

  • 観点装飾目的の画像で、alt属性が不用意に設定されていないか？

  • 以下は装飾目的の画像で、適切な設定(alt属性に空の文字列が設定)がされている例です。

<img src="..." alt="">
  • 適切でない例として、装飾目的の画像でもalt属性が設定されている場合が挙げられます。
<img src="..." alt="画像1">

対応例2: ナビゲーション可能

  • 関連するガイドライン

対応例2-1: リンクの目的を判断できるようにする

  • 観点 アクション上のリンク等で、リンクの目的がリンクのテキストやコンテキスト等で判断可能な内容になっているか？
  • 以下は画像のリンクがある場合に、alt属性で画像のリンクの目的をimg要素に設定している例です。
<a href="https://example.com">
   <img src="..." alt="example.comへ遷移" /> 
</a>
  • また適切でない例として、以下のようなボタン等のUIがdiv要素等で実装されている場合が挙げられます。この場合div要素で実装されたUIがボタンとして認識されない、キーボードから操作できない等のアクセシビリティ上の問題が生じるため、ボタンとして操作対象としたいUIについてはbutton要素として実装することを推奨します。
<div krt-on:click="onClick()">
   <img src="..." alt="example.comへ遷移" /> 
</div>

対応例2-2: HTML要素の順序を表示順序と一致させる

  • 観点 アクション上に表示されている要素がスクリーンリーダーで読み上げられた場合でも意味が通じるか？操作性を損なわせない順序で要素にフォーカス可能になっているか？
  • この内容はアクションの実装内容にも依存しますが、HTML上のコンテンツの順序が視覚的な順序と一致していないような場合には、スクリーンリーダー等の利用時に支障をきたす場合があります。

KARTE for Appでの対応

KARTE for Appで配信されるアクションのスクリーンリーダー対応については、Developer Portalをご確認ください。

その他の対応

通常のHTML/CSSを使った記述に加えて、アクセシビリティのためのより発展的な技術であるWAI-ARIAを使用することもできます。