freee
freeeアクセシビリティー・ガイドライン
Ver. 202103.0
  • freeeアクセシビリティー・ガイドラインについて
  • ガイドライン
    • マークアップ全般
    • ページ全体
    • ログイン・セッション
    • 入力ディバイス
    • テキスト
    • 画像化されたテキスト
    • 画像
    • アイコン
    • リンク
    • フォーム
    • 動的コンテンツ
    • 音声・映像コンテンツ
  • アクセシビリティー・チェック・リスト
    • アクセシビリティー・チェック全項目一覧
    • チェック実施方法の例
      • NVDAを用いたチェック実施方法の例
      • axeを用いたチェック実施方法の例
  • ガイドラインに関する補足情報
    • WCAG 2.1の各達成基準と当ガイドラインの項目との対応
    • 当ガイドラインの優先度とWCAG 2.1の適合レベルについて
  • 参考情報
    • セマンティクスを適切にマークアップする重要性
    • Reactコンポーネントなどのアクセシビリティー
    • 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス
    • 画面の表示方向と肢体不自由者の利用
    • 使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装
    • 制限時間とアクセシビリティー
    • テキスト情報の文言とアクセシビリティー
    • 画像化されたテキストの問題点
    • 画像化されたテキストを使用する場合の代替情報の提供
    • コントラスト比確保の重要性
    • 拡大表示時のアクセシビリティー
    • リンク先の内容を推測しやすくする
    • DOMツリーとスクリーン・リーダー
    • ホバーで表示されるコンテンツと拡大表示
    • ステータス・メッセージとスクリーン・リーダー
    • 自動的に変化するコンテンツの問題点
    • フォーム・コントロールのラベル付けの必要性
    • クリックやタッチのターゲット・サイズに関連する問題とターゲット・サイズの確認方法
    • フォーム操作で発生する動的な変化が及ぼす影響
    • 入力エラーの扱い
    • lang 属性と音声読み上げ
    • ユーザーCSSを適用したチェックの実施方法
    • テキストによる画像の説明
    • 画像の表示とアクセシビリティー
    • 色を用いた表現に関する注意点
    • グレースケール表示への切り替え方
    • キーボード・トラップが引き起こす問題
    • 様々なユーザーの入力手段の特徴とそのサポート
    • Tab/Shift+Tabキーを用いたチェック
    • 音声・映像コンテンツの存在を認知可能にする
    • 音声の自動再生とアクセシビリティー
    • 音声・映像コンテンツのアクセシビリティーを確保する
    • アクセシビリティー・チェックのためのツール
      • The Nu Html Checkerを用いたHTMLのバリデーション
      • コントラスト比のチェック方法
      • スクリーン・リーダーを用いたチェックの実施方法
      • axeを使用したアクセシビリティー・チェック
freeeアクセシビリティー・ガイドライン
  • freeeアクセシビリティー・ガイドライン »
  • ガイドライン »
  • リンク

リンク¶

これらのガイドラインは、リンクに関するものです。

ここでリンクとは、ユーザーがクリック(タッチ)することでページ遷移や何らかの機能が実行されるものを差します。リンクにはテキストのみで構成されているもの、アイコンが用いられているもの、画像とテキストの一方又は両方が用いられているものが含まれます。また、a要素で実装されているものに加えて、button要素で実装されていたり、適切なrole属性が付加されて実装されているものも含みます。

認知を可能にする¶

[MUST]複数の視覚的要素を用いた表現¶

ガイドライン

[MUST]クリッカブルであることを、色だけで表現しない。

チェック内容
デザイン(チェックID: 0031)、プロダクト(チェックID: 0051)
  • グレイスケール表示でも利用に支障が出ない:

    • リンク箇所を判別できる

    • 画像、テキストの意図が伝わる

    • 入力フォームの必須項目、エラーを認知できる

意図¶

視覚障害者や色弱者がリンクを認知できるようにする。

参考¶

  • 色を用いた表現に関する注意点

  • グレースケール表示への切り替え方

対応するWCAG 2.1の達成基準¶

  • SC 1.4.1:

    • Use of Color

    • 色の使用

[MUST]適切なリンク・テキスト¶

ガイドライン

[MUST]リンク・テキスト(a要素の中身、アイコンのラベルなど)は、そのリンクの目的を判断できるものにする。

チェック内容
デザイン(チェックID: 0241)
  • リンク・テキストは「こちら」などになっておらず、リンク・テキストの文言から遷移先をある程度推測できるようになっている。

プロダクト(チェックID: 0261)
  • 「○○はこちら」の「こちら」の部分だけがリンクになっていない。(この場合は「○○はこちら」全体をリンクにする。)、または

  • リンク・テキストの意図がマークアップで明確になっている。

意図¶

リンク先を閲覧するかどうかの判断を容易にして、肢体不自由者の不必要な操作の抑制につなげる。

スクリーン・リーダーが提供するリンクの一覧機能を使う視覚障害者が、リンク先について容易に判断できるようにする。

参考¶

  • リンク先の内容を推測しやすくする

対応するWCAG 2.1の達成基準¶

  • SC 2.4.4:

    • Link Purpose (In Context)

    • リンクの目的 (コンテキスト内)

[MUST]一貫したリンク・テキスト¶

ガイドライン

[MUST]同じ機能を実行するリンクは、サイト内で一貫性のあるリンク・テキストを付与する。

チェック内容
デザイン(チェックID: 0242)、プロダクト(チェックID: 0262)
  • 同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。

意図¶

予測可能性を上げ、混乱を防ぐ。

対応するWCAG 2.1の達成基準¶

  • SC 3.2.4:

    • Consistent Identification

    • 一貫した識別性

[MUST]適切なフォーカス順序¶

ガイドライン

[MUST] Tab/Shift+Tabキーでフォーカスを移動させたとき、コンテンツの意味に合った適切な順序でフォーカスを移動させる。

チェック内容
プロダクト(チェックID: 0172)
  • Tab/Shift+Tabキーを使ったフォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序でフォーカスが移動する。

    • リンクとボタン

    • フォーム・コントロール

    • その他、マウスやキーボードによる操作を受け付けるすべてのもの

意図¶

スクリーン・リーダーなどの支援技術がコンテンツを正しく認識し、ユーザーに適切な形で提示できるようにする。

参考¶

  • Tab/Shift+Tabキーを用いたチェック

対応するWCAG 2.1の達成基準¶

  • SC 2.4.3:

    • Focus Order

    • フォーカス順序

Next Previous

© Copyright 2020-2021, freee株式会社.

クリエイティブ・コモンズ・ライセンス
freee株式会社 作『freeeアクセシビリティー・ガイドライン』はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスで提供されています。

このサイトでは、アクセス状況の解析のためにGoogle Analyticsを用いています。Googleによるデータの使用については、GOOGLE のサービスを使用するサイトやアプリから収集した情報の GOOGLE による使用をご覧ください。また、これに伴い使用されるCookieの扱いなどについては、freee株式会社のプライバシー・ポリシーをご覧ください。