N030 機能を表す画像はアクセシブルな名前もしくは状態を提供している

ボタンなどの機能を表す画像（右矢印、下矢印、アイコンなど）が機能（リンク、ページ内リンク、ディスクロージャ、別タブで開くなど）を表すときに、アクセシブルな名前もしくは説明もしくは状態で機能を伝えているかを確認します。

ここでいう「機能を表す画像」は、以下のようなものを指します。

• リンクを表す右矢印（→）
• ページ内リンクを表す下矢印（↓）
• ディスクロージャの開閉状態を表す上下矢印（↑/↓）や三角形（▲/▼）、プラスマイナス（+/-）
• 別タブで開くことを表す外部リンクアイコン（ウインドウアイコン）

これらの機能や状態（開いている/閉じている、など）を伝えるために、以下の手段を用います。

• アクセシブルな名前（内容は[N001]で確認します）
• 説明
  • aria-describedby属性
  • 隣接するテキスト
• 状態
  • aria-expanded属性
  • aria-pressed属性
  • aria-selected属性
  • ほか

例

<a href="path/to/external" target="_blank">
  <span>外部リンク先のタイトル</span>
  <!-- アイコンの代替テキストに、このアイコンが担う「別タブで開けること」がわかる表現を記載します -->
  <img src="icon/external-link.svg" alt="別タブ">
</a>

<details>
  <summary>
    〇〇の詳細
    <!-- 暗黙のARIAプロパティを介して開いている/閉じているが伝わるので特別な実装は不要 -->
  </summary>
  <p>詳細な内容</p>
</details>

[WIP]書きかけ