Pendahuluan
Website modern bukan hanya tentang visual.
Ia harus:
- Cepat
- Accessible
- Mudah dipahami mesin pencari
Accessibility bukan opsi. Ia adalah standar profesional.
1. Gunakan Semantic Tag
Jangan gunakan <div> untuk semuanya.
Gunakan elemen yang memang sesuai fungsinya:
<header>
<nav>...</nav>
</header>
<main>
<section>
<article>
<h1>Judul Artikel</h1>
<p>Konten...</p>
</article>
</section>
</main>
<footer>...</footer>Semantic HTML membantu:
- Struktur SEO lebih jelas
- Screen reader memahami hierarki
- Maintainability lebih baik
2. Alt Text pada Image
Setiap gambar harus memiliki alt yang deskriptif.
import Image from 'next/image'
<Image
src="/team.jpg"
alt="Tim developer sedang berdiskusi di ruang meeting"
width={1200}
height={800}
/>Alt text bukan untuk SEO semata — tapi untuk aksesibilitas pengguna screen reader.
3. Gunakan Button untuk Action
Jangan gunakan div untuk klik handler.
<button type="button">
Submit
</button>Keuntungannya:
- Bisa diakses via keyboard
- Fokus state otomatis
- Semantik jelas
4. Fokus State yang Jelas
Pastikan elemen interaktif memiliki focus ring.
Dengan Tailwind:
className="focus:outline-none focus:ring-2 focus:ring-primary"Keyboard navigation harus terasa natural.
5. Gunakan Heading Hierarchy yang Benar
Jangan lompat dari h1 ke h4.
Struktur ideal:
<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Sub Section</h3>Ini membantu:
- SEO
- Screen reader
- Struktur konten
Kesimpulan
Website profesional bukan hanya indah.
Ia harus:
- Terstruktur
- Inklusif
- SEO-friendly
- Mudah diakses semua pengguna
Accessibility meningkatkan kualitas produk secara menyeluruh.
