freee
freeeアクセシビリティー・ガイドライン
  • はじめに
    • freeeアクセシビリティー・ガイドラインについて
    • freeeアクセシビリティー・ガイドラインの活用方法
    • この文書の編集について
    • 更新履歴
  • ガイドライン
    • マークアップと実装
    • ページ全体
    • ログイン・セッション
    • 入力ディバイス
    • テキスト
    • 画像化されたテキスト
    • 画像
    • アイコン
    • リンク
    • フォーム
    • 動的コンテンツ
    • 音声・映像コンテンツ
  • アクセシビリティー・チェック・リスト
    • アクセシビリティー・チェック全項目一覧
    • チェック実施方法の例
      • キーボード操作によるチェック実施方法の例
      • axe DevToolsを用いたチェック実施方法の例
      • NVDAを用いたチェック実施方法の例
      • macOS VoiceOverを用いたチェック実施方法の例
      • iOS VoiceOverを用いたチェック実施方法の例
      • Android TalkBackを用いたチェック実施方法の例
      • その他の手段によるチェック実施方法の例
    • チェック実施用Googleスプレッドシート
  • ガイドラインに関する補足情報
    • WCAG 2.1の各達成基準と当ガイドラインの項目との対応
    • 当ガイドラインとWCAG 2.1の各達成基準のレベル
    • axe DevToolsのルールと当ガイドラインの対応
  • 参考情報
    • セマンティクスを適切にマークアップする重要性
    • UIコンポーネントのアクセシビリティー
    • 適切なページ構造、マークアップとスクリーン・リーダーを用いた効率的な情報アクセス
    • 画面の表示方向と肢体不自由者の利用
    • 使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装
    • 制限時間とアクセシビリティー
    • テキスト情報の文言とアクセシビリティー
    • 画像化されたテキストの問題点
    • 画像化されたテキストを使用する場合の代替情報の提供
    • コントラスト比確保の重要性
    • 拡大表示時のアクセシビリティー
    • リンク先の内容を推測しやすくする
    • DOMツリーとスクリーン・リーダー
    • マウスオーバー(ホバー)で表示されるコンテンツと拡大表示
    • ステータス・メッセージとスクリーン・リーダー
    • 自動的に変化するコンテンツの問題点
    • フォーム・コントロールのラベル付けの必要性
    • クリックやタップのターゲット・サイズに関連する問題とターゲット・サイズの確認方法
    • フォーム操作で発生する動的な変化が及ぼす影響
    • 入力エラーの扱い
    • lang 属性と音声読み上げ
    • ユーザーCSSを適用したチェックの実施方法
    • テキストによる画像の説明
    • 画像の表示とアクセシビリティー
    • 色を用いた表現に関する注意点
    • グレースケール表示への切り替え方
    • キーボード・トラップが引き起こす問題
    • モバイル・アプリケーションのアクセシビリティーに関する基本事項
    • 様々なユーザーの入力手段の特徴とそのサポート
    • Tab/Shift+Tabキーを用いたチェック
    • 音声・映像コンテンツの存在を認知可能にする
    • 音声の自動再生とアクセシビリティー
    • 音声・映像コンテンツのアクセシビリティーを確保する
    • アクセシビリティー・チェックのためのツール
      • The Nu Html Checkerを用いたHTMLのバリデーション
      • コントラスト比のチェック方法
      • スクリーン・リーダーを用いたチェックの実施方法
        • NVDAを用いたチェックの実施方法
        • macOSのVoiceOverを用いたチェックの実施方法
        • iOS VoiceOverを用いたチェックの実施方法
        • Android TalkBackを用いたチェックの実施方法
      • axe DevToolsを使用したアクセシビリティー・チェック
  • よくある質問と回答(FAQ)
    • FAQ記事一覧
      • 見出しレベルの指定
      • アイコン画像の代替テキストに「アイコン」や「ボタン」という言葉を含めるべきか
      • ラジオボタンやチェックボックスのサイズ
      • テキスト・リンクのクリック可能な領域が小さい
      • Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい
      • スクリーン・リーダーの読み上げ方がおかしい漢字や英単語がある
      • スクリーン・リーダーによる長いテキストの読み上げが途中で止まる
      • 「2024-11-21 12:30」のような表記はスクリーン・リーダーでどう読み上げられるべきか
      • スラッシュ(/)を含む数字はどのように読み上げられるべきか
      • どのような情報をスクリーン・リーダーで読み上げられないようにするべきか
      • hr 要素はスクリーン・リーダーにどのように読み上げられるべきか
      • axe DevToolsの警告への対処
      • グレースケール表示にするブックマークレットで表示が崩れる
    • FAQタグ一覧
      • axe DevTools
      • キーボード操作
      • グレースケール表示
      • スクリーン・リーダー
      • ターゲット・サイズ
      • フォーム
      • マークアップ
freeeアクセシビリティー・ガイドライン
  • freeeアクセシビリティー・ガイドライン »
  • 参考情報 »
  • リンク先の内容を推測しやすくする

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

リンク先に求めている情報があるかどうかを推測しやすくすることは、どのようなユーザーにとっても使い勝手の向上につながります。

リンク先の内容の推測を容易にして、不必要なページ遷移を抑制することは、肢体不自由でマウス操作に時間がかかるなどといった状況のユーザーにとっては特に重要です。

また、スクリーン・リーダーのユーザーは、スクリーン・リーダーが提供するページ中のリンクを一覧表示する機能を用いて、目的のページへのリンクを探す場合があります。さらに、TabキーやShift+Tabキーを繰り返し押すことでフォーカスを移動させ、目的のリンクを探すユーザーも少なくありません。このような場合、リンク・テキスト(a要素の中身)が、リンク先のページの内容を推測できるものになっているかどうかが重要です。

注意すべきリンク・テキストの文言の例(「」部分がリンク・テキスト)

NG

OK

○○は「こちら」

「○○はこちら」

「もっと見る」

「○○についてもっと見る」

「詳細」

「○○についての詳細」

また、マークアップによってリンクの意図が明確になっていれば、ガイドラインを満たすことができます。

具体的には、リンク・テキストが同じ複数のリンクがあるページで、以下のような条件を満たしている場合を例として挙げられます。

  • 当該のリンクがページ中の異なるセクションに含まれている場合、見出しが適切にマークアップされていて、各リンクが含まれるセクションが明確になっている

  • リストの各項目に同じリンク・テキストのリンクがある場合に、適切にリスト・アイテムがマークアップされていて、どのリスト項目に含まれるリンクかが明確になっている

  • 表の各行に同じリンク・テキストがある場合に、適切にtable要素や関連要素でリンクが含まれる行と列が明確になっている

関連ガイドライン項目

  • リンク:適切なリンク・テキスト

Previous Next

© Copyright 2020-2025, フリー株式会社.

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

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