Validasi dan Audit

Validator W3C, Lighthouse, dan penelusuran hanya dengan papan ketik.

Daftar isi

Validasi dan audit adalah tahap penutup proyek yang memeriksa ketiga halamannya dengan alat pemeriksa sekaligus penelusuran manual. Topik ini membahas daftar periksa markup, validator W3C untuk kesesuaian spesifikasi, Lighthouse untuk aksesibilitas, SEO, dan praktik terbaik, serta penelusuran halaman hanya dengan papan ketik. Setelah semua langkahnya dijalankan pada setiap halaman, proyek dapat dinyatakan selesai dengan bukti pemeriksaan yang tercatat.

Daftar periksa markup#

Pemeriksaan markup dimulai dari daftar tetap yang dijalankan per halaman, karena sebagian besar temuan tidak memerlukan alat apa pun selain membuka berkasnya. Butir-butirnya diambil langsung dari bukti penyelesaian jalur, yaitu sebagai berikut.

Landmark lengkap berupa header, nav, main, dan footer, dengan satu main per halaman.
Tepat satu h1, dan tingkat judul berikutnya menurun tanpa melompat.
Setiap img memiliki teks alt yang bermakna beserta width dan height.
Setiap kontrol formulir berlabel label yang terhubung melalui for dan id, dan kelompok kontrolnya dibungkus fieldset berlegend.
Setiap tabel memiliki caption beserta scope pada seluruh sel kepalanya.
Atribut lang pada html, meta charset, viewport, serta title dan meta description yang khas per halaman.

Daftar itu sengaja tidak memuat kontras warna. Kontras ditetapkan oleh CSS, sehingga pemeriksaannya berada di luar markup dan diambil alih oleh Lighthouse pada bagian berikutnya. Kebalikannya juga berlaku, karena Lighthouse tidak menandai struktur fieldset yang terlewat sedetail pemeriksaan manual, sehingga kedua alat itu saling melengkapi dan bukan saling menggantikan. Halaman Koleksi ikut diperiksa dengan daftar yang sama, karena pembangunannya mengikuti pola yang sudah dicontohkan pada Beranda, terutama tabel dengan caption dan scope.

Validator W3C#

Validator W3C memeriksa kesesuaian markup dengan spesifikasi HTML, dan layanannya dibuka pada validator.w3.org. Tiga cara masukannya tersedia, yaitu memasukkan URL, mengunggah berkas, dan menempelkan markup langsung pada kolom yang disediakan. Untuk proyek yang masih berupa berkas lokal, cara unggah berkas paling praktis, dan validatornya sama dengan layanan daring Nu Html Checker yang dipakai situs W3C.

Laporan hasilnya dibaca dari atas ke bawah. Setiap pesan mencantumkan jenisnya, yaitu error untuk pelanggaran spesifikasi dan info atau warning untuk catatan praktik, ditambah nomor baris dan potongan markup yang menampilkannya. Pesan pertama sering memicu pesan-pesan lanjutan, misalnya satu tag yang tidak tertutup membuat validator salah menempatkan batas elemen di bawahnya. Karena itu, perbaikan dikerjakan dari pesan teratas, lalu halaman divalidasi ulang sampai laporannya berakhir dengan pernyataan tidak ada error maupun warning. Kedua berkas utuh halaman proyek telah diperiksa dengan layanan ini dan menghasilkan nol pesan, dan itulah keadaan akhir yang dituju.

Validasi juga dapat dijalankan dari terminal dengan mengirim berkasnya ke validator yang sama.

bash

# tidak-dijalankan
# mengirim beranda.html ke validator W3C (butuh koneksi internet)
curl -s -H "Content-Type: text/html; charset=utf-8" \
     --data-binary @beranda.html \
     "https://validator.w3.org/nu/?out=json"

Parameter out=json membuat jawabannya berupa data JSON, yaitu larik messages yang memuat type, lastLine, message, dan potongan extract untuk setiap pesan. Bentuk JSON itu nyaman untuk dicatat ke dalam tabel temuan, sedangkan bentuk HTML bawaannya nyaman dibaca langsung di browser.

