aria-hidden 属性の動作検証
WAI-ARIA で定義されている aria-hidden 属性。
スクリーンリーダーやブラウザーでどの様な挙動を取るのかの検証と、このページを使って動作の確認が出来ます。
aria-hidden 属性の適用
aria-hidden 属性は要素に aria-hidden="true" と付加する事で、スクリーンリーダーでは読み上げる必要の無い要素を読み飛ばして情報を伝え易くします。
装飾の為の画像や記号、見出しの前に置かれたアイコン等は aria-hidden が適用されていないと、読み上げにつまずいたり、見出しのタイトルを正しく読み上げないといった弊害が起こります。
Font awesome のホームアイコンであれば
<i class="fas fa-home" aria-hidden="true"></i>
とすると、スクリーンリーダーはアイコンを読み飛ばし、必要な情報にアクセスし易くなります。
アイコンフォントのウェブアクセシビリティを向上する方法も参考に。
aria-hidden 属性の対応状況
主要なスクリーンリーダーであれば、付加する要素を選ばずに期待した動作をします。
特にアイコンフォントは<i>要素であれ<span>要素であれ、aria-hidden="true" を付加するだけでユーザビリティが向上します。
aria-hidden の動作確認
スクリーンリーダーと任意のブラウザーでこのページを開き、以下の各要素にマウスカーソルを乗せる、またはキー操作でフォーカスを当てると、動作の確認が出来ます。
一般的なパンくずリストの例
aria-hidden="true"を付加したパンくずリスト