HTML のロール属性

1. HTML の role 属性の概要
2. HTML でアクセシビリティのために role 属性を使用する

この記事では、HTML の role 属性とその目的を紹介します。

HTML の role 属性の概要

HTML の role 属性は、WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) 仕様の下にあります。 WAI-ARIA の主な目的は、Web インターフェイスのアクセシビリティを向上させて、障害を持つ人々をサポートすることです。

これにより、スクリーン リーダーは、提供された情報を使用して HTML ドキュメントのコンテンツを読み取ることができます。 role 属性は、セマンティクスを記述する HTML 要素の役割を定義します。

まず、セマンティック HTML 要素と非セマンティック HTML 要素の違いを理解しましょう。 <p>、<table>、<li> などの要素は、意味を表すセマンティック要素です。

見た目より機能性重視です。 要素の具体的な意味は、ブラウザと開発者に提示されます。

たとえば、<p> タグは段落を作成します。

一方、非セマンティック HTML 要素は、コンテンツの明確な説明がない要素です。 例として、<div> や <span> などのタグがあります。

このようなタグには、内部のコンテンツに関する情報はありません。 つまり、セマンティクスがありません。

role 属性は、HTML の非セマンティック要素にセマンティクスを提供します。 role="role_type" 形式を使用して、要素のロールを記述できます。

ここで、role_type は ARIA で指定されたロールです。 以下のセクションでは、role 属性のさまざまな使用例を見ていきます。

HTML でアクセシビリティのために role 属性を使用する

role 属性の主な目的の 1つは、特に視覚障害のあるユーザーにアクセシビリティを提供することです。 スクリーン リーダーでは、role 属性が特定の要素の正確な目的または動作を読み上げます。

Web アプリケーションのユーザーが視覚障害のあるシナリオを考えてみましょう。 ユーザーをログインさせるボタンを作成する必要があります。

ただし、フレームワークでは、<button> 要素を使用できません。 フレームワークが機能しないにもかかわらず、<a> タグを使用してそれを可能にすることができます。

しかし、role属性を使わないとログインボタンがあることを視覚障害者に伝えることはできません。

このような状況では、role 属性を使用してリンクをボタンとして定義できます。 role 属性の値を "button" として記述することでそれを行うことができます。

その結果、スクリーン リーダーは、Login がボタンであることをユーザーに読み上げます。 したがって、彼はシステムにログインできます。

スクリーン リーダー 拡張機能を Chrome Web ストアから Chrome ブラウザーに追加できます。 ユーザーがキーボードで <a> タグをナビゲートすると、スクリーン リーダーは Login をボタンとして読み上げます。

コード例:

<a href="#" role="button"> Login </a>