Mengubah struktur HTML tidak harus dimulai dengan mendesain ulang seluruh website. Latihan yang lebih terkendali adalah memilih satu halaman artikel, memetakan bagian isinya, lalu mengganti elemen yang tidak tepat. Tampilan dapat dipertahankan sementara perubahan perilaku diperiksa terpisah. Pendekatan ini membantu membedakan masalah struktur dari masalah CSS yang muncul selama pengerjaan.
Siapkan salinan proyek atau cabang kerja sebelum mengubah halaman. Pilih artikel yang mempunyai menu, judul, beberapa subjudul, gambar, dan footer. Hindari memulai dari halaman paling rumit yang memuat banyak widget eksternal. Tujuan latihan bukan mengumpulkan sebanyak mungkin tag semantik, melainkan membuat hubungan konten lebih jelas tanpa memutus fungsi yang sudah tersedia.
Petakan isi sebelum menyentuh markup
Buka halaman dan tulis urutan bagian yang dibaca: identitas situs, menu, judul artikel, metadata, isi, bacaan terkait, dan informasi legal. Tandai mana yang merupakan isi utama dan mana yang membantu orientasi. Jika dua bagian mempunyai fungsi berbeda tetapi terlihat sama, catat perbedaannya. Peta sederhana ini menjadi dasar keputusan elemen berikutnya.
Kemudian lihat dokumen melalui panel Elements pada developer tools. Cocokkan peta tadi dengan urutan node yang sebenarnya. Layout visual dapat memindahkan kolom sehingga urutan tampilan berbeda dari sumber dokumen. Jangan langsung menganggap yang terlihat di kiri akan dibaca lebih dahulu. Periksa urutan sumber sebelum membuat perubahan pada gaya atau posisi.
Simpan kondisi pembanding
Ambil catatan tautan yang tersedia, kontrol yang berfungsi, dan lebar layar yang dipakai. Tangkapan layar membantu membandingkan tampilan, tetapi tidak menunjukkan seluruh masalah aksesibilitas. Simpan daftar heading dan hasil penelusuran keyboard. Setelah perubahan, ulangi urutan pemeriksaan yang sama sehingga perbandingannya tidak bergantung pada ingatan atau kesan sekilas saja.
Tentukan landmark halaman
Gunakan main untuk isi utama halaman dan pastikan bagian yang tidak terkait langsung tidak ikut dimasukkan tanpa alasan. Identitas situs serta navigasi dapat berada dalam header tingkat halaman. Informasi hak cipta dan tautan kebijakan dapat ditempatkan pada footer. Pertahankan kelas CSS yang diperlukan agar perubahan elemen tidak sekaligus mengubah banyak aspek visual.
Kelompok menu utama dapat memakai nav dengan nama yang membedakannya dari breadcrumb. Jangan membungkus semua kumpulan tautan kecil dalam nav hanya karena anggotanya bisa diklik. Pertimbangkan apakah kelompok tersebut benar-benar merupakan navigasi penting. Jika ada dua navigasi bermakna, nama yang berbeda membantu pengguna memilih kelompok yang dimaksud melalui teknologi bantu.
Susun artikel dan heading
Tempatkan tulisan mandiri di dalam article. Judulnya menjadi heading utama pada halaman detail, sedangkan bagian pembahasan menggunakan tingkat berikutnya sesuai hubungan isi. Metadata seperti penulis, tanggal, dan estimasi membaca diletakkan dekat judul. Gunakan time dengan nilai tanggal yang dapat diproses mesin, bukan hanya teks tampilan yang mengikuti format lokal.
Baca kembali heading tanpa paragraf. Apakah subbagian benar-benar menjelaskan bagian di atasnya? Jika tidak, ubah pengelompokan atau judul, bukan hanya nomor heading. Pada beberapa proyek, CSS lama mengikat ukuran pada nama tag. Perbaiki selector itu secara sengaja agar hierarki dokumen tidak dipaksa mengikuti ukuran huruf yang kebetulan sudah dibuat sebelumnya.
Hindari judul ganda dari template
Pada blog berbasis Markdown, judul biasanya sudah dirender oleh template halaman. Isi Markdown cukup memulai pembahasan dengan paragraf atau heading tingkat kedua. Jika penulis menambahkan judul utama lagi, halaman dapat menyajikan dua judul yang berulang. Periksa hasil HTML setelah render karena masalahnya tidak selalu terlihat dari satu file konten saja.
Periksa tautan dan tombol
Untuk perpindahan halaman, gunakan tautan dengan href yang nyata. Untuk membuka menu atau mengubah tema, gunakan tombol. Beri nama yang menjelaskan tindakan ketika tombol hanya menampilkan ikon. Mengganti elemen tidak cukup jika event handler, fokus, atau status terbuka masih salah. Uji perilakunya setelah perubahan markup, bukan hanya memastikan ikon tetap tampil.
Hindari kontrol bersarang, seperti tombol di dalam tautan kartu. Tentukan area navigasi dan tindakan terpisah bila keduanya memang diperlukan. Saat menekan Tab, fokus harus mengikuti alur yang masuk akal dan tetap terlihat. Jika menu dibuka, pastikan pengguna dapat menutupnya tanpa mouse. Jangan menghapus outline hanya karena warnanya kurang sesuai dengan rancangan visual.
Ulangi pengujian pada halaman utuh
Mulai dari lebar desktop, kemudian periksa layar sempit dengan isi artikel yang sama. Pastikan teks tidak terpotong dan urutan baca masih masuk akal. Gunakan pembaca layar jika tersedia untuk memeriksa landmark serta judul. Pemeriksaan otomatis dapat membantu menemukan sebagian masalah, tetapi tidak menggantikan penilaian apakah struktur benar-benar menjelaskan hubungan antarbagian.
Catat perubahan yang selesai dan hal yang belum diuji. Jika pengujian hanya dilakukan dengan keyboard, jangan menuliskan bahwa seluruh pembaca layar sudah didukung. Dokumentasi yang terbatas tetapi akurat lebih berguna daripada pernyataan lulus tanpa bukti. Setelah pola halaman stabil, terapkan perbaikannya pada template bersama agar artikel lain mendapat struktur yang konsisten.
Perubahan kecil yang sering terlewat
Saat mengganti pembungkus, periksa selector anak langsung karena hubungan elemen mungkin berubah. Lihat pula aturan margin bawaan heading dan daftar. Jika muncul pergeseran, perbaiki CSS berdasarkan penyebabnya daripada mengembalikan elemen yang keliru. Tujuannya menjaga tampilan sekaligus memperbaiki struktur, bukan memilih salah satunya.
Pastikan tautan lewati konten menuju ID yang tersedia. ID tidak boleh terduplikasi setelah komponen dipakai ulang. Klik tautannya dan perhatikan perpindahan fokus bila header menempel di layar. Judul tujuan jangan tertutup navigasi.
