Aksesibilitas HTML
Aksesibilitas HTML
Selalu tulis kode HTML dengan mempertimbangkan aksesibilitas!
Berikan pengguna cara yang baik untuk menavigasi dan berinteraksi dengan situs Anda. Buat kode HTML Anda semantik mungkin.
HTML semantik
HTML semantik berarti menggunakan elemen HTML yang benar untuk tujuan yang benar sebanyak mungkin. Unsur semantik adalah unsur yang memiliki makna; jika Anda membutuhkan tombol, gunakan <button>elemen (dan bukan
<div>elemen).
semantik
<button>Report an Error</button>
Non-semantik
<div>Report an Error</div>
HTML semantik memberikan konteks kepada pembaca layar, yang membaca konten halaman dengan lantang.
Dengan contoh tombol dalam pikiran:
- tombol memiliki gaya yang lebih cocok secara default
- pembaca layar mengidentifikasinya sebagai tombol
- bisa fokus
- dapat diklik
Sebuah tombol juga dapat diakses oleh orang-orang yang mengandalkan navigasi hanya keyboard; itu dapat diklik dengan mouse dan tombol, dan itu dapat ditaburi di antara (menggunakan tombol tab pada keyboard).
Contoh elemen non-semantik<div> : dan <span>- Tidak menceritakan apa pun tentang kontennya.
Contoh elemen semantik<form> : , <table>, dan <article>- Jelas mendefinisikan isinya.
Judul Itu Penting
Judul didefinisikan dengan tag <h1>to :<h6>
Contoh
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Mesin pencari menggunakan judul untuk mengindeks struktur dan konten halaman web Anda.
Pengguna menelusuri halaman Anda berdasarkan judulnya. Penting untuk menggunakan heading untuk menunjukkan struktur dokumen dan hubungan antara bagian yang berbeda.
Pembaca layar juga menggunakan judul sebagai alat navigasi. Berbagai jenis heading menentukan garis besar halaman.
<h1>heading sebaiknya digunakan untuk heading utama, diikuti <h2>heading, kemudian heading yang kurang penting
<h3>, dan seterusnya.
Catatan: Gunakan heading HTML untuk heading saja. Jangan gunakan heading untuk membuat teks menjadi BESAR atau tebal .
teks alternatif
Atribut altmenyediakan teks alternatif untuk gambar, jika pengguna karena alasan tertentu tidak dapat melihatnya (karena koneksi lambat, kesalahan dalam
src
atribut, atau jika pengguna menggunakan pembaca layar).
Nilai altatribut harus mendeskripsikan gambar:
Contoh
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
Jika browser tidak dapat menemukan gambar, itu akan menampilkan nilai alt
atribut:
Contoh
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
Nyatakan Bahasanya
Anda harus selalu menyertakan lang
atribut di dalam <html>tag, untuk mendeklarasikan bahasa halaman Web. Ini dimaksudkan untuk membantu mesin pencari dan browser.
Contoh berikut menentukan bahasa Inggris sebagai bahasa:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Gunakan Bahasa yang Jelas
Selalu gunakan bahasa yang jelas, yang mudah dimengerti. Juga cobalah untuk menghindari karakter yang tidak dapat dibaca dengan jelas oleh pembaca layar. Sebagai contoh:
- Buat kalimat sesingkat mungkin
- Hindari tanda hubung. Alih-alih menulis 1-3, tulis 1 hingga 3
- Hindari singkatan. Daripada menulis Februari, tulislah Februari
- Hindari kata-kata gaul
Buat Teks Tautan yang Bagus
Teks tautan harus menjelaskan dengan jelas informasi apa yang akan diperoleh pembaca dengan mengklik tautan itu.
Contoh tautan baik dan buruk:
Bagus
Buruk
Catatan: Halaman ini adalah pengantar dalam aksesibilitas web. Kunjungi Tutorial Aksesibilitas kami untuk detail selengkapnya.