Lighthouse dari DevTools#

Lighthouse menjalankan halaman lalu menilainya per kategori, dan kategori yang relevan untuk proyek ini adalah Accessibility, Best Practices, dan SEO. Auditnya dibuka dari panel Lighthouse pada DevTools browser Chrome, dengan langkah sebagai berikut.

Buka halaman yang diaudit pada tab browser, lalu buka DevTools dengan tombol F12.
Pilih panel Lighthouse, kemudian tentukan kategori Accessibility, Best Practices, dan SEO beserta mode perangkatnya.
Tekan tombol Analyze page load, lalu tunggu auditnya selesai dijalankan.
Baca skornya per kategori, kemudian buka setiap audit yang gagal untuk melihat elemen dan baris yang menimbulkan temuan.
Perbaiki markup yang ditunjuk, jalankan ulang auditnya, dan catat perubahannya.

Skor berupa angka 0 sampai 100 per kategori dengan tiga rentang warna sebagai penandanya. Skor sempurna bukan tujuan yang diperlakukan mutlak, karena yang dinilai hanyalah daftar audit otomatisnya, dan banyak hal yang tidak tercakup olehnya.

Audit yang sama dapat dijalankan dari baris perintah, dan versi daringnya tersedia pada web.dev/measure untuk halaman yang sudah dipublikasikan.

bash

# tidak-dijalankan
# menjalankan server lokal sebagai sasaran audit (butuh python3)
python3 -m http.server 8000
# menjalankan Lighthouse pada halaman Kontak (butuh Chrome dan koneksi internet)
npx lighthouse http://localhost:8000/kontak.html --only-categories=accessibility,seo,best-practices

Audit kontras warna muncul di sini dan bukan pada validator, karena kontrasnya dihitung dari CSS halaman yang dirender. Temuan semacam itu diperbaiki pada lembar gayanya, sedangkan temuan struktur tetap kembali ke markup.

Penelusuran hanya dengan papan ketik#

Penelusuran papan ketik memeriksa halaman dari sudut yang tidak terlihat oleh kedua alat sebelumnya, yaitu apakah seluruh fiturnya dapat dioperasikan tanpa tetikus. Prosedurnya dijalankan per halaman sebagai berikut.

Muat ulang halaman, lalu tekan Tab hingga fokus masuk ke halamannya, dan tautan pertama yang menerima fokus seharusnya skip link.
Aktifkan skip link dengan Enter, dan fokusnya berpindah langsung ke konten utama.
Lanjutkan Tab melewati seluruh halaman sambil mencatat urutannya, karena urutan fokus mengikuti urutan markup.
Tekan Shift+Tab untuk berpindah mundur dan memastikan tidak ada elemen yang terlewati, dengan penanda fokus yang terlihat pada setiap langkah.
Pada halaman Kontak, lintasi seluruh kontrol formulir, gunakan tombol panah untuk berpindah pilihan pada kelompok radio, lalu tekan Enter pada tombol kirimnya.
Ulangi pada halaman lain, dan tekan Escape bila ada komponen yang terbuka, misalnya dialog, meskipun proyek ini belum memakainya.

Kelima tombol itu meliputi seluruh kebutuhan proyek, yaitu Tab dan Shift+Tab untuk berpindah, Enter untuk mengaktifkan tautan, tombol, dan pengiriman, tombol panah untuk pilihan di dalam kelompok radio, serta Escape untuk menutup komponen yang terbuka. Temuan yang paling sering muncul pada tahap ini adalah tautan atau tombol yang tidak menerima fokus sama sekali, dan penyebabnya hampir selalu berupa elemen yang dibangun dari div atau span alih-alih elemen interaktif bawaan.

Contoh temuan dan perbaikannya#

