Intinya...

Konten yang saling terkait harus diatur ke dalam bagian-bagian yang jelas menggunakan heading.

Apa itu WCAG 2.4.10?

Heading atau judul bagian membantu mengatur konten, sehingga pengguna lebih mudah memahami struktur halaman dan menemukan informasi. Heading berfungsi sebagai penanda mental yang memudahkan pengguna menavigasi bagian-bagian konten, terutama pada halaman yang panjang atau kompleks.

Heading tidak perlu panjang atau rumit; yang penting cukup jelas menggambarkan isi dari konten yang mengikutinya. Ini membantu semua pengguna, terutama yang menggunakan teknologi bantu, untuk lebih cepat menemukan informasi yang mereka butuhkan.

Perbedaan

WCAG 2.4.6 Heading dan Label memastikan bahwa heading dan label cukup bermakna dan deskriptif agar berguna. Sementara itu, WCAG 2.4.10 Heading Bagian memastikan bahwa konten tersusun dan terstruktur dengan baik ke dalam bagian-bagian.

Mengapa ini penting?

Tanpa heading yang jelas, pengguna bisa dengan mudah merasa tersesat atau kewalahan dengan banyaknya informasi di halaman. Mereka mungkin kesulitan memahami struktur konten atau membuang waktu untuk mencari bagian tertentu.

Heading membantu pengguna mengatur konten secara mental dan memudahkan navigasi menggunakan teknologi bantu. Jika heading tidak jelas atau tidak ada, pengguna akan merasa frustrasi dan kesulitan memahami keseluruhan struktur halaman atau berpindah antar bagian.

Pengguna pembaca layar sering menavigasi halaman berdasarkan level heading, langsung melompat ke bagian seperti "FAQ" atau "Kontak" tanpa harus membaca seluruh halaman. Jika heading hilang atau urutannya tidak teratur, navigasi jadi membingungkan atau bahkan tidak mungkin dilakukan.

Siapa yang terdampak?

Pengguna netra, pengguna dengan disabilitas kognitif, dan pengguna dengan keterbatasan mobilitas.

Pengguna netra yang menggunakan screen reader mengandalkan heading untuk langsung melompat ke bagian-bagian halaman. Tanpa heading, mereka bisa kesulitan memahami struktur konten atau membuang waktu untuk mencari bagian yang diinginkan.

Pengguna dengan disabilitas kognitif menggunakan heading untuk membagi konten menjadi bagian-bagian kecil yang lebih mudah dipahami dan diolah.

Pengguna dengan keterbatasan mobilitas yang mengandalkan navigasi keyboard atau teknologi bantu lainnya menggunakan heading untuk berpindah antar bagian, sehingga navigasi menjadi lebih efisien bagi mereka yang tidak bisa menggunakan mouse atau bergantung pada perintah suara.

Cara menerapkan 2.4.10

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

Gunakan heading untuk setiap bagian

Tandai bagian-bagian konten dengan heading yang jelas. Ini membuat konten lebih mudah diikuti, terutama pada halaman yang panjang. Heading membantu pengguna memindai halaman dan langsung menuju bagian yang mereka minati.

Misalnya, daripada menampilkan satu blok teks panjang untuk menjelaskan sebuah konsep, carilah cara untuk membaginya ke dalam beberapa bagian agar lebih mudah dibaca.

Dua buah teks panjang

Ilustrasi dua panel menunjukkan perbedaan aksesibilitas saat heading digunakan sebelum dan sesudah. Panel pertama menunjukkan tata letak yang berantakan tanpa heading yang tepat, sedangkan panel kedua menampilkan heading yang jelas dan meningkatkan keterbacaan serta navigasi.

Gunakan hierarki heading yang tepat

Heading harus digunakan dalam urutan hierarki yang logis, misalnya, <h1> diikuti oleh <h2>, atau <h2> diikuti oleh <h3>. Ini membantu pengguna dan teknologi bantu memahami bagaimana konten disusun.

Jika halamanmu memiliki heading utama seperti "Aardvark Introduction", diikuti oleh subheading seperti "How Aardvarks Do It" dan "The Aardvark’s Big Reveal", pastikan semuanya diberi tag dengan benar.

<h1>Meet the Aardvark: Our Introduction</h1>
<p>Welcome to the fascinating world of aardvarks!
In this section, we'll dig into all things aardvark, from
their burrows to their long, snouty noses.</p>

<h2>How Aardvarks Do It: The Methodology</h2>
<p>Just like aardvarks dig deep to find ants,
we've dug into the details of aardvark behavior to
bring you the most fascinating facts about these quirky
creatures.</p>

<h2>The Aardvark's Big Reveal: The Results</h2>
<p>Here's what we discovered! From their nocturnal
habits to their love for digging, the aardvark has
some surprising tricks up its sleeve.</p>

Buat heading yang ringkas dan informatif

Heading tidak perlu panjang, tapi harus jelas dan spesifik. Hindari judul samar seperti "Bagian 1" atau "Part A" yang tidak memberi gambaran apa isi bagiannya. Lihat WCAG 2.4.6 Heading dan Label untuk detail lebih lanjut tentang cara membuat heading yang informatif.

Gunakan heading untuk konten Non-teks

Bagian yang berisi konten non-teks, seperti gambar atau video, juga perlu diberi heading yang jelas. Misalnya, heading seperti "Tinjauan Video Aardvark" membuat isi setelahnya jadi lebih mudah dipahami.

Potongan sebuah konten web yang terdiri dari teks dan video

Tampilan bagian video aardvark yang diberi label jelas dengan heading 'Aardvark Video Overview' diikuti dengan deskripsi isi kontennya. Ini membantu pengguna memahami konten yang mengikuti heading tersebut, serta meningkatkan aksesibilitas untuk elemen non-teks seperti video.

Penutup

Heading membantu memberi struktur dan kejelasan pada kontenmu, memudahkan semua pengguna untuk menavigasi dan memahami informasi yang disajikan. Dengan mengikuti kriteria keberhasilan ini, kamu membantu semua orang menemukan apa yang mereka butuhkan dan lebih mudah terlibat dengan kontenmu.