Apa tujuan dari atribut "peran" dalam HTML?

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?

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.)

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/

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.

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.

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 .