SmartHR Design System

アクセシビリティガイドライン

すべての人が利用できる、アクセシブルなウェブアプリケーションを開発するための設計と実装のガイドラインです。品質基準で定めた標準品質を達成するために対応すべき項目を網羅しています。

アクセシビリティ方針別タブで開くで目標とする範囲を網羅するため、WCAG2.2別タブで開くとテクニック集別タブで開くを参考に作成しています。

1. 画像

写真やアイコン、図などの画像を使用する場合は、画像を閲覧しない場合に対する情報提供について検討します。 画像に代替テキストを指定すると、音声読み上げ利用時や、何かの理由でページが画像を読み込めない場合にも、代替テキストを通して情報を提示できます。

  • 画像がユーザーに何かを知らせたり、伝えたり、説明する役割を持つ場合は、代替テキストを設定して、画像を見ない状況にも同等の情報を提供します。
  • 画像が見た目上の単なる飾りである場合は、無視できるよう実装します。

デザイン時

  • 写真やアイコン、図を配置する場合、その画像が非表示であってもUIが機能するかを確認します。
    • 機能に必須の画像は、役割を持つ画像として代替テキストを検討します。
    • 代替テキストが実装されるよう、デザインファイルのコメント機能などをつかって実装者に伝えます。

実装時

  • 画像・図を含むUIを実装する場合、代替テキストが必要な画像かどうか確認します。
    • 画像がユーザーに何かを知らせたり、伝えたり、説明する役割を持つ場合は、代替テキストを設定します。
    • 代替テキストが必要かわからない場合は、UIを設計したデザイナーに確認するか、非表示にしてもそのUIが機能する場合は代替テキストを省略します。
  • 代替テキストが必要な場合は、SmartHR UIのコンポーネントのPropsで代替テキストを指定できます。（例: Icon）
  • 代替テキストが不要な場合は、alt属性値を空にしたり、aria-hidden を指定し、画像がUserAgentに無視されるようにします。SmartHR UIのコンポーネントではPropsで「代替テキストなし」を指定できます。

チェックリスト

2. アニメーションやサウンドを含むコンテンツ

インタラクションによるアニメーションを含むUIや、動画・音声を含むコンテンツでは、動きや音声が動作しない閲覧環境に向けた情報提供を検討します。 アニメーションに依存しない表現をしたり、動画や音声に代替コンテンツを用意すると、アニメーションや動画が利用できない状況や、聴覚障害などで音声を利用できない状況でも情報を伝達できます。

  • アニメーション効果を使用する場合は、アニメーションが無効になる場合を考慮し、アニメーションに依存しない表現を検討します。
  • 動画や音声を使用するコンテンツでは、字幕やテキストで同等の情報を提供します。
  • 動きや音によって、ユーザーの気分が悪くなったり、集中力を低下させるリスクがあるため、一時停止や無効化できるようにします。
  • 激しい点滅や閃光はけいれん発作や意識障害を引き起こす恐れがあるので、使用を避けます。

デザイン

  • UIにアニメーションを使用する場合は、アニメーション無効下でも情報の取得や操作が可能なことを確認します。
  • 動画コンテンツを配置する場合は、字幕や代替コンテンツを提供するための機能とUIも同時に提供します。

実装

  • 動画プレイヤーを使用する場合は、そのプレイヤーが字幕の設定・表示機能を持つか確認します。

チェックリスト

チェック内容カテゴリ
2-1. 動画の音声に字幕が付与されているUIデザイン実装
2-2. 動画の内容を解説した音声、またはコンテンツがあるかUIデザイン
2-3. 音声や動画、アニメーションが自動で再生される場合、一時停止できるかUIデザイン実装
2-4. 画面内に1秒に3回以上の点滅や閃光を起こすものがないUIデザイン

3. マークアップ

