# Membuat Halaman Web yang Dapat Diakses ![Semua Tentang Aksesibilitas](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.id.png) > Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey title Your Accessibility Learning Adventure section Foundation Understanding Users: 5: You Testing Tools: 4: You POUR Principles: 5: You section Build Skills Semantic HTML: 4: You Visual Design: 5: You ARIA Techniques: 4: You section Master Practice Keyboard Navigation: 5: You Form Accessibility: 4: You Real-world Testing: 5: You ``` ## Kuis Sebelum Pelajaran [Kuis sebelum pelajaran](https://ff-quizzes.netlify.app/web/) > Kekuatan Web terletak pada universalitasnya. Akses oleh semua orang, terlepas dari disabilitas, adalah aspek yang penting. > > \- Sir Timothy Berners-Lee, Direktur W3C dan penemu World Wide Web Ada sesuatu yang mungkin mengejutkan Anda: saat Anda membangun situs web yang dapat diakses, Anda tidak hanya membantu orang dengan disabilitas—Anda sebenarnya membuat web lebih baik untuk semua orang! Pernah melihat potongan trotoar di sudut jalan? Awalnya dirancang untuk kursi roda, tetapi sekarang membantu orang dengan kereta bayi, pekerja pengiriman dengan troli, pelancong dengan koper beroda, dan pengendara sepeda juga. Begitulah cara desain web yang dapat diakses bekerja—solusi yang membantu satu kelompok sering kali akhirnya bermanfaat bagi semua orang. Keren, kan? Dalam pelajaran ini, kita akan menjelajahi cara membuat situs web yang benar-benar bekerja untuk semua orang, tidak peduli bagaimana mereka menjelajahi web. Anda akan menemukan teknik praktis yang sudah terintegrasi dalam standar web, mencoba alat pengujian, dan melihat bagaimana aksesibilitas membuat situs Anda lebih mudah digunakan oleh semua pengguna. Pada akhir pelajaran ini, Anda akan memiliki kepercayaan diri untuk menjadikan aksesibilitas sebagai bagian alami dari alur kerja pengembangan Anda. Siap menjelajahi bagaimana pilihan desain yang bijaksana dapat membuka web untuk miliaran pengguna? Mari kita mulai! ```mermaid mindmap root((Web Accessibility)) Users Screen readers Keyboard navigation Voice control Magnification Technologies HTML semantics ARIA attributes CSS focus indicators Keyboard events Benefits Wider audience Better SEO Legal compliance Universal design Testing Automated tools Manual testing User feedback Real assistive tech ``` > Anda dapat mengikuti pelajaran ini di [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! ## Memahami Teknologi Bantu Sebelum kita mulai coding, mari luangkan waktu untuk memahami bagaimana orang dengan kemampuan berbeda benar-benar mengalami web. Ini bukan hanya teori—memahami pola navigasi dunia nyata ini akan membuat Anda menjadi pengembang yang jauh lebih baik! Teknologi bantu adalah alat yang luar biasa yang membantu orang dengan disabilitas berinteraksi dengan situs web dengan cara yang mungkin mengejutkan Anda. Setelah Anda memahami cara kerja teknologi ini, menciptakan pengalaman web yang dapat diakses menjadi jauh lebih intuitif. Ini seperti belajar melihat kode Anda melalui mata orang lain. ### Pembaca layar [Pembaca layar](https://en.wikipedia.org/wiki/Screen_reader) adalah teknologi canggih yang mengubah teks digital menjadi output suara atau braille. Meskipun terutama digunakan oleh orang dengan gangguan penglihatan, mereka juga sangat membantu bagi pengguna dengan disabilitas belajar seperti disleksia. Saya suka menganggap pembaca layar seperti memiliki narator yang sangat pintar membaca buku untuk Anda. Ia membaca konten dengan suara keras dalam urutan logis, mengumumkan elemen interaktif seperti "tombol" atau "tautan," dan menyediakan pintasan keyboard untuk melompat-lompat di halaman. Tapi inilah masalahnya—pembaca layar hanya bisa bekerja dengan baik jika kita membangun situs web dengan struktur yang tepat dan konten yang bermakna. Di sinilah peran Anda sebagai pengembang! **Pembaca layar populer di berbagai platform:** - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (gratis dan paling populer), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (bawaan) - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (bawaan dan sangat canggih) - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (bawaan) - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (gratis dan open-source) **Cara pembaca layar menavigasi konten web:** Pembaca layar menyediakan beberapa metode navigasi yang membuat penjelajahan efisien bagi pengguna berpengalaman: - **Pembacaan berurutan**: Membaca konten dari atas ke bawah, seperti membaca buku - **Navigasi landmark**: Melompat antar bagian halaman (header, nav, main, footer) - **Navigasi heading**: Melompat antar heading untuk memahami struktur halaman - **Daftar tautan**: Menghasilkan daftar semua tautan untuk akses cepat - **Kontrol formulir**: Menavigasi langsung antar bidang input dan tombol > 💡 **Ini yang mengejutkan saya**: 68% pengguna pembaca layar menavigasi terutama melalui heading ([Survei WebAIM](https://webaim.org/projects/screenreadersurvey9/#finding)). Ini berarti struktur heading Anda seperti peta jalan bagi pengguna—ketika Anda melakukannya dengan benar, Anda benar-benar membantu orang menemukan jalan mereka di sekitar konten Anda lebih cepat! ### Membangun alur kerja pengujian Anda Berita baik—pengujian aksesibilitas yang efektif tidak harus membingungkan! Anda akan ingin menggabungkan alat otomatis (mereka sangat bagus untuk menangkap masalah yang jelas) dengan beberapa pengujian langsung. Berikut pendekatan sistematis yang menurut saya menangkap sebagian besar masalah tanpa memakan waktu seharian: **Alur kerja pengujian manual yang penting:** ```mermaid flowchart TD A[🚀 Start Testing] --> B{⌨️ Keyboard Navigation} B --> C[Tab through all interactive elements] C --> D{🎧 Screen Reader Testing} D --> E[Test with NVDA/VoiceOver] E --> F{🔍 Zoom Testing} F --> G[Zoom to 200% and test functionality] G --> H{🎨 Color/Contrast Check} H --> I[Verify all text meets contrast ratios] I --> J{👁️ Focus Management} J --> K[Ensure focus indicators are visible] K --> L[✅ Testing Complete] style A fill:#e3f2fd style L fill:#e8f5e8 style B fill:#fff3e0 style D fill:#f3e5f5 style F fill:#e0f2f1 style H fill:#fce4ec style J fill:#e8eaf6 ``` **Daftar periksa pengujian langkah demi langkah:** 1. **Navigasi keyboard**: Gunakan hanya Tab, Shift+Tab, Enter, Space, dan tombol panah 2. **Pengujian pembaca layar**: Aktifkan NVDA, VoiceOver, atau Narrator dan navigasikan dengan mata tertutup 3. **Pengujian zoom**: Uji pada tingkat zoom 200% dan 400% 4. **Verifikasi kontras warna**: Periksa semua teks dan komponen UI 5. **Pengujian indikator fokus**: Pastikan semua elemen interaktif memiliki status fokus yang terlihat ✅ **Mulai dengan Lighthouse**: Buka DevTools browser Anda, jalankan audit aksesibilitas Lighthouse, lalu gunakan hasilnya untuk memandu area fokus pengujian manual Anda. ### Alat zoom dan pembesaran Anda tahu bagaimana kadang-kadang Anda mencubit untuk memperbesar di ponsel Anda saat teks terlalu kecil, atau menyipitkan mata di layar laptop Anda di bawah sinar matahari terang? Banyak pengguna mengandalkan alat pembesaran untuk membuat konten dapat dibaca setiap hari. Ini termasuk orang dengan gangguan penglihatan, orang dewasa yang lebih tua, dan siapa saja yang pernah mencoba membaca situs web di luar ruangan. Teknologi zoom modern telah berkembang melampaui sekadar membuat sesuatu lebih besar. Memahami cara kerja alat ini akan membantu Anda menciptakan desain responsif yang tetap fungsional dan menarik pada tingkat pembesaran apa pun. **Kemampuan zoom browser modern:** - **Zoom halaman**: Menskalakan semua konten secara proporsional (teks, gambar, tata letak) - ini adalah metode yang disukai - **Zoom teks saja**: Meningkatkan ukuran font sambil mempertahankan tata letak asli - **Pinch-to-zoom**: Dukungan gerakan seluler untuk pembesaran sementara - **Dukungan browser**: Semua browser modern mendukung zoom hingga 500% tanpa merusak fungsionalitas **Perangkat lunak pembesaran khusus:** - **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (bawaan), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (bawaan dengan fitur canggih) > ⚠️ **Pertimbangan Desain**: WCAG mengharuskan konten tetap fungsional saat diperbesar hingga 200%. Pada tingkat ini, pengguliran horizontal harus minimal, dan semua elemen interaktif harus tetap dapat diakses. ✅ **Uji desain responsif Anda**: Perbesar browser Anda hingga 200% dan 400%. Apakah tata letak Anda beradaptasi dengan baik? Bisakah Anda tetap mengakses semua fungsionalitas tanpa pengguliran berlebihan? ## Alat Pengujian Aksesibilitas Modern Sekarang setelah Anda memahami bagaimana orang menavigasi web dengan teknologi bantu, mari kita jelajahi alat yang membantu Anda membangun dan menguji situs web yang dapat diakses. Anggap saja seperti ini: alat otomatis sangat bagus untuk menangkap masalah yang jelas (seperti teks alt yang hilang), sementara pengujian langsung membantu Anda memastikan situs Anda nyaman digunakan di dunia nyata. Bersama-sama, mereka memberi Anda kepercayaan diri bahwa situs Anda bekerja untuk semua orang. ### Pengujian kontras warna Berita baik: kontras warna adalah salah satu masalah aksesibilitas yang paling umum, tetapi juga salah satu yang paling mudah diperbaiki. Kontras yang baik menguntungkan semua orang—dari pengguna dengan gangguan penglihatan hingga orang yang mencoba membaca ponsel mereka di pantai. **Persyaratan kontras WCAG:** | Jenis Teks | WCAG AA (Minimum) | WCAG AAA (Ditingkatkan) | |------------|-------------------|-------------------------| | **Teks normal** (di bawah 18pt) | Rasio kontras 4.5:1 | Rasio kontras 7:1 | | **Teks besar** (18pt+ atau 14pt+ tebal) | Rasio kontras 3:1 | Rasio kontras 4.5:1 | | **Komponen UI** (tombol, batas formulir) | Rasio kontras 3:1 | Rasio kontras 3:1 | **Alat pengujian penting:** - [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Aplikasi desktop dengan pemilih warna - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Berbasis web dengan umpan balik instan - [Stark](https://www.getstark.co/) - Plugin alat desain untuk Figma, Sketch, Adobe XD - [Accessible Colors](https://accessible-colors.com/) - Temukan palet warna yang dapat diakses ✅ **Bangun palet warna yang lebih baik**: Mulailah dengan warna merek Anda dan gunakan pemeriksa kontras untuk membuat variasi yang dapat diakses. Dokumentasikan ini sebagai token warna yang dapat diakses dalam sistem desain Anda. ### Audit aksesibilitas yang komprehensif Pengujian aksesibilitas yang paling efektif menggabungkan beberapa pendekatan. Tidak ada alat tunggal yang menangkap semuanya, jadi membangun rutinitas pengujian dengan berbagai metode memastikan cakupan yang menyeluruh. **Pengujian berbasis browser (terintegrasi dalam DevTools):** - **Chrome/Edge**: Audit aksesibilitas Lighthouse + panel Aksesibilitas - **Firefox**: Inspector Aksesibilitas dengan tampilan pohon yang terperinci - **Safari**: Tab Audit di Web Inspector dengan simulasi VoiceOver **Ekstensi pengujian profesional:** - [axe DevTools](https://www.deque.com/axe/devtools/) - Pengujian otomatis standar industri - [WAVE](https://wave.webaim.org/extension/) - Umpan balik visual dengan penyorotan kesalahan - [Accessibility Insights](https://accessibilityinsights.io/) - Suite pengujian komprehensif dari Microsoft **Integrasi Command-line dan CI/CD:** - [axe-core](https://github.com/dequelabs/axe-core) - Library JavaScript untuk pengujian otomatis - [Pa11y](https://pa11y.org/) - Alat pengujian aksesibilitas berbasis command-line - [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Penilaian aksesibilitas otomatis > 🎯 **Tujuan Pengujian**: Targetkan skor aksesibilitas Lighthouse 95+ sebagai baseline Anda. Ingat, alat otomatis hanya menangkap sekitar 30-40% masalah aksesibilitas—pengujian manual tetap penting! ### 🧠 **Cek Keterampilan Pengujian: Siap Menemukan Masalah?** **Mari kita lihat bagaimana perasaan Anda tentang pengujian aksesibilitas:** - Metode pengujian mana yang menurut Anda paling mudah didekati saat ini? - Bisakah Anda membayangkan menggunakan navigasi hanya dengan keyboard selama sehari penuh? - Apa satu hambatan aksesibilitas yang pernah Anda alami secara pribadi secara online? ```mermaid pie title "Accessibility Issues Caught by Different Methods" "Automated Tools" : 35 "Manual Testing" : 40 "User Feedback" : 25 ``` > **Peningkat kepercayaan diri**: Penguji aksesibilitas profesional menggunakan kombinasi metode ini. Anda sedang mempelajari praktik standar industri! ## Membangun Aksesibilitas dari Awal Kunci keberhasilan aksesibilitas adalah membangunnya ke dalam fondasi Anda sejak hari pertama. Saya tahu menggoda untuk berpikir "Saya akan menambahkan aksesibilitas nanti," tetapi itu seperti mencoba menambahkan ramp ke rumah setelah selesai dibangun. Mungkin? Ya. Mudah? Tidak benar-benar. Anggap aksesibilitas seperti merencanakan rumah—jauh lebih mudah untuk memasukkan aksesibilitas kursi roda dalam rencana arsitektur awal Anda daripada merombak semuanya nanti. ### Prinsip POUR: Fondasi Aksesibilitas Anda Pedoman Aksesibilitas Konten Web (WCAG) dibangun di sekitar empat prinsip dasar yang membentuk POUR. Jangan khawatir—ini bukan konsep akademis yang kaku! Mereka sebenarnya pedoman praktis untuk membuat konten yang bekerja untuk semua orang. Setelah Anda memahami POUR, membuat keputusan aksesibilitas menjadi jauh lebih intuitif. Ini seperti memiliki daftar mental yang memandu pilihan desain Anda. Mari kita uraikan: ```mermaid flowchart LR A[🔍 PERCEIVABLE
Can users sense it?] --> B[🎮 OPERABLE
Can users use it?] B --> C[📖 UNDERSTANDABLE
Can users get it?] C --> D[💪 ROBUST
Does it work everywhere?] A1[Alt text
Captions
Contrast] --> A B1[Keyboard access
No seizures
Time limits] --> B C1[Clear language
Predictable
Error help] --> C D1[Valid code
Compatible
Future-proof] --> D style A fill:#e1f5fe style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 ``` **🔍 Dapat Dipersepsi**: Informasi harus dapat disajikan dengan cara yang dapat dirasakan pengguna melalui indra yang tersedia - Berikan alternatif teks untuk konten non-teks (gambar, video, audio) - Pastikan kontras warna yang cukup untuk semua teks dan komponen UI - Tawarkan teks dan transkrip untuk konten multimedia - Desain konten yang tetap fungsional saat diperbesar hingga 200% - Gunakan karakteristik sensorik ganda (bukan hanya warna) untuk menyampaikan informasi **🎮 Dapat Dioperasikan**: Semua komponen antarmuka harus dapat dioperasikan melalui metode input yang tersedia - Pastikan semua fungsionalitas dapat diakses melalui navigasi keyboard - Berikan pengguna waktu yang cukup untuk membaca dan berinteraksi dengan konten - Hindari konten yang menyebabkan kejang atau gangguan vestibular - Bantu pengguna menavigasi dengan efisien melalui struktur dan landmark yang jelas - Pastikan elemen interaktif memiliki ukuran target yang memadai (minimal 44px) **📖 Dapat Dipahami**: Informasi dan operasi UI harus jelas dan mudah dipahami - Gunakan bahasa yang jelas dan sederhana sesuai dengan audiens Anda - Pastikan konten muncul dan beroperasi dengan cara yang dapat diprediksi dan konsisten - Berikan instruksi dan pesan kesalahan yang jelas untuk input pengguna - Bantu pengguna memahami dan memperbaiki kesalahan dalam formulir - Susun konten dengan urutan membaca yang logis dan hierarki informasi **💪 Tangguh**: Konten harus bekerja dengan andal di berbagai teknologi dan perangkat bantu - **Gunakan HTML semantik yang valid sebagai fondasi Anda** - **Pastikan kompatibilitas dengan teknologi bantu saat ini dan masa depan** - **Ikuti standar web dan praktik terbaik untuk markup** - **Uji di berbagai browser, perangkat, dan alat bantu** - **Susun konten agar tetap berfungsi dengan baik meskipun fitur canggih tidak didukung** ### 🎯 **Pemeriksaan Prinsip POUR: Membuatnya Berkesan** **Refleksi cepat tentang dasar-dasar:** - Bisakah Anda memikirkan fitur situs web yang gagal memenuhi setiap prinsip POUR? - Prinsip mana yang paling alami bagi Anda sebagai pengembang? - Bagaimana prinsip-prinsip ini dapat meningkatkan desain untuk semua orang, bukan hanya pengguna disabilitas? ```mermaid quadrantChart title POUR Principles Impact Matrix x-axis Low Effort --> High Effort y-axis Low Impact --> High Impact quadrant-1 Quick Wins quadrant-2 Major Projects quadrant-3 Consider Later quadrant-4 Strategic Focus Alt Text: [0.2, 0.9] Color Contrast: [0.3, 0.8] Semantic HTML: [0.4, 0.9] Keyboard Nav: [0.6, 0.8] ARIA Complex: [0.8, 0.7] Screen Reader Testing: [0.7, 0.6] ``` > **Ingat**: Mulailah dengan perbaikan berdampak tinggi dan usaha rendah. HTML semantik dan teks alternatif memberikan peningkatan aksesibilitas terbesar dengan usaha paling sedikit! ## Membuat Desain Visual yang Aksesibel Desain visual yang baik dan aksesibilitas berjalan beriringan. Saat Anda mendesain dengan mempertimbangkan aksesibilitas, sering kali Anda menemukan bahwa batasan ini menghasilkan solusi yang lebih bersih dan elegan yang menguntungkan semua pengguna. Mari kita jelajahi cara menciptakan desain visual yang menarik yang dapat diakses oleh semua orang, terlepas dari kemampuan visual mereka atau kondisi di mana mereka melihat konten Anda. ### Strategi warna dan aksesibilitas visual Warna sangat kuat untuk komunikasi, tetapi seharusnya tidak pernah menjadi satu-satunya cara untuk menyampaikan informasi penting. Mendesain melampaui warna menciptakan pengalaman yang lebih tangguh dan inklusif yang berfungsi dalam lebih banyak situasi. **Desain untuk perbedaan penglihatan warna:** Sekitar 8% pria dan 0,5% wanita memiliki beberapa bentuk perbedaan penglihatan warna (sering disebut "buta warna"). Jenis yang paling umum adalah: - **Deuteranopia**: Kesulitan membedakan merah dan hijau - **Protanopia**: Merah tampak lebih redup - **Tritanopia**: Kesulitan dengan biru dan kuning (langka) **Strategi warna inklusif:** ```css /* ❌ Bad: Using only color to indicate status */ .error { color: red; } .success { color: green; } /* ✅ Good: Color plus icons and context */ .error { color: #d32f2f; border-left: 4px solid #d32f2f; } .error::before { content: "⚠️"; margin-right: 8px; } .success { color: #2e7d32; border-left: 4px solid #2e7d32; } .success::before { content: "✅"; margin-right: 8px; } ``` **Melampaui persyaratan kontras dasar:** - Uji pilihan warna Anda dengan simulator buta warna - Gunakan pola, tekstur, atau bentuk bersama dengan kode warna - Pastikan status interaktif tetap dapat dibedakan tanpa warna - Pertimbangkan bagaimana desain Anda terlihat dalam mode kontras tinggi ✅ **Uji aksesibilitas warna Anda**: Gunakan alat seperti [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) untuk melihat bagaimana situs Anda muncul bagi pengguna dengan berbagai jenis penglihatan warna. ### Indikator fokus dan desain interaksi Indikator fokus adalah setara digital dari kursor—mereka menunjukkan kepada pengguna keyboard di mana mereka berada di halaman. Indikator fokus yang dirancang dengan baik meningkatkan pengalaman untuk semua orang dengan membuat interaksi menjadi jelas dan dapat diprediksi. **Praktik terbaik indikator fokus modern:** ```css /* Enhanced focus styles that work across browsers */ button:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25); } /* Remove focus outline for mouse users, preserve for keyboard users */ button:focus:not(:focus-visible) { outline: none; } /* Focus-within for complex components */ .card:focus-within { box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5); border-color: #4A90A4; } /* Ensure focus indicators meet contrast requirements */ .custom-focus:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 6px #000000; } ``` **Persyaratan indikator fokus:** - **Visibilitas**: Harus memiliki rasio kontras setidaknya 3:1 dengan elemen sekitarnya - **Lebar**: Ketebalan minimum 2px di seluruh elemen - **Persistensi**: Harus tetap terlihat hingga fokus berpindah ke tempat lain - **Pembedaan**: Harus secara visual berbeda dari status UI lainnya > 💡 **Tip Desain**: Indikator fokus yang hebat sering menggunakan kombinasi outline, box-shadow, dan perubahan warna untuk memastikan visibilitas di berbagai latar belakang dan konteks. ✅ **Audit indikator fokus**: Tab melalui situs web Anda dan catat elemen mana yang memiliki indikator fokus yang jelas. Apakah ada yang sulit dilihat atau hilang sama sekali? ### HTML Semantik: Fondasi Aksesibilitas HTML semantik seperti memberikan teknologi bantu sistem GPS untuk situs web Anda. Saat Anda menggunakan elemen HTML yang tepat untuk tujuan yang dimaksudkan, Anda pada dasarnya menyediakan pembaca layar, keyboard, dan alat lainnya dengan peta rinci untuk membantu pengguna menavigasi dengan efektif. Berikut analogi yang benar-benar mengena bagi saya: HTML semantik adalah perbedaan antara perpustakaan yang terorganisir dengan baik dengan kategori yang jelas dan tanda yang membantu versus gudang tempat buku tersebar secara acak. Kedua tempat memiliki buku yang sama, tetapi mana yang lebih Anda pilih untuk mencari sesuatu? Tepat! ```mermaid flowchart TD A[🏠 HTML Document] --> B[📰 header] A --> C[🧭 nav] A --> D[📄 main] A --> E[📋 footer] B --> B1[h1: Site Name
Logo & branding] C --> C1[ul: Navigation
Primary links] D --> D1[article: Content
section: Subsections] D --> D2[aside: Sidebar
Related content] E --> E1[nav: Footer links
Copyright info] D1 --> D1a[h1: Page title
h2: Major sections
h3: Subsections] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 ``` **Blok bangunan struktur halaman yang dapat diakses:** ```html

Your Site Name

Article Title

Published on

First Section

Content that relates to this section...

Second Section

More related content...

``` **Mengapa HTML semantik mengubah aksesibilitas:** | Elemen Semantik | Tujuan | Manfaat Pembaca Layar | |------------------|---------|----------------------| | `
` | Header halaman atau bagian | "Landmark banner" - navigasi cepat ke atas | | `