Intinya...

Informasi dan relasi visual (seperti label, heading, atau pengelompokan) juga harus juga disampaikan dalam kode menggunakan

  • HTML semantik (misalnya <label for="">, <ul>, <h1>), atau
  • atribut ARIA (misalnya aria-describedby, role="group"),

sehingga teknologi bantu dapat memahami strukturnya.

Apa itu WCAG 1.3.1?

Konten web sering kali menyertakan petunjuk visual atau audio kecil untuk menunjukkan bagaimana berbagai hal saling terhubung. Hal-hal seperti tata letak, warna, simbol, teks tebal atau miring, pengelompokan tabel, dan efek suara, membantu kita memahami makna dan struktur. Contohnya:

  • Teks tebal mungkin menunjukkan sesuatu yang penting.
  • Kolom formulir yang dikelompokkan menunjukkan bahwa mereka terkait.
  • Bunyi denting/bel bisa menandakan adanya konten baru di halaman.

Petunjuk-petunjuk ini memudahkan pengguna yang bisa melihat atau mendengar untuk memahami makna dan struktur konten. Namun, bagi pengguna screen reader atau mereka yang tidak dapat melihat layar, petunjuk ini tidak akan tersedia kecuali jika ditanamkan ke dalam kode HTML atau ARIA yang sesuai.

Konten dan tabel tanpa heading

Halaman web tanpa markup semantik vs. halaman dengan markup semantik untuk membantu mengatur dan memberikan informasi tambahan pada petunjuk halus dan pengelompokan konten.

Mengapa ini penting?

Pengguna yang tidak bisa melihat atau mendengar konten tidak akan menangkap maknanya jika hanya disampaikan secara visual atau audio. Teknologi bantu seperti screen reader membutuhkan bantuan tambahan dalam bentuk kode yang tepat agar bisa menyampaikan informasi tersebut kepada pengguna.

Bahkan hal kecil seperti jarak antar elemen atau perubahan ukuran font bisa menyampaikan makna penting. Tanpa markup yang benar, relasi-relasi ini akan hilang bagi pengguna teknologi bantu.

Siapa yang terpengaruh?

Pengguna low vision dan penglihatan terbatas dan pengguna netra ganda (deaf-blind).

Pengguna screen reader bergantung pada struktur kode untuk memahami halaman. Jika struktur itu hanya ada secara visual, maka kontennya akan sulit, bahkan tidak mungkin, untuk dipahami.

Cara menerapkan WCAG 1.3.1

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

HTML semantik dan struktur HTML

Mengidentifikasi wilayah halaman dengan landmark

Landmark membantu pengguna teknologi bantu melompat ke bagian penting dari halaman tanpa harus membaca semuanya baris demi baris. Landmark dibuat menggunakan tag HTML semantik seperti:

  • <header>: Biasanya berisi elemen yang berlaku untuk seluruh situs seperti logo dan navigasi
  • <nav>: Digunakan untuk menu atau tautan internal dalam halaman
  • <main>: Menandai konten utama halaman

Menggunakan tag-tag ini membantu pengguna teknologi bantu langsung menuju bagian halaman yang mereka butuhkan.

Markup semantik yang menyusun halaman web: header, main, aside, footer, nav.

Contoh landmark dan penempatannya dalam sebuah halaman web.

Markup untuk Elemen Semantik

Gunakan tag HTML yang tepat untuk setiap jenis konten agar teknologi bantu dapat memahami apa itu:

  • Judul: <h1>, <h2>, dll.
  • Paragraf: <p>
  • Tautan: <a>
  • Kutipan: <blockquote> atau <cite>
  • Singkatan: <abbr>

Selain itu, pastikan urutan elemen logis. Misalnya, jangan lompat dari <h1> ke <h4>, karena itu dapat membingungkan bagi pengguna teknologi bantu.

Contoh:

<h1>How to find an Aardvark</h1>
<p>Step One: Finding an Aardvark is a challenging feat. It takes bravery, determination, and most importantly…</p>
<cite>Steve Irwin</cite>
<a href="aardvarkfinder.com">How to find Aardvarks in more detail</a>

Judul (heading)

Menurut survei screen reader WebAIM 2023, lebih dari 70% pengguna menavigasi menggunakan judul.

Ini menjadikan struktur judul sangat penting. Hal ini membantu pengguna melompat antar bagian dan memahami bagaimana konten diorganisir hanya dengan mendengarkan.

Judul yang terorganisir dengan baik memungkinkan pengguna untuk menavigasi halaman dan memahami konten.

Konten dengan heading yang berurut dari H1-H3

