Atribut ROLE HTML

Atribut ROLE pada elemen HTML

Atribut role (dalam bahasa Inggris berarti peran) kegunaannya adalah untuk mendeskripsikan peran atau fungsi dari suatu elemen pada halaman HTML.

Tujuan penggunaan atribut ini adalah untuk meningkatkan fungsi antarmuka halaman dengan pengguna. Karena atribut ini mendukung kinerja program seperti Screen Reader (program pembaca layar) atau Magnifier (program pembesar layar).

Sehingga penggunaan atribut role ini menjadi salah satu faktor yang nantinya sebuah website / blog semakin fungsional dan canggih.

Pengujian atribut role pada PageSpeed Insight

Dalam pengujian halaman di PageSpeed Insight, attribut role juga memberikan pengaruh pada sisi aksesabilitas halaman selain kecepatan halaman itu sendiri.

Contoh penggunaan atribut role

Penggunaan atribut role pada link :

<!-- Tag a (link) difungsikan sebagai tombol -->
<a href="#" role="button">Link</a>

Contoh diatas merupakan penerapan atribut ROLE pada elemen link dimana elemen tersebut diberikan peran sebagai tombol. Tak hanya link, elemen lain yang sering ditemui dalam template yang diberikan fungsi atau peran tombol misal :
<span class='myBtn'role='button'>
<div class='tombol-btn' role='button>

Penggunaan atribut role pada susunan menu (daftar menu)

Biasanya elemen yang digunakan untuk membentuk daftar menu adalah ul > li.
Elemen ini berbentuk susunan yaitu :

<ul><!-- induk elemen-->
  <li><!-- turunan -->
    (item)<!-- konten -->
  </li>
</ul>

<ul> sebagai elemen induk.
<li> sebagai elemen turunan
<li>(konten / item)<li> sebagai intinya.

Penerapan ROLE pada elemen list beserta turunannya :

Penerapan atribut ROLE dalam list

<!-- Mendeskripsikan fungsi menurun pada menu -->
<ul role='menu'>
  <li role='presentation'>
    <a href='/' role='menuitem'>Menu 1</a>
  </li>
  <li role='presentation'>
    <a href='/' role='menuitem'>Menu 2</a>
  </li>
</ul>

⇐ Sebelumnya

Selanjutnya ⇒

Coding Blogger