アクセシビリティ

出典：Calcite Design System (Beta) - Accessibility

アクセシビリティ

Calcite Components は W3C Accessibility Standards を活用して、作成するアプリケーションやエクスペリエンスが幅広い利用者に使用されることを保証します。

Calcite はアクセシビリティを考慮して作成されていますが、多様な利用者が構築したソリューションを操作、理解、使用できるようにするための追加の手順があります。

個人のためのデザイン

W3C アクセシビリティ標準の成果物は Web Content Accessibility Guidelines (WCAG) です。これは、Web エクスペリエンスが幅広い利用者によって利用されることを保証するために設けられた、国際的に合意された一連のガイドラインです。個人向けに設計する際の考慮事項には、次のようなものがあります。

自閉症スペクトラムの場合

✓ 簡単な文と箇条書きを使用してください。	x テキストの壁を作成しないでください。

スクリーン リーダーを使用している場合

✓ 説明的なリンクと見出しを書いてください。	x あいまいなリンクや見出しを書くことは避けてください。

視力が低下している場合

✓ 色、形、テキストを組み合わせて使用​​してください。	x 意味やステータスを伝えるために色だけを使用することは避けてください。

身体的、運動的に困難がある場合

✓ クリックできるアクションを大きくしてください。	x 精度を要求することは避けてください。

聴覚障害者または難聴者の場合

✓ 映像には字幕をつけるか、トランスクリプトを提供してください。	x 音声や動画形式のコンテンツのみを配置することは避けてください。

ディスレクシアを持つ場合

✓ リマインダーとプロンプトを提供します。	x 過去の行動や場所を無理に思い出させるようなことは避けてください。

コンテンツ

ページの読み順は、論理的な構造になっている必要があります。読む順番を確認するには、Tab キーで前に進み、Shift キーと Tab キーで後ろに戻るという focus commands を実行します。特にフォームや検索ダイアログなどでは、視覚的に表示されているのと同じ流れになるようにする必要があります。

ページ内のコンテンツは、専門用語や未定義の略語を使わず、平易な言葉で明確かつ簡潔に表現すること。行の長さは、短すぎても長すぎても、目の見える人とそうでない人の両方を混乱させる可能性があります。テキストコンテンツはわかりやすく、かつ見分けがつくようにしましょう。

見出し

ナビゲーションや文書全体の構造の理解を容易にするために、適切に並べられたり入れ子になっている見出し要素（h1、h2、h3、h4、h5、h6）を使用します。見出し要素によって、ユーザーエージェントは自動的にセクションの見出しを識別することができます。

たとえば、ページに h1 と h2 タグが含まれている場合、calcite-modal をデザインするときには、モーダルのタイトルに h2 または h3 タグを使用することができます。

<!-- If h1 and h2 tags are present, the calcite-modal header could use a h2 or h3 tag -->
<calcite-modal aria-labelledby="modal-title">
    <h3 slot="header" id="modal-title">Modal title</h3>
    <div slot="content">Modal content</div>
    <calcite-button slot="secondary" width="full" appearance="outline">Cancel</calcite-button>
    <calcite-button slot="primary" width="full">Save</calcite-button>
</calcite-modal>

同じシナリオで、ページには指定の h3 タグが確立されていないことになるので、calcite-modal のタイトルに h4、またはそれ以上のタグを割り当ててはいけません。ヘッダーがスキップされることで、ユーザーが隠れたコンテンツを見逃したように見え、事実上、ユーザビリティ上の問題が発生します。

キーボード操作性

見出し要素と同様に、コンテンツも HTML で機能的、視覚的に同じ順序にする必要があります。ページ全体に複数の要素を追加する場合は、HTML が意図と一致していることを確認します。

例えば、calcite-switch にあるコンテンツは、キーボードと視覚のユーザーが同じ階層でアクセスできるように、HTML に同じ順序を反映させる必要があります。まず calcite-label を宣言し、次に calcite-switch を宣言し、最後に viewDiv を宣言します。

<!-- Switch with label -->
<calcite-label layout="inline">Dark mode:
  Off <calcite-switch></calcite-switch> On
</calcite-label>

<!-- Map view -->
<div id="viewDiv"></div>

フォーカス

キーボード フォーカスは、キーボード入力を受ける要素のことです。一度にフォーカスを持つことができるのは、厳密に 1 つの要素です。多くのブラウザでは、Tab キーで前に進み、Shift キーと Tab キーで後ろに下がることでフォーカスを移動させることができます。