Skrip berikut meniru pemeriksaan statis sederhana atas satu draf halaman yang sengaja memuat lima pelanggaran lazim, sehingga jenis temuannya dapat dibandingkan dengan temuan dari alat pemeriksa.

js Pemeriksa statis sederhana atas satu draf halaman

// pemeriksa statis sederhana untuk lima pelanggaran markup yang sering muncul
const halaman = `
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Pratinjau Koleksi</title>
</head>
<body>
  <img src="sampul-buku.svg" width="240" height="160">
  <h1>Koleksi perpustakaan</h1>
  <h3>Rak Sastra</h3>
  <table>
    <thead>
      <tr><th scope="col">Judul</th><th scope="col">Status</th></tr>
    </thead>
    <tbody>
      <tr><td>Antologi cerita warga</td><td>Tersedia</td></tr>
    </tbody>
  </table>
  <input id="cari" type="text" placeholder="Cari judul">
</body>
</html>
`;

const temuan = [];

// html tanpa atribut lang
if (!/<html\b[^>]*\blang=/.test(halaman)) {
  temuan.push("1. html tanpa atribut lang (validator) — tambahkan lang=\"id\"");
}

// img tanpa atribut alt
const img = halaman.match(/<img\b[^>]*>/g) || [];
img.forEach(t => {
  if (!/\balt=/.test(t)) {
    temuan.push("2. img tanpa atribut alt (validator) — tulis deskripsi gambarnya");
  }
});

// hierarki judul yang melompat tingkat
const tingkat = [...halaman.matchAll(/<h([1-6])\b/g)].map(m => Number(m[1]));
for (let i = 1; i < tingkat.length; i++) {
  if (tingkat[i] - tingkat[i - 1] > 1) {
    temuan.push(`3. judul melompat dari h${tingkat[i - 1]} ke h${tingkat[i]} (Lighthouse) — ganti menjadi h2`);
  }
}

// tabel tanpa caption
const tabel = (halaman.match(/<table\b/g) || []).length;
const caption = (halaman.match(/<caption\b/g) || []).length;
if (tabel > caption) {
  temuan.push(`4. tabel tanpa caption (${tabel - caption} dari ${tabel}) (daftar periksa) — tambahkan caption`);
}

