CP-A: Standar Web - Semantik, Responsif, Aksesibilitas
Tujuan Pembelajaran
Setelah mempelajari materi ini, siswa mampu:
Menjelaskan konsep semantik dalam struktur web
Memahami prinsip desain responsif dan mobile-first
Mengidentifikasi elemen-elemen aksesibilitas dasar pada website
Menerapkan standar web dalam evaluasi situs existing
1. Standar Web: Semantik
Apa itu Semantik Web?
Semantik = Makna yang jelas dalam struktur HTML
Mengapa Semantik Penting?
Mesin pencari memahami konten lebih baik
Screen reader dapat navigasi dengan mudah
Developer lain mudah memahami kode
Maintenance lebih mudah
Elemen Semantik HTML5
Struktur Utama
<header> <!-- Bagian kepala halaman/artikel -->
<nav> <!-- Menu navigasi -->
<main> <!-- Konten utama halaman -->
<article> <!-- Konten mandiri (blog post, berita) -->
<section> <!-- Bagian dalam artikel/halaman -->
<aside> <!-- Konten sampingan (sidebar) -->
<footer> <!-- Bagian kaki halaman/artikel -->Contoh Struktur Semantik
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Blog Sekolah</title>
</head>
<body>
<header>
<h1>SMK Teknologi Informasi</h1>
<nav>
<ul>
<li><a href="#beranda">Beranda</a></li>
<li><a href="#berita">Berita</a></li>
<li><a href="#kontak">Kontak</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>Juara Lomba Programming</h2>
<time datetime="2024-09-28">28 September 2024</time>
</header>
<p>Tim programming sekolah berhasil meraih juara...</p>
</article>
</main>
<aside>
<h3>Berita Terkait</h3>
<ul>
<li><a href="#">Lomba Web Design</a></li>
<li><a href="#">Workshop AI</a></li>
</ul>
</aside>
<footer>
<p>© 2024 SMK Teknologi Informasi</p>
</footer>
</body>
</html>Hierarki Heading yang Benar
<h1>Judul Utama Halaman</h1>
<h2>Judul Bagian</h2>
<h3>Sub-bagian</h3>
<h3>Sub-bagian Lain</h3>
<h2>Bagian Selanjutnya</h2>
<h3>Sub-bagian</h3>
<h4>Detail Sub-bagian</h4>❌ Salah:
<h1>Judul</h1>
<h3>Melompat ke h3</h3> <!-- Tidak boleh melompat level -->2. Standar Web: Responsif
Apa itu Desain Responsif?
Desain yang menyesuaikan tampilan berdasarkan ukuran layar perangkat
Prinsip Mobile-First
Mulai dari layar terkecil (mobile)
Tambahkan fitur untuk layar lebih besar
Progressive enhancement - tidak degradation
Breakpoint Standar
/* Mobile First */
/* Base styles untuk mobile (320px+) */
/* Tablet */
@media (min-width: 768px) {
/* Styles untuk tablet */
}
/* Desktop */
@media (min-width: 1024px) {
/* Styles untuk desktop */
}
/* Large Desktop */
@media (min-width: 1200px) {
/* Styles untuk desktop besar */
}Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">Contoh Layout Responsif
/* Mobile (default) */
.container {
width: 100%;
padding: 1rem;
}
.sidebar {
width: 100%;
margin-bottom: 1rem;
}
.main-content {
width: 100%;
}
/* Tablet & Desktop */
@media (min-width: 768px) {
.container {
display: flex;
max-width: 1200px;
margin: 0 auto;
}
.sidebar {
width: 25%;
margin-right: 2rem;
margin-bottom: 0;
}
.main-content {
width: 75%;
}
}Gambar Responsif
<!-- Gambar yang menyesuaikan ukuran container -->
<img src="image.jpg" alt="Deskripsi gambar" style="max-width: 100%; height: auto;">
<!-- Gambar dengan resolusi berbeda -->
<img src="image-small.jpg"
srcset="image-small.jpg 480w,
image-medium.jpg 768w,
image-large.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 50vw,
25vw"
alt="Deskripsi gambar">3. Standar Web: Aksesibilitas (A11y)
Apa itu Aksesibilitas Web?
Aksesibilitas = Web dapat digunakan oleh semua orang, termasuk:
Pengguna dengan disabilitas visual
Pengguna dengan disabilitas motorik
Pengguna dengan disabilitas kognitif
Pengguna dengan koneksi lambat
Prinsip WCAG 2.1
Perceivable (Dapat dipersepsi)
Operable (Dapat dioperasikan)
Understandable (Dapat dipahami)
Robust (Kokoh/kompatibel)
1. Kontras Warna yang Memadai
Standar Kontras WCAG
Normal text: minimum 4.5:1
Large text (18pt+ atau 14pt+ bold): minimum 3:1
UI components: minimum 3:1
Tools untuk Cek Kontras
WebAIM Contrast Checker
Chrome DevTools
Colour Contrast Analyser
Contoh Kontras
/* ❌ Kontras buruk */
.bad-contrast {
color: #999999; /* Abu-abu muda */
background: #ffffff; /* Putih */
/* Rasio: 2.85:1 - TIDAK MEMENUHI STANDAR */
}
/* ✅ Kontras baik */
.good-contrast {
color: #333333; /* Abu-abu tua */
background: #ffffff; /* Putih */
/* Rasio: 12.63:1 - MEMENUHI STANDAR */
}2. Alt Text untuk Gambar
Kapan Menggunakan Alt Text
<!-- Gambar informatif -->
<img src="chart.png" alt="Grafik menunjukkan peningkatan 25% penjualan bulan ini">
<!-- Gambar dekoratif -->
<img src="decoration.png" alt="" role="presentation">
<!-- Gambar dalam link -->
<a href="contact.html">
<img src="phone-icon.png" alt="Hubungi kami">
</a>
<!-- Gambar kompleks -->
<img src="complex-chart.png" alt="Grafik penjualan Q1-Q4 2024">
<p>Deskripsi detail: Penjualan Q1 $50K, Q2 $75K, Q3 $100K, Q4 $125K menunjukkan tren naik konsisten.</p>Tips Menulis Alt Text
Ringkas tapi deskriptif
Hindari "gambar dari..." atau "foto tentang..."
Sertakan informasi penting yang dikomunikasikan gambar
Kosongkan (
alt="") untuk gambar dekoratif
3. Struktur Heading yang Benar
<!-- ✅ Hierarki yang benar -->
<h1>Berita Sekolah</h1>
<h2>Prestasi Siswa</h2>
<h3>Lomba Programming</h3>
<h3>Lomba Desain Web</h3>
<h2>Kegiatan Sekolah</h2>
<h3>Workshop AI</h3>
<!-- ❌ Hierarki yang salah -->
<h1>Berita Sekolah</h1>
<h4>Prestasi Siswa</h4> <!-- Melompat dari h1 ke h4 -->4. Navigasi Keyboard dan Fokus
/* Fokus yang terlihat jelas */
a:focus,
button:focus,
input:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
/* Jangan hilangkan outline */
/* ❌ JANGAN LAKUKAN INI */
*:focus {
outline: none;
}Tab Order yang Logis
<!-- Gunakan tabindex hanya jika perlu -->
<nav>
<a href="#main" tabindex="1">Skip to main content</a> <!-- Skip link -->
<a href="home.html" tabindex="2">Home</a>
<a href="about.html" tabindex="3">About</a>
<a href="contact.html" tabindex="4">Contact</a>
</nav>5. Form yang Accessible
<form>
<!-- Label yang jelas -->
<label for="nama">Nama Lengkap *</label>
<input type="text" id="nama" name="nama" required
aria-describedby="nama-help">
<div id="nama-help">Masukkan nama sesuai KTP</div>
<!-- Fieldset untuk grup input -->
<fieldset>
<legend>Jenis Kelamin</legend>
<input type="radio" id="laki" name="gender" value="L">
<label for="laki">Laki-laki</label>
<input type="radio" id="perempuan" name="gender" value="P">
<label for="perempuan">Perempuan</label>
</fieldset>
<!-- Error message -->
<div role="alert" aria-live="polite" id="error-message" style="display: none;">
Harap isi semua field yang wajib diisi
</div>
</form>Aktivitas Praktik
1. Analisis Semantik Website
Instruksi:
Kunjungi 3 website berbeda (berita, e-commerce, sekolah)
Periksa struktur HTML menggunakan Developer Tools
Identifikasi:
Apakah menggunakan elemen semantik?
Apakah hierarki heading benar?
Apakah ada landmark yang jelas?
2. Test Responsif
Instruksi:
Buka website di browser
Gunakan Developer Tools → Device Mode
Test di berbagai ukuran:
Mobile (375px)
Tablet (768px)
Desktop (1200px)
Catat masalah yang ditemukan
3. Audit Aksesibilitas Dasar
Instruksi:
Gunakan keyboard saja (tanpa mouse) untuk navigasi
Cek kontras warna dengan WebAIM Contrast Checker
Periksa alt text pada gambar
Test dengan screen reader (NVDA/JAWS jika ada)
Checklist Evaluasi Standar Web
✅ Semantik
Menggunakan elemen HTML5 semantik
Hierarki heading logis (h1→h2→h3)
Landmark jelas (header, nav, main, footer)
Konten terstruktur dengan baik
✅ Responsif
Meta viewport tag ada
Layout menyesuaikan di mobile, tablet, desktop
Gambar responsif
Text readable di semua ukuran layar
Tidak ada horizontal scroll di mobile
✅ Aksesibilitas
Kontras warna minimum 4.5:1
Semua gambar punya alt text yang sesuai
Navigasi bisa menggunakan keyboard
Fokus terlihat jelas
Form punya label yang jelas
Sumber Belajar Tambahan
Tools & Resources
HTML Validator: validator.w3.org
Contrast Checker: webaim.org/resources/contrastchecker
Accessibility Checker: wave.webaim.org
Mobile Test: search.google.com/test/mobile-friendly
Screen Reader: NVDA (gratis), JAWS (berbayar)
Dokumentasi
MDN Web Docs: developer.mozilla.org
WCAG Guidelines: w3.org/WAI/WCAG21/quickref
HTML5 Semantic Elements: w3schools.com/html/html5_semantic_elements.asp
Assessment Rubrik
Kriteria | 4 (Excellent) | 3 (Good) | 2 (Fair) | 1 (Needs Improvement) |
|---|---|---|---|---|
Pemahaman Semantik | Menjelaskan dengan jelas dan memberikan contoh konkret | Menjelaskan dengan baik | Pemahaman dasar | Pemahaman terbatas |
Analisis Responsif | Mengidentifikasi semua masalah dan memberikan solusi | Mengidentifikasi masalah utama | Mengidentifikasi beberapa masalah | Mengidentifikasi masalah minimal |
Evaluasi Aksesibilitas | Audit menyeluruh dengan rekomendasi spesifik | Audit baik dengan beberapa rekomendasi | Audit dasar | Audit terbatas |
Penerapan Standar | Menggunakan tools dan metodologi yang tepat | Menggunakan beberapa tools dengan baik | Penggunaan tools dasar | Penggunaan tools minimal |