role属性とは

roleとは

英単語のroleとは「役割」という意味です。

HTMLでのrole属性はタグごとに設定する属性で、「タグごとの役割」という意味になります。

role属性に設定した値は、ブラウザに表示されるものではありません。

「目の不自由な方がブラウザの読み上げ機能を使った場合」などに使用される情報になります。

HTMLでrole属性を使ってアクセシビリティを高める方法をを現役デザイナーが解説【初心者向け】 | TechAcademyマガジン
初心者向けにHTMLでrole属性を使ってアクセシビリティを高める方法について解説しています。WAI-ARIAの基本とrole属性の役割、role属性を使ったアクセシビリティ確保のための設定方法を紹介します。ぜひ役立ててください。
magazine.techacademy.jp

アクセシビリティ用に用意された属性なんだ・ねぇ・・

WAI-ARIAで使いますよ。

役割を設定します。

buttonタグがrole=”button”のようにHTMLの各要素には、暗黙的にロールが規定されているものもあります。

WAI-ARIA(ウェイエリア)とは？初めて制作する方向けに解説！ – 東京のホームページ制作 / WEB制作会社 BRISK
アクセシビリティとは可能な限りの多くの人々が利用できるようにする状態のことを指します。ウェブサイトで言えばスクリーンリーダーを利用している人や、モバイルデバイスで見る人、キーボード操作のみ行う方などすべての人が利用できるような状態です。
b-risk.jp

そうなのか。。。

<ul> <li>については、

role=“listitem”

が規定されている模様。

なので、使い方は、

x <div role=”listitem”>

o <li>

ということみたいじゃな。