Apa tujuan dari atribut "peran" dalam HTML?


1165

Saya terus melihat atribut peran dalam pekerjaan beberapa orang. Saya menggunakannya juga, tetapi saya tidak yakin tentang efeknya.

Sebagai contoh:

<header id="header" role="banner">
    Header stuff in here
</header>

Atau:

<section id="facebook" role="contentinfo">
    Facebook stuff in here
</section>

Atau:

<section id="main" role="main">
     Main content stuff in here
</section>

Apakah atribut peran ini diperlukan?

Apakah atribut ini lebih baik untuk semantik?

Apakah ini meningkatkan SEO?

Daftar peran dapat ditemukan di sini , tetapi saya melihat beberapa orang membuat sendiri. Apakah itu diizinkan atau penggunaan atribut peran yang benar?

Ada pemikiran tentang ini?

Jawaban:


1005

Sebagian besar peran yang Anda lihat didefinisikan sebagai bagian dari ARIA 1.0, dan kemudian dimasukkan ke dalam HTML5. Beberapa elemen HTML5 baru (dialog, utama, dll.) Bahkan didasarkan pada peran ARIA asli.

http://www.w3.org/TR/wai-aria/

Ada dua alasan utama untuk menggunakan peran selain elemen semantik asli Anda.

Alasan # 1. Mengganti peran di mana tidak ada elemen bahasa host yang sesuai atau, karena berbagai alasan, elemen yang kurang semantik digunakan.

Dalam contoh ini, tautan digunakan, meskipun fungsionalitas yang dihasilkan lebih mirip tombol daripada tautan navigasi.

<a href="#" role="button" aria-label="Delete item 1">Delete</a>

Pembaca layar akan mendengar ini sebagai tombol (sebagai lawan dari tautan), dan Anda dapat menggunakan pemilih atribut CSS untuk menghindari class-itis dan div-itis.

*[role="button"] {
  /* style these a buttons w/o relying on a .button class */
}

Alasan # 2. Mencadangkan peran elemen asli, untuk mendukung browser yang menerapkan peran ARIA tetapi belum menerapkan peran elemen asli.

Misalnya, peran "utama" telah didukung di browser selama bertahun-tahun, tetapi ini merupakan tambahan yang relatif baru untuk HTML5, sehingga banyak browser yang belum mendukung semantik untuk <main>.

<main role="main"></main>

Ini secara teknis berlebihan, tetapi membantu beberapa pengguna dan tidak membahayakan siapa pun. Dalam beberapa tahun, teknik ini kemungkinan akan menjadi tidak perlu.

Anda juga menulis:

Saya melihat beberapa orang membuat sendiri. Apakah itu diizinkan atau penggunaan atribut peran yang benar?

Itu penggunaan atribut yang valid kecuali peran nyata tidak dimasukkan. Browser akan menerapkan peran yang dikenali pertama dalam daftar token.

<span role="foo link note bar">...</a>

Keluar dari daftar, hanya linkdan noteperan-peran valid, sehingga peran link akan diterapkan karena datang pertama. Jika Anda menggunakan peran khusus, pastikan peran tersebut tidak bertentangan dengan peran yang ditentukan dalam ARIA atau bahasa host yang Anda gunakan (HTML, SVG, MathML, dll.)


19
Tautan ini mungkin bermanfaat juga. Menggunakan ARIA dalam HTML. rawgithub.com/w3c/aria-in-html/master/index.html
James Craig

6
Mengapa Anda meletakkan pemilih universal di depan [role = "button"]?
Evgeny

5
@EugeneXa tebakan saya adalah untuk menentukan elemen apa pun dengan [role="button"]akan menghemat harus melakukana[role="button"], span[role="button"]
ngplayground

4
"Dalam beberapa tahun, teknik ini kemungkinan akan menjadi tidak perlu". Idk apa pun tentang aksesibilitas, tetapi dengan hal-hal seperti komponen web dan sudut membuat tag khusus, saya bisa membayangkan ini menjadi lebih dari kebutuhan.
xdhmoore

8
@ xdhmoore Saya pikir dia secara khusus berarti teknik redundan mengatur peran dengan nilai yang sama dengan tag, bukan penggunaan rolesecara umum.
willlma

159

Seperti yang saya pahami, peran awalnya ditentukan oleh XHTML tetapi tidak digunakan lagi. Namun, mereka sekarang didefinisikan oleh HTML 5, lihat di sini: https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header

Tujuan dari atribut peran adalah untuk mengidentifikasi ke perangkat lunak parsing fungsi yang tepat dari suatu elemen (dan anak-anaknya) sebagai bagian dari aplikasi web. Ini sebagian besar sebagai hal aksesibilitas untuk pembaca layar, tapi saya juga bisa melihatnya sebagai berguna untuk browser yang tertanam dan pencakar layar. Agar bermanfaat bagi klien HTML yang tidak biasa, atribut perlu disetel ke salah satu peran dari spesifikasi yang saya tautkan. Jika Anda membuat sendiri, fungsionalitas 'masa depan' ini tidak dapat berfungsi - komentar akan lebih baik.

Kepraktisan di sini: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/


20

Apakah atribut peran ini diperlukan?

Jawab: Ya .

  • Atribut peran diperlukan untuk mendukung Aplikasi Internet Kaya yang Dapat Diakses ( WAI-ARIA ) untuk mendefinisikan peran dalam bahasa berbasis XML, ketika bahasa tidak mendefinisikan atribut peran mereka sendiri.
  • Meskipun ini adalah alasan atribut peran diterbitkan oleh Protokol dan Format Kelompok Kerja , atribut memiliki kasus penggunaan yang lebih umum juga.

Ini memberi Anda:

  • Aksesibilitas
  • Adaptasi perangkat
  • Pemrosesan sisi server
  • Deskripsi data yang kompleks, ... dll.

3
Bisakah Anda menjelaskan arti Aksesibilitas, Adaptasi Perangkat, dan deskripsi data Kompleks. Saya baru dalam pemrograman web sehingga istilah ini sedikit baru bagi saya. Terima kasih!
Manish Jain

11

Saya menyadari ini adalah pertanyaan lama, tetapi pertimbangan lain yang mungkin tergantung pada persyaratan persis Anda adalah bahwa memvalidasi di https://validator.w3.org/ menghasilkan peringatan sebagai berikut:

Peringatan: Peran formulir tidak perlu untuk formulir elemen.


1
Mungkin downvoter ingin berkomentar? Saya menjawab pertanyaan OP, "Apakah atribut peran ini perlu?"
dotnetnutty

0

Atribut peran terutama meningkatkan aksesibilitas bagi orang yang menggunakan pembaca layar. Untuk beberapa kasus kami menggunakannya seperti aksesibilitas, adaptasi perangkat, pemrosesan sisi server, dan deskripsi data yang kompleks. Tahu lebih banyak klik: https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute .


2
Harap ungkapkan afiliasi apa pun dan jangan gunakan situs sebagai cara untuk mempromosikan situs Anda melalui posting. Lihat Bagaimana cara menulis jawaban yang baik? .
Yvette
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.