このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Element: role プロパティ

Baseline 2023
Newly available

Since ⁨October 2023⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

roleElement インターフェイスのプロパティで、この要素に対して明示的に設定された WAI-ARIA ロールを返します。

すべての HTML 要素には暗黙の ARIA ロールが割り当てられており、そのロールが generic であっても同様です。 この 意味的な関連付けにより、ツールは、その型のそれ以外のオブジェクトに対するユーザーの期待と整合性のある方法で、オブジェクトを表示し、オブジェクトの操作に対応できるようになります。 role 属性は、要素の ARIA ロールを明示的に設定するために使用する属性であり、暗黙のロールを上書きします。例えば、暗黙的に list ロールを持つ <ul> には、明示的に role="treegrid" が設定される場合があります。 role プロパティは、明示的に設定された role 属性の値(この場合は treegrid)を反映します。明示的に設定されていない限り、要素の暗黙的な list ロールは返しません。

定義されている ARIA ロールの完全な一覧は、ARIA ロールリファレンスページで見ることができます。

文字列。 role 属性の値、または明示的に設定されていない場合 null です。

この例では、 alt 属性が空または欠落している画像には、 presentationrole が指定されています。

js
const images = document.querySelectorAll("img");
images.forEach((image) => {
  if (!image.alt) {
    image.role = "presentation";
  }
});

仕様書

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# dom-ariamixin-role

ブラウザーの互換性

関連情報