Browser: HTML, CSS, DOM, dan Aksesibilitas · 1/8

HTML yang punya makna

Kenapa `<button>` selalu lebih baik daripada `<div>` yang bisa diklik.

Baca 25 menit

Setelah pelajaran ini kamu bisa

Memilih elemen yang mendeskripsikan sebuah hal itu *apa*
Menjelaskan apa yang diberikan `<button>` yang tidak diberikan `<div>`
Menyusun halaman dengan landmark dan urutan heading yang benar
Menjelaskan apa itu accessible name dan dari mana asalnya

HTML bukan dekorasi — ia makna. Elemen yang kamu pilih memberi tahu browser, mesin pencari, dan teknologi bantu tentang apa sebuah hal itu. Salah memilih dan kamu akan menghabiskan sejam berikutnya membangun ulang perilaku yang seharusnya diberikan platform-nya secara gratis.

Contoh button

Dua ini tampak identik setelah diberi style. Keduanya sama sekali tidak setara.

html

<!-- Looks like a button. Is not a button. -->
<div class="btn" onclick="save()">Save</div>

<!-- Is a button. -->
<button type="button" onclick="save()">Save</button>

Kamu dapat gratis	`<div>`	`<button>`
Bisa dijangkau tombol Tab	Tidak	Ya
Aktif dengan Enter dan Space	Tidak	Ya
Dibacakan sebagai "button"	Tidak	Ya
Cincin fokus	Tidak	Ya
`disabled` berfungsi	Tidak	Ya
Men-submit sebuah form	Tidak	Ya
Menu klik kanan / tekan lama	Tidak	Ya

Untuk menyetarakan <div>-nya kamu harus menambahkan tabindex="0", role="button", handler keydown untuk Enter dan Space, plus style fokus — empat hal yang bisa kamu lupakan, menggantikan satu hal yang tidak mungkin kamu lupakan.

Landmark

Landmark adalah elemen yang mendeskripsikan wilayah-wilayah sebuah halaman. Pengguna screen reader bisa melompat langsung antar landmark, seperti kamu melirik cepat dengan mata.

html

<body>
  <header>            <!-- banner: logo, site nav -->
    <nav>...</nav>
  </header>

  <main>              <!-- the unique content of THIS page. Exactly one. -->
    <h1>Villa Sunset</h1>

    <article>         <!-- self-contained: makes sense if syndicated -->
      <h2>About this venue</h2>
    </article>

    <section aria-labelledby="reviews-heading">
      <h2 id="reviews-heading">Reviews</h2>
    </section>

    <aside>...</aside> <!-- tangentially related: related venues -->
  </main>

  <footer>...</footer>
</body>

Layout proyek ini memakai <header>, <main id="main">, dan skip link yang menargetkannya — buka app/[lang]/layout.tsx dan kamu akan menemukan persis ini.

Heading itu kerangka, bukan ukuran font

<h1> sampai <h6> membentuk daftar isi. Pengguna screen reader terus-menerus bernavigasi lewat mereka. Melewati satu tingkat merusak kerangkanya — dan memilih heading berdasarkan seberapa besar tampilannya adalah cara paling umum hal itu terjadi. Pilih tingkatnya untuk struktur, lalu atur ukurannya dengan CSS.

Coba sendiri

Pemeriksaan yang dilakukan audit aksesibilitas sungguhan. Jalankan, lalu ubah kerangkanya untuk melihat apa yang ditangkapnya.

// A page's headings, in document order.
const outline = [
  { level: 1, text: "Villa Sunset" },
  { level: 2, text: "About this venue" },
  { level: 4, text: "Amenities" },        // skipped h3
  { level: 2, text: "Reviews" },
  { level: 3, text: "Recent" },
];

function auditHeadings(headings) {
  const problems = [];

const h1Count = headings.filter((h) => h.level === 1).length;
  if (h1Count === 0) problems.push("no h1: the page has no title in its outline");
  if (h1Count > 1) problems.push("more than one h1: " + h1Count + " found");

let previous = 0;
  for (const heading of headings) {
    // Going deeper by more than one level leaves a gap in the outline.
    if (previous !== 0 && heading.level > previous + 1) {
      problems.push(
        'jumped from h' + previous + ' to h' + heading.level + ' at "' + heading.text + '"'
      );
    }
    previous = heading.level;
  }
  return problems;
}

const problems = auditHeadings(outline);
console.log(problems.length === 0 ? "outline is valid" : "problems found:");
for (const p of problems) console.log("  - " + p);

console.log("");
console.log("the outline a screen reader would announce:");
for (const h of outline) {
  console.log("  " + "  ".repeat(h.level - 1) + "h" + h.level + " " + h.text);
}

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Accessible name

Setiap elemen interaktif butuh accessible name — teks yang dibacakan teknologi bantu. Ia berasal dari isi elemen itu sendiri, atau sebuah <label>, atau aria-label sebagai pilihan terakhir.

html

<!-- Best: the visible text IS the name. Nothing to keep in sync. -->
<button>Save booking</button>

<!-- An input needs a label. `for` must match the input's `id`. -->
<label for="guests">Number of guests</label>
<input id="guests" type="number" />

<!-- Icon-only button: no text, so it needs an explicit name. -->
<button aria-label="Close dialog">
  <svg aria-hidden="true">...</svg>
</button>

<!-- Broken: announced as just "button". -->
<button><svg>...</svg></button>

<!-- Broken: "click here" tells a link-list user nothing. -->
<a href="/venues">Click here</a>

aria-hidden="true" pada ikonnya itu disengaja: ikonnya dekoratif, dan button-nya sudah punya nama. Proyek ini melakukan tepat ini di setiap kontrol yang hanya berisi ikon.

Tugas praktik

Pilih situs mana pun lalu tekan Tab berulang kali, tanpa menyentuh mouse. Bisakah kamu menjangkau setiap kontrol? Bisakah kamu selalu melihat posisimu? Sekarang coba selesaikan aksi utamanya — mencari, atau menambah ke keranjang — hanya dengan keyboard. Sebagian besar situs gagal dalam sekitar sepuluh tekanan, dan itulah pengalaman setiap pengguna yang hanya memakai keyboard.

Hasil yang diharapkan

Indikator fokus terlihat di setiap perhentian, dan tugas utamanya bisa diselesaikan.