Tutorial HTML / Aksesibilitas HTML: judul, tautan, gambar, dan papan ketik

HTML yang dapat diakses dimulai dengan memilih elemen berdasarkan maknanya. Gunakan judul secara berurutan, tulis tautan yang mengungkapkan tujuannya, berikan alternatif yang sesuai untuk gambar, dan pastikan orang dapat melakukan interaksi menggunakan keyboard.

Gunakan judul untuk menggambarkan hierarki

Sebuah judul bukan hanya teks besar. Judul menandai sebuah tingkat dalam dokumen: Sebuah topik halaman dapat menggunakan h1, bagian utama h2 dan sub-bagian mereka h3. Jangan langsung lompat ke h4 hanya karena Anda suka ukuran standarnya; sesuaikan tampilan dengan CSS. Seseorang yang hanya membaca judul harus dapat memahami rencana halaman. Bandingkan tingkat judul dan paragraf dalam contoh judul dan paragraf.

Misalnya, "Informasi Pengiriman" bisa menjadi bagian utama, dengan "Zona Pengiriman" dan "Waktu Pengiriman" sebagai subbagian. Hindari judul kosong atau judul yang tidak sesuai dengan teks berikutnya. Hierarki judul membantu orang membaca secara visual dan menavigasi dengan teknologi pembantu.

Buat Tautan dan Gambar Menjadi Mudah Dipahami

Daftar tautan yang semuanya disebut "di sini" memberikan sedikit petunjuk tentang tujuannya. Berikan tujuan dalam teks tautan, seperti di <a href="guide.html">Baca panduan pengguna</a>. Jika tautan mengunduh sebuah file, sebutkan jenisnya dalam konteks sekitarnya. Periksa alternatif gambar yang sesuai untuk peran dan ukurannya dalam Gambar: img, Teks Alternatif, dan Ukuran.

Teks alt dari sebuah gambar informatif harus menyampaikan informasi yang disediakan di sini. Gambar yang sepenuhnya dekoratif, yang mengulang teks serupa, dapat menggunakan alt="". Gambar yang digunakan sebagai tautan juga harus menunjukkan tujuan tautannya, misalnya "Buka manual pengguna." Hindari mencantumkan setiap warna atau bentuk yang terlihat jika fungsi adalah hal yang penting. Pohon keputusan W3C WAI untuk gambar membantu menentukan alternatif yang tepat.

Coba halaman tanpa menggunakan mouse

1. Gunakan Tab untuk menavigasi melalui tautan, bidang formulir, dan tombol.
2. Pastikan elemen yang difokuskan teridentifikasi secara jelas
3. Aktifkan kontrol dengan Enter atau Spasi, tergantung kasus.
4. Jika sebuah formulir melaporkan kesalahan, bacalah, kembali ke bidang tersebut, perbaiki nilainya, dan kirim lagi.

Sebuah div dengan hanya satu pengelola klik tidak otomatis memperoleh makna atau perilaku keyboard dari sebuah tombol. Gunakan a untuk navigasi dan button untuk aksi. Ketika sebuah menu atau konten yang dapat dibuka ditutup, periksa ke mana fokus keyboard dipindahkan berikutnya. Fokus tidak boleh hilang di dalam konten tersembunyi, dan urutan navigasi sebaiknya kira-kira mengikuti urutan pembacaan. Periksa penetapan eksplisit nama bidang dengan latihan klik pada label di agar label dan input terhubung dengan benar .

Biasanya sebuah tautan yang difokuskan dibuka dengan Enter, sementara sebuah tombol diaktifkan dengan Enter atau Spasi. Memilih elemen yang sesuai dengan navigasi atau aksi memberikan pengguna keyboard perilaku yang diharapkan, alih-alih memaksa sebuah tautan meniru tombol atau sebaliknya.

Sebuah halaman kecil untuk pengujian manual

Simpan seluruh kode di accessible-page.html. Unduh gambar contoh dengan lebar 960 piksel dan letakkan di samping file HTML dengan nama file aslinya. Formulir ini dimaksudkan untuk validasi dan inspeksi nilai-nilai GET, bukan untuk menerima pesan.

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Tes Keyboard</title>
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    img { max-width: 100%; height: auto; }
    input { max-width: 100%; font: inherit; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <a href="#main-content">Ke konten utama</a>
  <header>
    <nav aria-label="Di halaman ini">
      <a href="#guide">Petunjuk kunjungan</a>
      <a href="#contact">Latihan kontak</a>
    </nav>
  </header>
  <main id="main-content" tabindex="-1">
    <h1>Panduan dari Taman Kecil</h1>
    <section id="guide">
      <h2>Petunjuk kunjungan</h2>
      <p>Siapkan sepatu yang nyaman dan air minum.</p>
      <img src="html-image-sample-lake-tree-960-v1.webp"
           alt="Sebuah pohon di sebuah pulau kecil di tengah danau, dengan gunung di latar belakang" width="960" height="540">
    </section>
    <section id="contact">
      <h2>Berlatih dengan bidang kontak</h2>
      <form method="get">
        <label for="practice-email">Email (wajib)</label>
        <input id="practice-email" name="email" type="email"
               aria-describedby="email-help" required>
        <p id="email-help">Gunakan name@example.com alih-alih alamat asli.</p>
        <button type="submit">Periksa nilai yang dimasukkan</button>
      </form>
    </section>
  </main>
</body>
</html>

1. Tekan Tab sekali untuk memfokuskan tautan lompat, lalu tekan Enter untuk melewati menu berulang dan menuju ke konten utama.
2. Elemen utama dengan tabindex="-1" dapat menerima fokus tanpa menambahkan titik tab normal tambahan. Periksa bahwa gerakan berikutnya dengan Tab mengikuti urutan membaca yang masuk akal.
3. Pergi ke formulir dan bandingkan pengiriman kosong, nilai tidak valid seperti abc, dan alamat tes yang diformat dengan benar. Label dan instruksinya harus tetap tersedia saat memasukkan data.
4. Periksa teks, gambar, dan bidang pada 390px dan dengan zoom. Ganti nama sementara gambar untuk memeriksa teks alternatifnya, lalu kembalikan nama file.

HTML menyediakan semantik dan interaksi asli; CSS menyediakan tata letak dan penanganan visual dari fokus. Pesan kesalahan kustom atau menu yang kompleks mungkin memerlukan pengelolaan tambahan dari status dan fokus melalui JavaScript. Lulus latihan ini tidak menjamin bahwa halaman memenuhi semua persyaratan aksesibilitas.

Tutorial W3C-WAI tentang Struktur Halaman

Memahami apa yang dapat dan tidak dapat dibuktikan oleh tes

Seorang pemeriksa otomatis dapat mendeteksi kesalahan markup tertentu, tetapi dia tidak selalu dapat menilai apakah sebuah tautan dapat dipahami atau apakah deskripsi sebuah gambar berguna dalam konteksnya. Gabungkan hasil dari alat-alat tersebut dengan pengujian menggunakan keyboard, zoom, dan jika perlu, pembaca layar. Mulailah dengan jalur pengguna penting di situs web, daripada menganggap laporan tanpa kesalahan sebagai jaminan. Panduan MDN tentang aksesibilitas HTML membahas elemen HTML asli lebih lanjut.