Aksesibilitas HTML
Tulis HTML dengan aksesibilitas. Berikan pengguna cara yang bagus untuk bernavigasi dan berinteraksi dengan situs Anda. Buatlah kode HTML Anda semantik mungkin, sehingga kode tersebut mudah dimengerti bagi pengunjung dan pembaca layar.
HTML semantik
HTML semantik berarti menggunakan elemen HTML yang benar untuk tujuan yang benar sebanyak mungkin. Elemen semantik adalah elemen dengan makna; Jika Anda memerlukan sebuah tombol, gunakan elemen <button> (dan bukan <div>).
Semantic HTML memberi konteks kepada pembaca layar, yang membaca isi halaman web dengan jelas.
Dengan contoh button dapat lebih mudah dipahami sebagai:
- Tombol memiliki styling yang lebih sesuai secara default
- pembaca layar mengidentifikasi sebagai tombol
- fokus
- bisa diklik
Button juga dapat diakses oleh orang-orang yang mengandalkan navigasi khusus keyboard; bisa diklik dengan kedua mouse dan kunci, dan bisa di tab antara (menggunakan tombol tab pada keyboard).
Contoh elemen non-semantik: <div> dan <span> - Tidak memberi tahu apa-apa tentang isinya.
Contoh elemen semantik: <form>, <table>, dan <article> - Jelas mendefinisikan isinya.
Headings
Judul ditentukan dengan tag <h1> sampai <h6>:
Contoh Code:
<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 isi halaman web Anda.
Pengguna menelusuri halaman Anda dengan judulnya. Penting untuk menggunakan judul untuk menunjukkan struktur dokumen dan hubungan antara bagian yang berbeda.
Judul <h1> harus digunakan untuk judul utama, diikuti judul <h2>, maka yang kurang penting <h3>, dan seterusnya.
Catatan: Gunakan judul HTML untuk judul saja. Jangan gunakan judul untuk membuat teks BESAR atau tebal.
teks alternatif
Atribut alt menyediakan teks alternatif untuk gambar, jika pengguna karena beberapa alasan tidak dapat melihatnya (karena koneksi lambat, kesalahan pada atribut src, atau jika pengguna menggunakan pembaca layar).
Nilai atribut alt harus menggambarkan gambar:
<img src="img_chania.jpg" alt="Flowers
in Chania">
Jika browser tidak dapat menemukan gambar, maka akan muncul nilai atribut alt:
Deklarasikan Bahasa
Mendeklarasikan bahasa penting bagi pembaca layar dan mesin telusur, dan dideklarasikan dengan atribut lang. Gunakan yang berikut ini untuk menampilkan halaman web dalam bahasa Inggris:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Gunakan Clear Language
Gunakan bahasa jernih yang mudah dimengerti, dan coba hindari karakter yang tidak bisa dibaca dengan jelas oleh screen reader. Sebagai contoh:
- Jauhkan kalimat sesingkat mungkin.
- Hindari tanda hubung. Daripada menulis 1-3, tulis 1 sampai 3
- Hindari singkatan. Alih-alih menulis Feb, tulis Februari
- Hindari kata-kata slang
Tulis Link yang Baik
Tautan harus menjelaskan dengan jelas informasi apa yang akan didapat pembaca dengan mengeklik tautan itu.
Contoh link yang bagus dan buruk:
Link Titles
Atribut Titles menentukan informasi tambahan tentang sebuah elemen. Informasi paling sering ditunjukkan sebagai teks tooltip saat mouse bergerak di atas elemen.
<a href="https://nusantaracoding.blogspot.co.id/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2