Salah satu aspek terpenting dari aksesibilitas digital adalah fondasi struktur halaman. Saat Anda membuat situs web atau aplikasi menggunakan elemen struktural sebagai gantinya dengan mengandalkan gaya saja, Anda memberikan konteks penting kepada orang-orang yang menggunakan teknologi baru (AT), seperti pembaca layar (screen reader).
Elemen struktural berfungsi sebagai garis besar konten pada layar, tetapi mereka berfungsi sebagai titik link untuk memudahkan navigasi dalam konten.
Saat Anda menggunakan elemen HTML semantik, makna yang melekat dari setiap elemen diteruskan ke pohon aksesibilitas dan digunakan oleh AT, memberikan lebih banyak makna pada konten daripada elemen non-semantik. Mungkin ada kasus saat Anda perlu menambahkan atribut ARIA tambahan untuk membuat yang lebih baik atau untuk meningkatkan pengalaman pengguna secara keseluruhan, tetapi pada umumnya itu, salah satu dari lebih dari 100 elemen HTML akan tersedia akan bekerja cukup baik dengan sendirinya.
Sementara modul ini berfokus pada elemen struktural yang paling banyak digunakan, terhadap aksesibilitas digital, tentu ada elemen dan faktor lingkungan yang perlu dipertimbangkan saat membangun struktur ke dalam {i>website<i} atau . Contoh-contoh ini merupakan pengantar topik, bukan menyeluruh.
Tempat terkenal
Pengguna AT bergantung pada elemen struktural untuk memberi mereka informasi tentang keseluruhan tata letak halaman. Saat membagi kumpulan konten yang luas, Anda dapat gunakan peran penanda ARIA atau elemen penanda HTML yang lebih baru untuk menambahkan konteks struktural ke halaman Anda.
Tempat terkenal memastikan konten berada di wilayah yang dapat dinavigasi. Sebaiknya Anda menyediakan setidaknya satu penanda per halaman.
Beberapa referensi menyarankan penggabungan ARIA dan penanda HTML bersama-sama 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 gunakan hanya kode HTML yang lebih baru secara {i>default<i} elemen {i>landmark<i}, sebagaimana dukungan browser sangat andal.
Mari bandingkan elemen {i>landmark<i} HTML sebagai dipetakan ke 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, mari kita 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, level heading HTML membentuk kerangka ringkas dari keseluruhan konten laman.
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
tingkat atas enam <h6> untuk informasi terendah dan paling tidak penting.
Urutan level {i>heading<i} adalah penting. Idealnya, Anda tidak
akan melewati
tingkat judul, misalnya, memulai bagian dengan <h1> dan langsung
mengikutinya dengan <h5>. Sebagai gantinya, Anda harus melanjutkan ke <h5> di
pesanan. 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 {i>heading<i}, pertimbangkan untuk memisahkan gaya CSS dari tingkat heading. Hal ini memungkinkan Anda lebih banyak fleksibilitas dalam gaya tajuk dengan tetap mempertahankan urutan tingkat judul. Sebaiknya jangan menggunakan gaya sendiri untuk membuat {i>heading<i}, karena tidak dilihat oleh AT sebagai {i>heading<i}.
Jika kami memalsukan judul, struktur yang sesuai tidak akan disampaikan kepada pengguna AT.
Pemberian {i>heading<i} juga berguna bagi orang-orang dengan defisit kognitif dan perhatian Google. Sebaiknya buat konten tajuk yang bermakna untuk membantu mereka memahami hal yang paling penting di halaman Anda.
<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 artinya, seperti daftar toko kelontong atau daftar tugas yang tidak pernah berakhir tetap abaikan.
Ada tiga jenis daftar HTML:
Item daftar <li>
digunakan untuk mewakili item dalam daftar yang diurutkan atau tidak, sedangkan
istilah deskripsi
<dt> dan definisi
Elemen <dd> dapat
dapat ditemukan dalam daftar deskripsi.
Ketika diprogram dengan benar, elemen-elemen ini dapat memberi tahu pengguna AT yang tidak terlihat tentang struktur daftar yang terlihat. Ketika AT bertemu dengan daftar semantik, maka dapat memberi tahu pengguna nama daftar dan berapa banyak item yang ada di dalamnya. Sebagai pengguna menavigasi dalam daftar, AT akan membacakan setiap item daftar dengan keras dan memberi tahu nomor mana yang ada dalam daftar—item satu dari lima, item dua dari lima, dan seterusnya.
Mengelompokkan barang ke dalam daftar juga membantu orang-orang dengan penglihatan normal yang memiliki gangguan atensi dan gangguan membaca, karena konten dalam 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 laman.
Bergantung pada tujuan tabel, Anda akan menggunakan struktural semantik yang berbeda yang kurang penting. Tabel bisa sangat kompleks strukturnya, tetapi ketika Anda tetap berpegang pada aturan semantik dasar, mereka cukup dapat diakses tanpa banyak intervensi.
Tata Letak
Pada awal internet, tabel tata letak adalah elemen HTML utama
digunakan untuk
membangun struktur visual. Saat ini, kita menggunakan
campuran antara semantik dan
elemen non-semantik seperti <div> dan penanda untuk membuat tata letak.
Sementara hari-hari membuat tabel tata letak sebagian
besar berakhir, ada kalanya
tabel tata letak umum masih digunakan, seperti dalam
email dengan tampilan memukau, newsletter, dan
periklanan. 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 tersembunyi aria.
<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 dan informasi yang kompleks kepada pengguna.
Jika tabel disusun dengan benar, hubungan antar kolom akan terbentuk {i>header<i} dan baris serta data dalam tabel. Ketika terstruktur dengan tidak benar, pengguna dibiarkan untuk menguraikan makna dan konteks informasi dalam tabel sementara.
Tergantung pada kompleksitas tabel, membentuk relasi melalui kode adalah
dicapai dengan cara
yang berbeda. Langkah pertama agar
tabel dapat diakses adalah
untuk menandai sel
{i>header<i} 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 ke
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>