Pengantar ARIA

Pengantar ARIA dan semantik HTML non-native

Alice Boxhall

Dave Gash

Meggin Kearney

Sejauh ini, kita didorong untuk menggunakan elemen HTML native karena memberi Anda fokus, dukungan keyboard, dan semantik bawaan, tetapi ada kalanya tata letak sederhana dan HTML native tidak dapat menjalankan tugasnya. Misalnya, saat ini tidak ada elemen HTML terstandardisasi untuk konstruksi UI yang sangat umum, yaitu menu pop-up. Atau tidak ada elemen HTML yang menyediakan karakteristik semantik seperti "pengguna perlu mengetahui tentang hal ini secepatnya".

Dalam pelajaran ini, kita akan mempelajari cara mengekspresikan semantik yang tidak dapat diekspresikan oleh HTML.

Spesifikasi Web Accessibility Initiative's Accessible Rich Internet Applications (WAI-ARIA, atau hanya ARIA) bagus untuk menjembatani area dengan masalah aksesibilitas yang tidak dapat dikelola dengan HTML native. Hal ini dapat dilakukan dengan memungkinkan Anda menentukan atribut yang memodifikasi cara elemen diterjemahkan ke dalam hierarki aksesibilitas. Mari kita lihat contohnya.

Dalam cuplikan kode berikut, kita menggunakan item daftar sebagai jenis kotak centang kustom. Class "checkbox" CSS memberi elemen karakteristik visual yang diperlukan.

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

Meskipun cocok bagi pengguna yang berpenglihatan normal, pembaca layar tidak akan memberikan indikasi bahwa elemen dimaksudkan sebagai kotak centang, sehingga pengguna yang berpenglihatan lemah mungkin melewatkan elemen itu sama sekali.

Namun, dengan menggunakan atribut ARIA, kita dapat memberi elemen tersebut informasi yang terlewat sehingga pembaca layar dapat menafsirkannya dengan benar. Di sini, kita telah menambahkan atribut role dan aria-checked untuk mengidentifikasi secara eksplisit elemen tersebut sebagai kotak centang dan untuk menentukan bahwa elemen tersebut dicentang secara default. Item daftar kini akan ditambahkan ke pohon 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>

ARIA bekerja dengan mengubah dan menambah pohon aksesibilitas DOM standar.

Meskipun ARIA memungkinkan kita secara halus (atau bahkan secara radikal) memodifikasi hierarki aksesibilitas untuk elemen apa pun di halaman, hanya elemen itu yang berubah. ARIA tidak menambah perilaku inheren elemen; ARIA tidak akan membuat elemen dapat difokuskan atau memberinya pemroses peristiwa keyboard. Itu tetap merupakan bagian dari tugas pengembangan kami.

Penting untuk dipahami bahwa semantik default tidak perlu didefinisikan ulang. Apa pun penggunaannya, elemen <input type="checkbox"> HTML standar tidak memerlukan atribut ARIA role="checkbox" tambahan untuk diumumkan dengan benar.

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

Lihat spesifikasi ARIA dalam HTML untuk mengetahui informasi selengkapnya.

Mari kita lihat kemampuan lain yang ditawarkan ARIA.

Apa yang dapat dilakukan ARIA?

Seperti yang Anda lihat pada contoh kotak centang, ARIA dapat memodifikasi semantik elemen yang ada atau menambahkan semantik ke elemen yang tidak memiliki semantik native. Pola ini juga dapat mengekspresikan pola semantik yang tidak ada sama sekali di HTML, seperti menu atau panel tab. Sering kali, ARIA memungkinkan kita membuat elemen bertipe widget yang tidak akan memungkinkan dengan HTML biasa.

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

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

• ARIA dapat menyatakan 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>

• ARIA juga dapat membuat bagian halaman "aktif", sehingga segera memberi tahu teknologi pendukung saat berubah.

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

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

Saat menerapkan role="checkbox" dalam contoh sebelumnya, kita memberi tahu teknologi pendukung bahwa elemen harus mengikuti pola "kotak centang". Artinya, kami menjamin bahwa elemen ini akan memiliki status dicentang (baik dicentang maupun tidak dicentang), dan bahwa statusnya dapat diubah menggunakan mouse atau tombol spasi, persis seperti elemen kotak centang HTML standar.

Faktanya, karena interaksi keyboard sangat terlihat dalam penggunaan pembaca layar, sangat penting untuk memastikan bahwa, saat membuat widget kustom, atribut role selalu diterapkan di tempat yang sama dengan atribut tabindex; hal ini memastikan bahwa peristiwa keyboard mengarah ke tempat yang tepat dan saat fokus berada pada elemen, perannya disampaikan secara akurat.

Spesifikasi ARIA menjelaskan taksonomi nilai yang memungkinkan untuk atribut role dan atribut ARIA terkait yang dapat digunakan bersama dengan peran tersebut. Ini adalah sumber informasi terpercaya tentang cara kerja peran dan atribut ARIA bersama-sama dan cara penggunaannya dengan cara yang didukung oleh browser dan teknologi pendukung.

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

ARIA juga menawarkan peran landmark yang memperluas opsi yang tersedia di HTML5. Lihat spesifikasi Pola Desain Peran Penanda untuk mengetahui informasi selengkapnya.