Pengantar ARIA

Pengantar ARIA dan semantik HTML non-native

Alice Boxhall

Dave Gash

Meggin Kearney

Sejauh ini, kami telah menyarankan penggunaan elemen HTML native karena memberi Anda fokus, dukungan keyboard, dan semantik bawaan, tetapi ada kalanya sebuah dan HTML native tidak akan berfungsi. Misalnya, saat ini tidak ada elemen HTML terstandardisasi untuk konstruksi UI yang sangat umum, menu {i>pop-up<i}. Norwegia apakah ada elemen HTML yang menyediakan karakteristik semantik seperti " pengguna perlu mengetahui tentang hal ini sesegera mungkin".

Dalam pelajaran ini, kita akan mempelajari cara mengekspresikan semantik yang tidak dapat dilakukan HTML mengekspresikannya sendiri.

Aplikasi Internet yang Dapat Diakses dari Inisiatif Aksesibilitas Web spesifikasi (WAI-ARIA, atau hanya ARIA) cocok untuk menjembatani area dengan masalah aksesibilitas yang tidak dapat dikelola dengan HTML native. Cara kerjanya adalah dengan memungkinkan Anda menentukan atribut yang memodifikasi bagaimana suatu elemen diterjemahkan ke dalam pohon aksesibilitas. Mari kita lihat contoh.

Dalam cuplikan berikut, kami menggunakan item daftar sebagai jenis kotak centang kustom. Tujuan "Kotak centang" CSS memberikan elemen karakteristik visual yang diperlukan.

<li tabindex="0" class="checkbox" checked>
    Receive promotional offers
</li>

Meskipun ini berfungsi dengan baik bagi pengguna yang mampu melihat, pembaca layar tidak akan memberikan indikasi elemen itu dimaksudkan untuk menjadi kotak centang, sehingga pengguna dengan gangguan penglihatan mungkin melewatkan elemen secara keseluruhan.

Namun, dengan menggunakan atribut ARIA, kita dapat memberi elemen informasi yang tidak ada agar pembaca layar dapat menafsirkannya dengan benar. Di sini, kita telah menambahkan role dan atribut aria-checked untuk mengidentifikasi elemen secara eksplisit sebagai kotak centang dan untuk menentukan bahwa ini dicentang secara {i>default<i}. Item daftar sekarang akan ditambahkan ke hierarki aksesibilitas dan pembaca layar akan melaporkannya dengan benar sebagai kotak centang.

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
    Receive promotional offers
</li>

Catatan: Kami akan membahas daftar atribut ARIA dan kapan menggunakannya nanti.

ARIA bekerja dengan mengubah dan menambah hierarki aksesibilitas DOM standar.

Meskipun ARIA memungkinkan kita untuk memodifikasi aksesibilitas secara halus (atau bahkan secara radikal) hierarki untuk elemen apa pun di laman, dan hanya hal itu yang berubah. ARIA tidak meningkatkan perilaku inheren elemen apa pun; hal itu tidak akan menentukan dapat difokuskan atau memberinya pemroses peristiwa keyboard. Hal tersebut masih menjadi bagian dari pengembangan aplikasi.

Penting untuk dipahami bahwa {i>default <i} tidak perlu didefinisikan ulang semantik. Terlepas dari penggunaannya, <input type="checkbox"> HTML standar elemen ini tidak memerlukan atribut ARIA tambahan role="checkbox" untuk diumumkan dengan benar.

Perlu diperhatikan juga bahwa elemen HTML tertentu memiliki batasan atas ARIA peran dan atribut dapat digunakan. Misalnya, mungkin tidak ada peran/atribut tambahan yang diterapkan pada elemen <input type="text"> standar.

Lihat ARIA dalam spesifikasi HTML untuk informasi selengkapnya.

Mari kita lihat kemampuan lain yang ditawarkan ARIA.

Apa yang bisa dilakukan ARIA?

Seperti yang Anda lihat pada contoh kotak centang, ARIA dapat mengubah semantik elemen yang ada atau menambahkan semantik ke elemen yang tidak memiliki semantik bawaan. Ini juga dapat mengekspresikan pola semantik yang tidak ada sama sekali di HTML, seperti menu atau tab . Sering kali, ARIA memungkinkan kita membuat elemen jenis widget yang tidak mungkin dilakukan dengan HTML biasa.

• Misalnya, ARIA dapat menambahkan label dan teks deskripsi tambahan yang hanya terekspos ke API teknologi pendukung.
  

<button aria-label="screen reader only label"></button>

• ARIA dapat mengekspresikan hubungan semantik antar elemen yang memperluas koneksi induk/turunan standar, seperti scrollbar kustom yang mengontrol wilayah tertentu.

    <div role="scrollbar" aria-controls="main"></div>
    <div id="main">
    . . .
    </div>

• Dan ARIA dapat membuat bagian laman menjadi "aktif", sehingga mereka segera memberi tahu teknologi pendukung saat mereka berubah.

    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

Salah satu aspek inti sistem ARIA adalah kumpulan peran. Peran dalam istilah aksesibilitas setara dengan indikator singkat untuk UI tertentu pola. ARIA menyediakan kosakata pola yang dapat kita gunakan melalui role pada elemen HTML apa pun.

Ketika menerapkan role="checkbox" di contoh sebelumnya, kita memberi tahu {i>assistive technology<i} (teknologi bantu) di mana elemen harus mengikuti "kotak centang" pola. Bahwa adalah, kami menjamin bahwa status akan dicentang (baik dicentang maupun tidak dicentang), dan bahwa status dapat dialihkan menggunakan {i>mouse<i} atau tombol spasi, seperti elemen kotak centang HTML standar.

Faktanya, karena fitur interaksi {i>keyboard<i} sangat terlihat di pembaca layar penting untuk memastikan bahwa, saat membuat widget khusus, Atribut role selalu diterapkan di tempat yang sama dengan tabindex ; ini memastikan bahwa kejadian {i>keyboard<i} pergi ke tempat yang tepat dan bahwa ketika fokus mendarat pada elemen yang perannya disampaikan secara akurat.

Spesifikasi ARIA menjelaskan taksonomi nilai yang mungkin untuk atribut role dan ARIA terkait yang dapat digunakan bersama dengan peran-peran tersebut. Ini yang terbaik sumber informasi definitif tentang cara kerja peran dan atribut ARIA dapat digabungkan dan bagaimana mereka dapat digunakan dengan cara yang didukung oleh {i>browser<i} dan teknologi pendukung.

Namun, spesifikasinya sangat padat; tempat yang lebih mudah untuk memulai adalah ARIA Dokumen Praktik Pembuatan , yang mengeksplorasi praktik terbaik untuk menggunakan peran ARIA yang tersedia dan properti baru.

ARIA juga menawarkan peran tempat terkenal yang memperluas opsi yang tersedia dalam HTML5. Lihat Desain Peran Terkenal Pola untuk informasi selengkapnya.