Salah satu aspek terpenting dari aksesibilitas digital adalah struktur dasar halaman. Saat membuat situs atau aplikasi menggunakan elemen struktural, bukan hanya mengandalkan gaya, Anda memberikan konteks penting kepada orang yang menggunakan teknologi bantuan (AT), seperti pembaca layar.
Elemen struktural berfungsi sebagai garis besar konten di layar, tetapi elemen tersebut juga berfungsi sebagai titik anchor untuk memudahkan navigasi dalam konten.
Saat Anda menggunakan elemen HTML semantik, makna bawaan dari 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 meningkatkan pengalaman pengguna secara keseluruhan, tetapi dalam sebagian besar situasi, salah satu dari 100+ elemen HTML yang tersedia akan berfungsi dengan cukup baik.
Meskipun modul ini berfokus pada elemen struktural yang paling banyak digunakan dan penting untuk aksesibilitas digital, tentu ada elemen tambahan dan faktor lingkungan yang perlu dipertimbangkan saat membuat struktur ke dalam situs atau aplikasi Anda. Contoh ini adalah pengantar topik, bukan bersifat menyeluruh.
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.
Penanda memastikan konten berada di area yang dapat dinavigasi. Sebaiknya Anda menyediakan setidaknya satu penanda per halaman.
Beberapa referensi menyarankan untuk menggabungkan landmark ARIA dan HTML untuk memberikan cakupan AT yang lebih baik. Meskipun jenis redundansi ini tidak akan menyebabkan masalah bagi pengguna, uji pola menggunakan pembaca layar untuk memastikannya. Jika ragu, sebaiknya gunakan elemen penanda HTML yang lebih baru secara default, karena dukungan browser sangat andal.
Mari kita bandingkan elemen penanda HTML yang dipetakan dengan peran penanda ARIA yang setara.
| Elemen penanda HTML | Peran penanda ARIA |
|---|---|
<header> |
banner |
<aside> |
komplementer |
<footer> |
contentinfo |
<nav>
|
navigation |
<main> |
utama |
<form> 1 |
formulir |
<section> 1 |
region |
Sekarang, bandingkan contoh struktur konten yang mudah 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 akan membentuk ringkasan ringkas dari keseluruhan konten halaman.
Ada enam tingkat judul yang dapat kita gunakan. Judul tingkat satu <h1> digunakan untuk
informasi tertinggi dan paling penting di halaman, yang berpindah secara bertahap ke
judul tingkat enam <h6> untuk informasi terendah dan paling tidak penting.
Urutan tingkat judul sangat penting. Idealnya, Anda tidak akan melewati
tingkat judul, misalnya, memulai bagian dengan <h1> dan segera
mengikutinya dengan <h5>. Sebagai gantinya, Anda harus melanjutkan 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 dan urutan semantik yang tepat untuk judul, pertimbangkan untuk memisahkan gaya CSS dari tingkat judul. Hal ini memungkinkan Anda lebih fleksibel dalam gaya judul sekaligus mempertahankan urutan tingkat judul. Anda tidak boleh menggunakan gaya saja untuk membuat judul, karena gaya ini tidak dilihat oleh AT sebagai judul.
Saat kita membuat judul palsu, struktur yang sesuai tidak akan disampaikan kepada pengguna AT.
Judul juga berguna bagi orang dengan gangguan kognitif dan gangguan defisit perhatian. Penting untuk membuat konten judul yang bermakna untuk membantu mereka memahami hal yang paling penting di 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 satu sama lain sehingga memberikan makna yang melekat, seperti daftar belanja Anda atau daftar tugas yang tidak pernah berakhir yang terus Anda abaikan.
Ada tiga jenis daftar HTML:
Elemen item daftar <li>
digunakan untuk merepresentasikan 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 memberi tahu pengguna AT yang tidak melihat tentang struktur daftar yang terlihat. Saat menemukan daftar semantik, AT dapat memberi tahu pengguna nama daftar dan jumlah item di dalamnya. Saat pengguna menavigasi dalam daftar, AT akan membacakan setiap item daftar dengan lantang dan memberi tahu nomor item dalam daftar—item satu dari lima, item dua dari lima, dan sebagainya.
Mengelompokkan item ke dalam daftar juga membantu orang yang dapat melihat dan memiliki gangguan perhatian serta kognisi, dan orang yang memiliki gangguan membaca, karena konten daftar biasanya ditata agar memiliki lebih banyak spasi kosong visual dan kontennya langsung pada 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
Dalam HTML, tabel umumnya digunakan untuk mengatur data atau tata letak halaman.
Bergantung pada tujuan tabel, Anda akan menggunakan elemen struktur semantik yang berbeda. Struktur tabel dapat sangat kompleks, tetapi jika Anda mematuhi aturan semantik dasar, tabel tersebut cukup mudah diakses tanpa banyak intervensi.
Tata Letak
Pada 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 penanda untuk membuat tata letak.
Meskipun pembuatan tabel tata letak sudah jarang dilakukan, ada kalanya
tabel tata letak masih digunakan, seperti dalam email, newsletter, dan
iklan yang kaya visual. 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 dengan ARIA peran presentasi 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 ditampilkan. Struktur tabel data sangat penting untuk menyampaikan informasi sederhana dan kompleks kepada pengguna.
Jika tabel disusun dengan benar, hubungan akan terbentuk antara header dan baris kolom serta data dalam tabel. Jika tidak disusun dengan benar, pengguna harus menafsirkan 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
menandai 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
menyampaikan makna dan hubungan.
<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>