日頃の業務の中であまり使ってこなかったARIA属性について、詳しく理解しきれていなかったので今後の業務で活かせるように改めて用途を調べてみました。
ARIA属性はウェブアクセシビリティを向上させ、コンテンツの状態や性質を表すためために使用される属性です。
視覚的には表示されないですが、アクセシビリティ支援技術を使用するユーザーに情報を的確に提供する材料となり、アクセシビリティが高まるのです。
aria-*属性の値の形式には種類があり、用途によって使い分けます。
以下はその一部の例です。
aria-label属性
index.html
<button aria-label="閉じる">×</button></select>
上記の例では、「閉じる」ボタンに aria-label 属性がついています。ボタンに関する情報が視覚的には表示されませんがスクリーンリーダー等を使用するユーザーに正確な情報を提供します。
aria-hidden属性
index.html
<div aria-hidden="true">非表示のコンテンツ</div></select>
aria-hidden 属性は要素がスクリーンリーダー等に対して非表示であることを示し、不要な情報を読み上げるのを防ぎます。
aria-live属性:
index.html
<div aria-live="assertive">新しいメッセージが届きました</div>
aria-live 属性は、動的な変更がある場合にスクリーンリーダーにその変更を通知するために使用されます。assertive 値は重要な変更があった場合に即座に通知することを示します。
以上は一部の例ですが、「情報アクセシビリティ」について対応を求められた時に実装できるよう、今後の業務の中で間違った使い方をしないように意識的に使っていこうと思います。
その中で間違いや気づきがあれば、随時更新します！