Dasar-Dasar Aksesibilitas
Tambahkan teks alternatif ke gambar dan buat halaman web Anda mudah digunakan
Dasar-Dasar Aksesibilitas adalah pelajaran HTML for Kids gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML for Kids, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML for Kids mencakup 4 pelajaran total.
Membuat Halaman Mudah Diakses
Dasar-Dasar Aksesibilitas
Selamat datang di pelajaran berikutnya! Hari ini, kita akan mempelajari cara membuat halaman web yang dapat diakses semua orang, termasuk penyandang disabilitas. Aksesibilitas merupakan bagian penting dalam membangun situs web yang mudah digunakan.
Apa Itu Aksesibilitas?
Aksesibilitas memastikan semua pengguna, terlepas dari kemampuan mereka, dapat berinteraksi dengan halaman web Anda. Ini termasuk orang yang:
- Mengalami gangguan penglihatan atau pendengaran.
- Menggunakan pembaca layar atau teknologi asistif lainnya.
- Menavigasi situs web menggunakan keyboard, bukan mouse.
Mari kita pelajari cara membuat halaman Anda lebih inklusif!
Menambahkan Teks Alternatif ke Gambar
Gunakan atribut alt dalam tag <img> untuk mendeskripsikan gambar. Ini membantu pembaca layar menyampaikan isi gambar kepada pengguna dengan gangguan penglihatan.
Contoh:
<img src="sunrise.jpg" alt="A beautiful sunrise over the mountains" />
Menggunakan HTML Semantik
Tag semantik, seperti <header>, <nav>, dan <footer>, membantu teknologi asistif memahami struktur halaman Anda.
Contoh:
<header>
<h1>My Blog</h1>
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<footer>
<p>© 2024 My Blog</p>
</footer>
Navigasi dengan Keyboard
Pastikan semua elemen interaktif, seperti tautan dan tombol, dapat diakses menggunakan tombol Tab. Gunakan atribut tabindex untuk mengatur urutan tab.
Contoh:
<a href="#section1" tabindex="1">Go to Section 1</a>
<a href="#section2" tabindex="2">Go to Section 2</a>
Memberikan Label untuk Input
Gunakan tag <label> untuk memberikan deskripsi yang jelas pada bidang input. Hubungkan label dengan input menggunakan atribut for.
Contoh:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
</form>
Kontras Warna
Pastikan terdapat kontras yang cukup antara warna teks dan latar belakang agar semua orang dapat membaca konten Anda dengan mudah. Gunakan alat daring untuk memeriksa rasio kontras warna.
Tips: Kontras tinggi meningkatkan keterbacaan bagi pengguna dengan gangguan penglihatan.
Contoh:
<p style="color: black; background-color: white;">This text is easy to read.</p>
<p style="color: gray; background-color: lightgray;">This text is hard to read.</p>
Coba Sendiri
Mari buat formulir yang mudah diakses. Berikut contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Accessible Form</title>
</head>
<body>
<h1>Sign Up</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
<br />
<button type="submit">Sign Up</button>
</form>
</body>
</html>
Rangkuman Aksesibilitas
Kerja Bagus!
Selamat! Anda telah mempelajari cara membuat halaman web yang dapat diakses oleh semua orang. Aksesibilitas merupakan bagian penting dari pengembangan web modern. Pada pelajaran berikutnya, kita akan mempelajari cara memvalidasi kode HTML Anda untuk memastikan kode tersebut memenuhi standar web. Bersiaplah untuk menyempurnakan keterampilan Anda!
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 16
- Pelajaran
- 35
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Dasar-Dasar Aksesibilitas” gratis?
Ya — teks lengkap “Dasar-Dasar Aksesibilitas” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML for Kids, upgrade ke CoddyKit PRO. Kursus HTML for Kids mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Dasar-Dasar Aksesibilitas”?
Tambahkan teks alternatif ke gambar dan buat halaman web Anda mudah digunakan Kamu berlatih HTML for Kids dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML for Kids?
Tidak diperlukan pengalaman sebelumnya. HTML for Kids di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Dasar-Dasar Aksesibilitas” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML for Kids ini?
Ya. Setiap pelajaran HTML for Kids menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Menulis Kode yang Rapi
- Dasar-Dasar Aksesibilitas
- Memvalidasi HTML Anda
- Komentar HTML