div のようなフォーカスされない要素をフォーカス可能にするには、tabindex 属性を含まなければなりません。ページのフォーカス順序は、その意味を保ち、使いやすさを促進するものでなければなりません。フォーカスの順序は論理的であるべきで、一般にページの視覚的な順序に従うべきです。

代替テキスト（Alt テキスト）

コンテンツに画像を追加する場合、alt テキストを利用して画像の説明を提供します。簡潔でありながら、視覚的でないユーザーにも文脈を伝えることができるよう、説明的な表現を心がけることが大切です。

<!-- Alt text example -->
<calcite-card>
    <span slot="title">Grizzly bears</span>
    <span slot="subtitle">Alaska</span>
    <img src="grizzly-bear.png"
      alt="A grizzly bear captures a salmon mid-flight during Alaska's salmon run,
      an annual return of millions of salmon from the ocean to mountain streams.">
    <div slot="footer-leading">
        <calcite-button icon-end="plus">Learn more about bears</calcite-button>
    </div>
</calcite-card>

フォームとラベル

読みやすさと支援技術をサポートするためにフォームを扱う場合、フォーム要素にテキストを関連付けるために明示的にラベルを追加する必要があります。Calcite はフォーム要素にラベルを追加するために calcite-label を実装しています。

<form>
  <fieldset>
  <legend>Report a Monarch Butterfly Sighting</legend>
    <calcite-label>What is your name?
    <calcite-input type="text" placeholder="John Muir"></calcite-input>
    </calcite-label>
    <calcite-label>When did you encounter a Monarch Butterfly?
      <calcite-input-date-picker id="date-picker"></calcite-input-date-picker>
    </calcite-label>
  </fieldset>
</form>

フォーム コントロールのグループ化

フォーム内のグループ化は、コンテキストを提供し、フォームを理解し、正常に送信できるようにするために重要です。

fieldset と legend 要素はそれぞれフォーム制御とそのキャプションのためのグループ化を提供します。calcite-radio-button-group のようなフォームの制御ベースのコンポーネントを設計する場合、fieldset と legend フォーム制御要素がコンポーネントに付随している必要があります。

デザインの一貫性を保つために、フォーム制御要素に Calcite Design System の Colors と Typography を追加します。

<!-- Grouping and caption for calcite-radio-button-group with form control elements -->
<fieldset>
    <legend>Have you ever encountered a Monarch Butterfly?</legend>
    <calcite-radio-button-group>
        <calcite-label layout="inline">
            <calcite-radio-button value="yes"></calcite-radio-button>Yes
        </calcite-label>
        <calcite-label layout="inline">
            <calcite-radio-button value="maybe"></calcite-radio-button>Maybe
        </calcite-label>
        <calcite-label layout="inline">
            <calcite-radio-button value="no"></calcite-radio-button>Not yet
        </calcite-label>
    </calcite-radio-button-group>
</fieldset>

チェックリスト

ソリューションは、包括的で、できるだけ多くの人がアクセスできるものであるべきです。以下のチェックリストは、Calcite Design System で設計・開発する際に留意すべき、アクセシビリティに関する潜在的な問題を特定するのに役立ちます。

コンテンツ

• 情報は、色、音、形、大きさ、視覚的な位置に依存しない。
• テキストと背景色のコントラストが十分である。
• リンクは説明的で意図を示すものである。
• 説明的なセクションの見出しを使用する。
• フォームには説明的なラベルを付ける。
• フォームには有用なエラー メッセージや確認メッセージがある。
• ラベルは関連するフォーム・フィールドと一緒に表示する。
• 拡大・縮小しても文脈が失われないようにする。
• サイトが予期せずタイムアウトしないようにする。
• スタイルが有効でない場合でもコンテンツが理解できる。
• Web ページのサイズは 500 k を超えない。

キーボードと支援技術

• キーボードのナビゲーションをサポートする。
• マウスのみのインタラクションは避ける。
• キーボードのユーザーにもフォーカスの状態が見えるようにする。
• キーボードのユーザーによるナビゲーションのスキップを許可する。
• スクリーン リーダーを使用してコンテンツをナビゲートできる。

マルチメディアとデータビジュアライゼーション

• 画像は、意味のある代替テキストを用意するか、意図的に装飾としてマークする。
• 装飾的な画像は、スクリーン リーダーに読み込まないようにする。
• マルチメディアは、別の方法で利用できるようにする。
• 視力が悪いユーザーでもテーブルデータにはアクセスできるようにする。
• グラフ、チャート、マップ、SVG などのデータは、支援技術によって利用できるようにする。
• 自動的に移動するコンテンツは一時停止できるようにする。
• 点滅する要素は制限するか削除する。
• 音声や動画が自動的に再生されないようにする。