【CSS】aria-label属性とは何か？調べてみました。

2023年6月1日
2023年6月29日
HTML / CSS

こんにちは。

野中やすおです。

最近、職場でaria-label属性を意識して使うようにしようという話になってきたのでaria-label属性とは何か調べてみました。

1 aria-label属性とは何か
2 使用例
3 おわりに
4 参考

この記事の目次

aria-label属性とは何か

aria-label属性とは、ウェブアクセシビリティのために使用される属性で、ウェブページやアプリケーションをよりアクセス可能にするための仕様のことです。「aria」は、Accessible Rich Internet Applicationsの略です。

使用例

<button aria-label="削除">×</button>

1	<button aria-label="削除">×</button>

上記の例の場合では、「削除」というテキストがaria-label属性に指定されています。これによって、ボタンの目的がスクリーンリーダーやその他の支援技術を使用するユーザーに伝えられることになります。ちなみにaria-label属性が付いていないと、「×」は削除ではなく、「かける」とスクリーンリーダーが読み上げてしまいます。

つまりaria-label属性は、視覚的には表示されないテキストですが、アクセシビリティ支援技術を使用するユーザーにとって、とても便利な属性になります。よってこの属性を使用することで、ユーザーがウェブページやアプリケーションをより効果的に操作できるようになります。