Salah satu aspek terpenting dari aksesibilitas digital adalah struktur dasar halaman. Saat mem-build situs atau aplikasi menggunakan elemen struktural dan bukan hanya mengandalkan gaya, Anda memberikan konteks penting kepada orang-orang yang menggunakan teknologi pendukung (AT), seperti pembaca layar.
Elemen struktural berfungsi sebagai garis batas konten di layar, tetapi juga berfungsi sebagai titik link untuk memudahkan navigasi dalam konten.
Saat Anda menggunakan elemen HTML semantik, makna yang melekat pada setiap elemen akan diteruskan ke hierarki aksesibilitas dan digunakan oleh AT, sehingga memberikan lebih banyak makna pada konten daripada elemen non-semantik. Mungkin ada kasus saat Anda perlu menambahkan atribut ARIA tambahan untuk membangun hubungan atau untuk meningkatkan pengalaman pengguna secara keseluruhan, namun dalam sebagian besar situasi, salah satu dari 100+ elemen HTML yang tersedia semestinya sudah berfungsi dengan baik.
Meskipun modul ini berfokus pada elemen struktural yang paling banyak digunakan dan penting untuk aksesibilitas digital, tentu ada elemen dan faktor lingkungan tambahan yang perlu dipertimbangkan saat membuat struktur ke dalam situs atau aplikasi Anda. Contoh-contoh ini merupakan pengantar topik, bukan mencakup semuanya.
Tempat terkenal
Pengguna AT mengandalkan elemen struktural untuk memberi mereka informasi tentang tata letak halaman secara keseluruhan. Saat membagi area konten yang besar, Anda dapat menggunakan peran penanda ARIA atau elemen penanda HTML yang lebih baru untuk menambahkan konteks struktural ke halaman Anda.
{i>Landmark<i} memastikan konten berada di wilayah yang dapat dinavigasi. Sebaiknya sediakan setidaknya satu penanda per halaman.
Beberapa referensi menyarankan untuk menggabungkan tempat terkenal ARIA dan HTML untuk memberikan cakupan AT yang lebih baik. Meskipun jenis redundansi ini seharusnya tidak menyebabkan masalah bagi pengguna, uji polanya menggunakan pembaca layar untuk memastikannya. Jika ragu, sebaiknya secara default hanya gunakan elemen terkenal HTML yang lebih baru, karena dukungan browser sangat kokoh.
Mari kita bandingkan elemen penanda HTML yang dipetakan dengan peran penanda ARIA pasangannya.
| Elemen penanda HTML | Peran penanda ARIA |
|---|---|
<header> |
banner |
<aside> |
komplementer |
<footer> |
contentinfo |
<nav>
|
navigation |
<main> |
utama |
<form> 1 |
formulir |
<section> 1 |
region [wilayah] |
Sekarang, mari kita bandingkan contoh struktur konten yang dapat diakses.
<div>
<div>...</div>
</div>
<div>
<p>Stamp collecting, also known as philately, is
the study of postage stamps, stamped envelopes,
postmarks, postcards, and other materials relating
to postal delivery.</p>
</div>
<div>
<p>© 2022 - Stamps R Awesome</p>
</div>
<header>
<nav>...</nav>
</header>
<main>
<section aria-label="Introduction to stamp collecting">
<p>Stamp collecting, also known as philately, is
the study of postage stamps, stamped envelopes,
postmarks, postcards, and other materials relating
to postal delivery.</p>
</section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>
Judul
Jika diterapkan dengan benar, tingkat judul HTML membentuk ringkasan singkat dari keseluruhan konten halaman.
Ada enam tingkat {i>heading<i} yang dapat kita gunakan. Tajuk tingkat satu <h1> digunakan untuk informasi tertinggi dan terpenting halaman, yang bergerak secara bertahap ke judul tingkat enam <h6> untuk informasi terendah dan paling tidak penting.
Urutan tingkat {i>heading<i} itu penting. Idealnya, Anda tidak akan melewati
level judul, misalnya, memulai bagian dengan <h1> dan langsung
mengikutinya dengan <h5>. Sebagai gantinya, Anda harus membuat progres ke <h5> secara
berurutan. Urutan tingkat judul sangat penting bagi pengguna AT
karena ini adalah salah satu cara utama mereka untuk menjelajahi konten.
Untuk membantu Anda mematuhi struktur semantik yang tepat dan urutan judul, pertimbangkan untuk memisahkan gaya CSS dari level judul. Hal ini memungkinkan Anda lebih banyak fleksibilitas dalam gaya heading sekaligus mempertahankan urutan level heading. Sangat penting untuk tidak menggunakan gaya saja untuk membuat {i>heading<i}, karena gaya ini tidak terlihat oleh AT sebagai {i>heading<i}.
Ketika kita memalsukan {i>heading<i}, struktur yang sesuai tidak akan disampaikan kepada pengguna AT.
Judul juga berguna bagi orang yang mengalami gangguan kognitif dan perhatian. Sebaiknya buat konten judul yang bermakna untuk membantu mereka memahami hal terpenting pada halaman.
<div>
<h3>Stamps</h3>
<p>Stamp collecting, also known as philately, is the study of
postage stamps, stamped envelopes, postmarks, postcards, and
other materials relating to postal delivery.</p>
</div>
<div>
<h3>How do I start a stamp collection?</h3>
<h2>Equipment you will need</h2>
<h4>...</h4>
<h2>How to acquire stamps</h2>
<h4>...</h4>
<h2>Organizations you can join</h2>
<h4>...</h4>
</div>
<header>
<h1>Stamp collecting</h1>
</header>
<main>
<section aria-label="Introduction to stamp collecting">
<h2>What is stamp collecting?</h2>
<p>Stamp collecting, also known as philately, is the study of
postage stamps, stamped envelopes, postmarks, postcards, and
other materials relating to postal delivery.</p>
</section>
<section aria-label="Start a stamp collection">
<h2>How do I start a stamp collection?</h2>
<h3>Required equiment</h3>
<p>...</p>
<h3>How to acquire stamps</h3>
<p>...</p>
<h3>Organizations you can join</h3>
<p>...</p>
</section>
</main>
Daftar
Daftar HTML adalah cara untuk mengelompokkan item secara semantik yang mirip dengan satu item lainnya yang memberikan makna melekat, sama seperti daftar toko bahan makanan atau daftar tugas yang tidak ada habisnya yang selalu Anda abaikan.
Ada tiga jenis daftar HTML:
Elemen item daftar <li> digunakan untuk mewakili item dalam daftar yang diurutkan atau tidak diurutkan, sedangkan istilah deskripsi <dt> dan elemen definisi <dd> dapat ditemukan dalam daftar deskripsi.
Jika diprogram dengan benar, elemen ini dapat menginformasikan struktur daftar yang terlihat kepada pengguna AT yang tidak melihat. Saat menemukan daftar semantik, AT dapat memberi tahu pengguna nama daftar dan jumlah item yang ada di dalamnya. Saat pengguna membuka daftar, AT akan membaca setiap item daftar dengan keras dan memberitahukan nomor mana yang ada dalam daftar—item satu dari lima, item dua dari lima, dan seterusnya.
Mengelompokkan item ke dalam daftar juga akan membantu pengguna yang memiliki gangguan kognitif dan perhatian, serta mereka yang memiliki gangguan membaca, karena konten daftar biasanya diberi gaya agar memiliki lebih banyak spasi kosong visual dan kontennya langsung ke intinya.
<div>
<p>How do I start a stamp collection?</p>
<p>Equipment you will need</p>
<div>
<p>Small tongs with rounded tips</p>
<p>Stamp hinges</p>
<p>Stockbook or albumn</p>
<p>Magnifying glass</p>
<p>Stamps</p>
</div>
</div>
<div>
<h1>How do I start a stamp collection?</h1>
<h2>Equipment you will need</h2>
<ol>
<li>Small tongs with rounded tips</li>
<li>Stamp hinges</li>
<li>Stockbook or albumn</li>
<li>Magnifying glass</li>
<li>Stamps</li>
</ol>
</div>
Tabel
Di HTML, tabel umumnya digunakan untuk mengatur data atau tata letak laman.
Bergantung pada tujuan tabel, Anda akan menggunakan elemen struktural semantik yang berbeda. Tabel bisa sangat kompleks dalam struktur, tetapi jika Anda tetap berpegang pada aturan semantik dasar, tabel cukup mudah diakses tanpa banyak intervensi.
Tata Letak
Pada masa-masa awal internet, tabel tata letak adalah elemen HTML utama
yang digunakan untuk membuat struktur visual. Saat ini, kita menggunakan campuran elemen semantik dan
non-semantik seperti <div> dan tempat terkenal untuk membuat tata letak.
Meskipun pembuatan tabel tata letak sebagian besar sudah selesai, ada kalanya
tabel tata letak masih digunakan, seperti dalam email yang memiliki tampilan visual yang kaya, newsletter, dan
iklan. Dalam hal ini, tabel yang hanya digunakan untuk tata letak tidak boleh
menggunakan elemen struktural yang menyampaikan hubungan dan menambahkan konteks, seperti
<th> atau <caption>.
Tabel tata letak juga harus disembunyikan dari pengguna AT yang memiliki peran presentasi ARIA atau status aria-hidden.
<table>
<caption>My stamp collection</caption>
<tr>
<th>[Stamp Image 1]</th>
<th>[Stamp Image 2]</th>
<th>[Stamp Image 3]</th>
</tr>
</table>
<table role="presentation">
<tr>
<td>[Stamp Image 1]</td>
<td>[Stamp Image 2]</td>
<td>[Stamp Image 3]</td>
</tr>
</table>
Data
Tidak seperti tabel tata letak, yang harus disembunyikan dari pengguna AT, tabel data dan semua elemennya harus diekspos. Struktur tabel data sangat penting untuk menyampaikan informasi sederhana dan kompleks kepada pengguna.
Jika tabel terstruktur dengan benar, hubungan terbentuk antara header dan baris kolom serta data di dalam tabel. Jika tidak terstruktur dengan benar, pengguna dibiarkan untuk menguraikan makna dan konteks informasi dalam tabel.
Bergantung pada kompleksitas tabel, pembentukan hubungan melalui kode
dilakukan dengan cara yang berbeda. Langkah pertama untuk membuat tabel dapat diakses adalah
me-markup sel header dengan
<th> dan sel data
dengan elemen <td>.
Untuk tabel yang lebih kompleks, Anda mungkin perlu menggunakan elemen tabel HTML tambahan
seperti
<rowgroup>,
<colgroup>,
<caption>,
dan
scope untuk
memberikan makna dan relasi.
<table>
<tr>
<td>Animal</td>
<td>Year</td>
<td>Condition</td>
</tr>
<tr>
<td>Bird</td>
<td>1947</td>
<td>Fair</td>
</tr>
<tr>
<td>Lion</td>
<td>1982</td>
<td>Good</td>
</tr>
<tr>
<td>Horse</td>
<td>1978</td>
<td>Mint</td>
</tr>
</table>
<table>
<caption>My stamp collection</caption>
<tr>
<th>Animal</th>
<th>Year</th>
<th>Condition</th>
</tr>
<tr>
<td>Bird</td>
<td>1947</td>
<td>Fair</td>
</tr>
<tr>
<td>Lion</td>
<td>1982</td>
<td>Good</td>
</tr>
<tr>
<td>Horse</td>
<td>1978</td>
<td>Mint</td>
</tr>
</table>