Intinya...

Tujuan dari wilayah dan elemen yang umum harus didefinisikan dengan kode HTML semantik atau atribut ARIA, agar

  • teknologi bantu bisa menginformasikan maknanya, dan
  • browser bisa mengadaptasi atau menyederhanakan tampilannya (misal menyembunyikan konten tidak esensial).

Apa itu WCAG 1.3.6?

Pedoman ini berkaitan dengan memberikan makna tambahan pada tombol, ikon, dan bagian halaman dengan cara yang dapat dipahami oleh teknologi bantu. Kamu tidak hanya memberi tahu browser "Ini adalah tombol", tetapi juga menjelaskan fungsi tombol tersebut. Misalnya, "Ini adalah tombol pengaturan." Dengan demikian, teknologi bantu dapat:

  • Menampilkan ikon yang familiar alih-alih sesuatu yang membingungkan
  • Menggunakan label yang lebih sederhana
  • Membiarkan pengguna menyembunyikan bagian halaman yang tidak mereka perlukan

Tujuannya adalah untuk memudahkan pengguna dalam menyesuaikan pengalaman mereka, terutama bagi mereka yang mengandalkan alat yang menyederhanakan konten.

Perbandingan cepat:

WCAG 1.3.6 Identifikasi Tujuan sangat berkaitan dengan beberapa kriteria keberhasilan lainnya:

Sementara itu, 1.3.6 melangkah lebih jauh. Ini mendefinisikan mengapa komponen ada, membantu pengguna menyesuaikan bagaimana tampilan atau perilaku elemen di halaman.

Perbandingan button dengan atau tanpa tujuan yang jelas

Di sebelah kiri, ada tombol ikon roda gigi generik dengan scren reader yang mengumumkan 'Tombol', dan tanda tanya ditampilkan. Di sebelah kanan, tombol yang sama namun telah ditambahkan makna semantik; screen reader mengucapkan 'Tombol Pengaturan', dan sebuah panah menunjukkan elemen tombol yang diperbarui setelah alat bantu mengakses mengganti tombol tersebut dengan tombol berisi teks.

Mengapa ini penting?

Jika tujuan dari tombol, tautan, atau ikon tidak jelas, pengguna mungkin tidak tahu apa yang dilakukan elemen tersebut, terutama bagi pengguna dengan disabilitas kognitif yang bergantung pada tata letak dan simbol yang sudah dikenal.

Tanpa informasi tambahan dalam kode, teknologi bantu tidak dapat menawarkan opsi yang dipersonalisasi seperti:

  • Mengganti ikon yang membingungkan dengan ikon yang lebih sederhana
  • Menyembunyikan konten yang tidak penting untuk mengurangi kekacauan
  • Menyoroti tindakan yang penting

Ketika komponen diberi label dengan jelas dalam kode, pengguna dapat menyesuaikan apa yang mereka lihat untuk menyesuaikan dengan cara mereka berpikir dan menavigasi.

Perbandungan dua halaman web yang dijelaskan di caption

Gambar atas menunjukkan halaman web yang berantakan dengan banyak tombol dan wilayah yang terlihat. Di bawahnya, halaman yang sama disederhanakan, wilayah yang tidak penting disembunyikan, lebih sedikit tombol yang ditampilkan, dan ikon diganti dengan teks.

Siapa yang terpengaruh?

Pengguna dengan disabilitas kognitif seperti tantangan dalam memori, perhatian, pemrosesan bahasa, atau pengambilan keputusan.

Beberapa pengguna lebih bergantung pada ikon daripada kata-kata. Lainnya membutuhkan tata letak yang lebih bersih untuk fokus atau mengurangi rasa kewalahan. Teknologi bantu dapat membantu, tetapi hanya jika kode dengan jelas mengidentifikasi tujuan setiap elemen.

Ketika tujuan elemen dikodekan dengan benar, teknologi bantu dapat melakukan hal-hal seperti menyederhanakan halaman, menampilkan ikon kustom, atau mengurangi gangguan, menjadikan pengalaman lebih dapat digunakan dan kurang menegangkan.

Cara menerapkan WCAG 1.3.6

Bagian ini menawarkan penjelasan yang disederhanakan dan contoh-contoh untuk membantu kamu memulai. Untuk panduan lengkap, selalu rujuk ke dokumentasi resmi WCAG.

Elemen markup untuk menyatakan tujuan dengan jelas

Alih-alih hanya memberi label sesuatu dengan "tombol," beri tahu teknologi bantu apa fungsinya, seperti "Langkah berikutnya" atau "Buka bantuan."

HTML Semantik Selalu gunakan tag HTML yang benar. Mereka membawa makna yang dapat diproses oleh alat bantu:

  • <button> untuk tindakan
  • <a> untuk tautan
  • <form>, <input>, <label> untuk formulir
  • <nav>, <main>, <footer> untuk struktur halaman

Label yang bermakna

Buatlah label yang deskriptif. Pikirkan apa yang perlu diketahui seseorang jika mereka tidak dapat melihat halaman tersebut.

<button>Next Step</button>
<a href="/help">Visit Help Center</a>

Atribut alt yang bermakna pada ikon

Saat menggunakan ikon untuk tautan atau tombol, jangan hanya menjelaskan ikon tersebut. Jelaskan apa yang dilakukan oleh ikon tersebut.

<a href="/notification">
    <img src="bell-icon.svg" alt="Notification">
</a>

Ikon bel tidak seharusnya ditulis "bel", tapi harus disebut "Notification".

Landmark ARIA

Gunakan peran ARIA untuk memberi label bagian-bagian halaman sehingga pengguna bisa melewati, menyembunyikan, atau fokus pada bagian tersebut.

<nav role="navigation">...</nav>
<main role="main">...</main>
<aside role="complementary">...</aside>

Ini membantu alat bantu untuk menyoroti atau mengabaikan area sesuai dengan preferensi pengguna.

Praktik terbaik untuk mengidentifikasi tujuan elemen

Beberapa atribut sangat berguna untuk aksesibilitas, tetapi tidak cukup hanya dengan atribut ini untuk memenuhi pedoman ini.

aria-invalid dan aria-required untuk formulir

Atribut-atribut ini membantu pengguna memahami status input pada formulir:

  • aria-required memberi tahu teknologi bantu bahwa field formulir harus diisi
  • aria-invalid memberi tahu pengguna bahwa input tersebut ada kesalahan

Mereka berguna untuk memberikan umpan balik, tetapi tidak cukup untuk mengidentifikasi tujuan.

Markup microdata

Microdata (seperti Schema.org) menambahkan makna tambahan di balik layar, tetapi teknologi bantu belum sering menggunakannya untuk memahami elemen UI.

Namun, hal ini bisa menjadi lebih berguna di masa depan, terutama untuk alat personalisasi seiring dengan berkembangnya web.

Kesimpulan

WCAG 1.3.6 tentang memberikan lebih dari sekedar struktur. ini tentang tujuan. Dengan menuliskan tujuan tombol, ikon, dan bagian halaman, kamu membantu alat bantu menyesuaikan antarmuka dan pengalaman sesuai dengan kebutuhan setiap pengguna. Hal ini membuat web menjadi lebih pribadi, lebih mudah digunakan, dan lebih inklusif, terutama bagi orang-orang yang membutuhkan pengalaman yang disederhanakan sesuai dengan cara mereka membutuhkannya.