Heading yang disusun secara cermat membantu pengguna menavigasi dan memahami konten.

Daftar (list) dan kelompok tautan

Daftar harus selalu menggunakan elemen daftar HTML yang tepat:

  • <ul> untuk daftar tidak terurut (daftar berpoin)
  • <ol> untuk daftar terurut (daftar bernomor)
  • <li> untuk setiap item daftar

Jangan menggunakan tanda hubung, bintang, atau pemisah baris untuk meniru daftar secara visual. Teknologi bantu tidak akan mengenali mereka sebagai daftar kecuali jika mereka diberi markup yang benar.

Petunjuk gaya (style cues)

Warna, ukuran, dan gaya (seperti teks tebal atau miring) dapat membantu menekankan konten, tetapi mereka tidak berarti banyak bagi pengguna yang tidak dapat melihatnya.

Sebagai contoh, jika tanda bintang merah (*) digunakan untuk menunjukkan kolom formulir yang wajib diisi, pastikan untuk menjelaskan dalam teks bahwa kolom tersebut wajib diisi, atau gunakan markup formulir yang tepat agar screen reader dapat mengumumkannya.

Tabel

Jika kontenmu diatur seperti spreadsheet atau grid, di mana informasi ada dalam baris dan kolom, kamu perlu menggunakan markup tabel HTML yang benar:

  • <table> untuk tabel
  • <tr> untuk baris tabel
  • <th> untuk judul kolom tabel
  • <td> untuk sel tabel

Juga, sertakan <caption> untuk memberikan tabel sebuah judul, yang membantu pengguna memahami fungsinya.

<table>
    <caption>Sunset and Sunrise Times for March in Los Angeles</caption>
    ...
</table>

Hindari menggunakan tab atau kolom yang dibuat hanya dengan pemisahan jarak, karena teknologi bantu tidak dapat memahami hal tersebut.

Kontrol formulir

Setiap field formulir (seperti input teks) memerlukan tag <label> yang sesuai, yang terhubung dengan atribut for. Ini memberi tahu pengguna untuk apa setiap field digunakan dan membuat formulir lebih mudah digunakan, terutama bagi pengguna teknologi bantu atau mereka yang memiliki tantangan motorik.

<label for="firstname">First name:</label>
<input id="firstname" name="firstname" type="text">

Pengelompokkan untuk kontrol formulir terkait

Untuk set field yang terkait (seperti informasi alamat atau beberapa checkbox), kelompokkan mereka menggunakan <fieldset> dan <legend> untuk memberi pengguna konteks tambahan.

<fieldset>
    <legend>Your Residential Address</legend>
    <div>
        <label for="raddress">Address:</label>
        <input autocomplete="street-address" id="raddress" name="raddress" type="text">
    </div>
    <div>
        <label for="rzip">Postal/Zip Code:</label>
        <input autocomplete="postal-code" id="rzip" name="rzip" type="text">
    </div>
</fieldset>

Form dengan input Name, Email, Street, State, Zip, dan Apt number

Kelompok field formulir untuk mengumpulkan alamat

Landmark dan role ARIA

HTML pertama, ARIA kedua. ARIA (Accessible Rich Internet Applications) hanya boleh digunakan ketika tidak ada solusi HTML asli.

ARIA untuk mengidentifikasi wilayah halaman

Atribut role ARIA memungkinkan kamu memberi label pada berbagai wilayah halaman, sama seperti tag semantik.

  • <div role="banner"> site logo and name, etc. here </div>
  • <div role="search"> search functionality here </div>
  • <div role="navigation"> a list of navigation links here </div>

Atribut aria-labelledby

Ini membantu menghubungkan elemen-elemen bersama. Misalnya, sebuah judul atau label dapat menggambarkan sebuah wilayah, bidang formulir, atau grup kontrol.

ARIA untuk mengidentifikasi judul

Jika kamu tidak bisa menggunakan tag <h1>-<h6> karena sistem lama, kamu bisa menggunakan:

<div role="heading">Breaking News: Aardvark Species Learns Sign Language</div>

Namun, tag heading asli selalu lebih baik jika memungkinkan.

Kesimpulan

WCAG 1.3.1 adalah salah satu area masalah yang paling sering dijumpai di web, dan salah satu yang paling penting untuk aksesibilitas dunia nyata.

Jika kontenmu memiliki makna dalam tata letak, gaya, struktur, atau suara, pastikan makna tersebut juga tertanam dalam kode. Dengan cara itu, semua orang, termasuk pengguna teknologi bantu, dapat memahami seluruh cerita dan bergerak melalui kode kamu dengan percaya diri.