Aksesibilitas Web Dimulai dari Detail Kecil

Nama yang menjelaskan tindakan

WAI-ARIA 1.2 menjelaskan properti aria-label untuk memberikan nama pada sebuah elemen ketika penggunaannya sesuai. Untuk tombol yang hanya menampilkan ikon, nama tersebut membantu menyampaikan tindakan yang diwakili.

Saya menyarankan memilih nama dari tujuan kontrol. “Tampilkan banner berikutnya” menjelaskan aksi dengan lebih konkret daripada “panah kanan”. Bahasa label juga perlu mengikuti bahasa antarmuka.

Bila teks tombol sudah terlihat dan jelas, pertahankan teks itu sebagai dasar namanya. Tambahan atribut perlu mempunyai tujuan, bukan menjadi hiasan yang dipasang pada semua elemen.

Perubahan yang saya buat

Perbaikan yang saya buat menambahkan aria-label='Prev' dan aria-label='Next' pada tombol navigasi di dua komponen: banner informasi dan grafik informasi.

Sebelumnya, tombol tersebut berisi ikon chevron tanpa label eksplisit pada elemennya. Saya tetap memakai elemen tombol yang sama dan menambahkan nama untuk tindakan sebelumnya serta berikutnya.

Penambahan label ini baru menyentuh dua kelompok kontrol. Agar navigasinya dapat digunakan dengan baik, nama tombol masih perlu diperiksa bersama urutan fokus, pengoperasian keyboard, dan perubahan kontennya.

Konteks membuat label lebih jelas

Nama “Next” memberi arah tindakan, tetapi konteks halaman tetap penting. Jika ada beberapa kelompok navigasi, nama yang lebih khusus dapat membantu membedakan tujuan masing-masing.

Untuk memperjelas konteks tindakan, labelnya dapat dibuat lebih khusus seperti berikut:

<button type="button" aria-label="Tampilkan banner berikutnya">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
    <path d="m9 5 7 7-7 7" fill="none" stroke="currentColor" />
  </svg>
</button>

Dalam contoh ini, tombol menyampaikan nama tindakan, sedangkan ikon berfungsi sebagai petunjuk visual. Pemilihan label akhirnya tetap perlu diperiksa dalam konteks halaman yang sebenarnya.

Pemeriksaan tidak berhenti pada label

Bagian	Yang perlu diperiksa
Nama kontrol	Apakah tujuan tombol dapat dikenali?
Keyboard	Apakah kontrol dapat dijangkau dan dijalankan tanpa mouse?
Fokus	Apakah posisi fokus terlihat dan urutannya dapat diikuti?
Konteks	Apakah nama serta perubahan konten cukup jelas di dalam halaman?

WCAG 2.1 memberi dasar untuk memeriksa akses keyboard, fokus, serta nama, peran, dan nilai kontrol. Saya memakai bagian-bagian ini sebagai peta untuk melihat lebih jauh dari penambahan label.

Setiap bagian perlu diperiksa dalam alur yang sama. Nama yang jelas akan kurang membantu jika tombolnya sulit dijangkau atau posisi fokus tidak terlihat.

Memeriksa satu alur sampai selesai

Untuk mulai menerapkannya, saya menyarankan memilih satu alur sederhana: menemukan banner, menjangkau tombolnya, menjalankan navigasi, lalu memahami konten yang ditampilkan.

Periksa alur itu dengan keyboard dan teknologi bantu yang relevan. Catat bagian yang benar-benar diuji. Penambahan label dapat dinilai sebagai satu perbaikan, sementara pemeriksaan alur memberi bukti yang lebih luas tentang penggunaannya.

Untuk portal ini, label hanyalah langkah awal. Berikutnya saya akan memeriksa navigasi banner sebagai satu alur.

Memulai dari kontrol yang sering digunakan

Tombol ikon, navigasi, dan formulir merupakan tempat yang masuk akal untuk memulai pemeriksaan. Pilih satu kelompok kontrol, jelaskan tujuannya, lalu periksa cara pengguna menjangkau dan mengoperasikannya.

Label yang baik tidak menolong tombol yang tidak bisa dijangkau dengan keyboard. Periksa keduanya bersama.

Referensi

add button aria-label

Accessible Rich Internet Applications (WAI-ARIA) 1.2

Accessibility of web content requires semantic information about widgets, structures, and behaviors, in order to allow assistive technologies to convey appropriate information to persons with disabilities. This specification provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. These semantics are designed to allow an author to properly convey user interface behaviors and structural information to assistive technologies in document-level markup. This version adds features new since WAI-ARIA 1.1 [wai-aria-1.1] to improve interoperability with assistive technologies to form a more consistent accessibility model for [HTML] and [SVG2]. This specification complements both [HTML] and [SVG2].

https://www.w3.org/TR/2023/REC-wai-aria-1.2-20230606/

Web Content Accessibility Guidelines (WCAG) 2.1

Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make Web content more usable to users in general.

https://www.w3.org/TR/2018/REC-WCAG21-20180605/