装飾を含むUIの見た目にあったHTMLを使用して、インターネットブラウザやスクリーンリーダーなどの支援技術が正しくコンテンツを解釈できます。SmartHRでは、SmartHR UIのコンポーネントを適切に使用すると適切なマークアップを適用できます。

デザイン

  • 見出し、テーブル、リストなどの基本的なUIコンポーネントは、SmartHR UIを使用します。コンポーネントの標準スタイルや使い方に準拠します。
  • SmartHR UIを使用しない場合も、見出しは太字にする、テーブルには罫線を表示するなど、そのコンポーネントの標準的なスタイルを踏襲します。

実装

  • SmartHR UIのコンポーネントを、使用方法に沿って実装します。
  • SmartHR UIを使用しない場合は、table、h1〜h6、ul、liなどの適切なHTML要素を使用してマークアップします。

チェックリスト

4. 認識可能

ユーザーのさまざまな利用環境を想定し、認識したり区別しやすい文字スタイルを設定します。さまざまな画面サイズ、拡大表示、文字サイズや色の変更などを考慮すると、屋外での使用や端末のアクセシビリティ設定、視覚特性のあるユーザーの利用にも対応できます。

デザイン

  • 文字やアイコンの色は、背景色とのコントラスト比（4.5:1以上）を確保します。
  • 文字やアイコン、背景の色に意味を持たせる場合は、色が変更されたり見えにくい場合でも情報が伝わるかを確認します。（例: 成功・失敗・エラーなどの状態を色で示す場合）

実装

  • SmartHR UIのコンポーネントを、使用方法に沿って実装します。
  • SmartHR UIを使用しない場合は、拡大表示や狭い画面幅での表示時にも適切に表示されることを確認します。

チェックリスト

5. 操作可能

キーボードや外部スイッチなど、マウスやタッチ操作以外も含めたあらゆる入力で、すべての機能を操作できるようにします。操作に時間がかかる状況を考慮し、操作には時間制限を設けないでください。SmartHRでは、SmartHR UIのコンポーネントを適切に使用すると適切なマークアップを適用できます。

デザイン

  • 特定の入力方法や操作環境に限定せず、マウス、タッチ、キーボードなど、さまざまなデバイスからの入力、パソコン、スマートフォンなどさまざまな端末からの閲覧を想定して設計します。
  • マウスやタッチなどの入力方法に依存した操作がある場合は、キーボードで同様の操作を実現するための違う動線を検討します。
  • 時間制限のある表示では、時間制限を解除するなどの回避策を設けることを検討します。

実装

  • SmartHR UIのコンポーネントを、使用方法に沿って実装します。
  • SmartHR UIを使用しない場合は、適切なHTML要素を使用して実装します。

チェックリスト

6. ナビゲーション

ページの情報や構造を明示すると、さまざまなユーザー、支援技術、ブラウザなどが迷わずページを閲覧できるようにします。ページの役割や意味がわかる見出しや、リンクテキストを設定すると、円滑に閲覧する助けになります。

デザイン

  • 適切に見出しを配置して、情報構造を示します。
  • 見出しやリンクは、対象コンテンツの役割や意味を理解できるよう明確なテキストを設定します。

実装

  • ページの言語（lang属性）、タイトル（title要素）などを正しく設定します。
  • 見出しやリンクはSmartHR UIを使用して実装します。

チェックリスト

7. フォーム

ユーザーが正しく情報を入力し、操作を完了できるよう、入力項目や操作方法を明確に示します。入力や操作に関する情報が不十分な場合、誤った情報を入力する、操作を諦めて中断するなど、ユーザーのタスク達成を失敗させることがあります。

デザイナー

  • フォームなどの入力や操作が必要なUIでは、操作を明確に説明するラベルや説明を設置します。

実装

  • 入力に関連するSmartHR UIのコンポーネントを、使用方法に沿って実装します。
  • SmartHR UIを使用しない場合は、入力のためのHTML要素を正しく使うか、WAI-ARIAを使って入力要素と情報を適切に紐づけます。

チェックリスト