// input tanpa label terkait
const ids = [...halaman.matchAll(/<input\b[^>]*\bid="([^"]+)"/g)].map(m => m[1]);
const sasaran = new Set([...halaman.matchAll(/<label\b[^>]*\bfor="([^"]+)"/g)].map(m => m[1]));
ids.forEach(id => {
  if (!sasaran.has(id)) {
    temuan.push(`5. input "${id}" tanpa label terkait (Lighthouse) — tambahkan label for="${id}"`);
  }
});

console.log(`Total temuan: ${temuan.length}`);
temuan.forEach(t => console.log(t));

text Keluaran

Total temuan: 5
1. html tanpa atribut lang (validator) — tambahkan lang="id"
2. img tanpa atribut alt (validator) — tulis deskripsi gambarnya
3. judul melompat dari h1 ke h3 (Lighthouse) — ganti menjadi h2
4. tabel tanpa caption (1 dari 1) (daftar periksa) — tambahkan caption
5. input "cari" tanpa label terkait (Lighthouse) — tambahkan label for="cari"

Kelima temuan itu mewakili tiga sumber pemeriksaan yang berbeda, dan tabel berikut mencontohkan cara temuan serupa dicatat pada draf awal proyek sebelum diperbaiki.

Halaman	Temuan	Alat pemeriksa	Perbaikan
Beranda	Tabel jam buka tanpa caption	daftar periksa manual	tambahkan `caption` “Jam buka mingguan”
Koleksi	Judul rak melompat dari `h1` ke `h3`	Lighthouse, audit heading order	ubah judul rak menjadi `h2`
Kontak	Kolom telepon tanpa label terkait	Lighthouse, audit label kontrol formulir	tambahkan `label for="telepon"`
Kontak	Teks bantuan kontrasnya rendah	Lighthouse, audit kontras	perbaiki warna pada lembar gaya
Semua	`html` tanpa atribut `lang`	Validator W3C	tambahkan `lang="id"`

Baris kontras pada tabel itu menegaskan pembatasan modul ini, yaitu perbaikannya ditulis pada CSS dan bukan pada markup. Baris-baris lainnya seluruhnya berakhir dengan perubahan markup, dan setiap perbaikan diverifikasi ulang dengan alat yang sama sampai temuannya hilang.

Langkah audit akhir per halaman#

Audit akhir menyatukan seluruh pemeriksaan di atas ke dalam satu putaran per halaman, dan hasilnya dicatat agar keputusan “selesai” memiliki dasarnya. Urutannya sebagai berikut.

Validasi setiap berkas HTML pada validator W3C sampai laporannya tidak memuat error.
Jalankan Lighthouse pada setiap halaman dengan kategori Accessibility, Best Practices, dan SEO, lalu catat setiap audit yang gagal.
Telusuri setiap halaman hanya dengan papan ketik mengikuti prosedur pada bagian sebelumnya.
Centang daftar periksa markup untuk setiap halaman, butir demi butir.
Perbaiki seluruh temuan, mulai dari pesan validator karena sifatnya paling mendasar, lalu jalankan ulang pemeriksaannya.

Satu putaran jarang menuntaskan semuanya sekaligus, karena perbaikan pada satu halaman bisa menimbulkan temuan baru pada halaman lain, misalnya kerangka yang disalin ulang tetap memuat judul halaman lama. Karena itu putaran pemeriksaan diulang sampai seluruh temuan bertahap habis, dan catatan temuannya menjadi dokumen penutup proyek. Setiap catatan menunjuk halaman dan alat pemeriksanya, sehingga putaran berikutnya tidak menebak-nebak sumber temuannya.

Kesalahan umum#

Memperlakukan semua pesan validator sebagai error. Pesan error menandai pelanggaran spesifikasi, sedangkan info dan warning menandai catatan praktik yang tidak menggagalkan halaman. Baca jenis setiap pesannya, dan prioritaskan error terlebih dahulu.

Mengaudit satu halaman dan mewakilkan sisanya. Formulir hanya ada pada Kontak, tabel hanya pada Beranda dan Koleksi, sehingga temuan tidak berpindah antarhalaman. Audit dijalankan pada setiap halaman, dan hasilnya dicatat per halaman.

Menghentikan pemeriksaan pada skor Lighthouse. Skor yang tinggi tidak menjamin urutan fokus yang benar dan makna teks alt yang tepat, karena keduanya menuntut penilaian manusia. Penelusuran papan ketik dan daftar periksa manual tetap dijalankan setelah audit otomatisnya.

Ringkasan#

Pemeriksaan proyek berlapis tiga, yaitu daftar periksa markup, audit otomatis dengan validator W3C dan Lighthouse, serta penelusuran papan ketik per halaman.
Laporan validator dibaca dari pesan teratas dan divalidasi ulang sampai tidak memuat error, sedangkan temuan Lighthouse dibuka per audit beserta elemen yang ditunjuknya.
Kontras warna diperiksa Lighthouse dan diperbaiki pada CSS, sedangkan temuan struktur diperbaiki pada markup.
Audit akhir dijalankan per halaman dan diulang sampai seluruh temuan habis, sehingga proyek dinyatakan selesai dengan catatan yang dapat diperiksa ulang.

Referensi#

W3C Markup Validation Service — Layanan validasi markup resmi W3C beserta tiga cara memasukkan dokumennya.
Lighthouse overview — Chrome for Developers — Dokumentasi resmi Lighthouse beserta kategori audit dan cara menjalankannya.
Measure — web.dev — Versi daring Lighthouse untuk halaman yang sudah dipublikasikan.
Keyboard Compatibility — W3C WAI — Ringkasan kebutuhan navigasi papan ketik beserta videonya.