[update] アイコンフォントのアクセシビリティ対応のサンプル変更

[manabuyasuda]

<span class="p-icon p-icon--home" aria-hidden="true"></span>ホーム

<span class="p-icon p-icon--home" aria-label="ホーム"></span>

<span class="p-icon p-icon--home" aria-hidden="true"></span>
<span class="u-sr-only">ホーム</span>

のようにパンくずリストでホームアイコンを表示するパターンがわかりやすい。矢印アイコンを削除して、ホームアイコンを1つ追加する。

また、<i>要素を使ったマークアップも、すべて<span>要素に変更する。

• HTML的にはテキストは空なわけで、それを具体的な意味を持つタグで囲むのは適切なのか？
• <i>要素は他と区別するべきテキストを示す要素
• <i>要素は英語圏特有のコンテキストで、日本語で適切に使えない可能性もある

aria-label属性で記述したテキストが過剰な説明にならないようにも気をつけたい。