Selain struktur, ada banyak elemen HTML pendukung yang perlu dipertimbangkan saat membangun dan mendesain untuk aksesibilitas digital. Di sepanjang kursus Mempelajari Aksesibilitas, kami membahas banyak elemen.
Modul ini berfokus pada elemen yang sangat spesifik yang tidak cukup sesuai dengan modul lain, tetapi berguna untuk dipahami.
Judul halaman
Elemen <title>
HTML menentukan konten halaman atau layar yang akan
dinikmati pengguna. Tag ini ditemukan di bagian <head> pada dokumen HTML dan setara dengan <h1> atau topik utama halaman. Konten
judul ditampilkan di tab browser dan membantu pengguna memahami halaman
yang mereka kunjungi, tetapi konten tersebut tidak ditampilkan di situs atau aplikasi itu sendiri.
Di aplikasi web satu halaman (SPA),
<title> ditangani dengan cara yang sedikit berbeda, karena pengguna tidak menavigasi
antar-halaman seperti yang mereka lakukan di situs multi-halaman. Untuk SPA, nilai properti
document.title
dapat ditambahkan secara manual atau dengan paket helper, bergantung pada
framework JavaScript. Mengumumkan
judul halaman yang diperbarui
kepada pengguna pembaca layar mungkin memerlukan beberapa upaya tambahan.
Judul halaman deskriptif cocok untuk pengguna dan pengoptimalan mesin telusur (SEO), tetapi jangan berlebihan dan menambahkan banyak kata kunci. Karena judul adalah hal pertama yang diumumkan saat pengguna AT mengunjungi halaman, judul harus akurat, unik, deskriptif, tetapi juga ringkas.
Saat menulis judul halaman, praktik terbaiknya juga adalah "memuat di awal" halaman interior atau konten penting terlebih dahulu, lalu tambahkan halaman atau informasi sebelumnya. Dengan cara ini, pengguna AT tidak perlu mengikuti informasi yang telah mereka dengar.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>
Language
Bahasa halaman
Atribut bahasa halaman (lang) menetapkan bahasa default untuk seluruh halaman. Atribut ini ditambahkan ke tag <html>. Atribut bahasa yang valid harus ditambahkan ke setiap halaman karena atribut tersebut akan memberi sinyal AT ke bahasa yang harus digunakan.
Sebaiknya gunakan kode bahasa ISO dua karakter untuk cakupan AT yang lebih besar, karena banyak di antaranya tidak mendukung kode bahasa tambahan.
Jika atribut bahasa benar-benar tidak ada, AT akan ditetapkan secara default ke bahasa terprogram pengguna. Misalnya, jika AT disetel ke bahasa Spanyol, tetapi pengguna mengunjungi situs atau aplikasi berbahasa Inggris, AT akan mencoba membaca teks bahasa Inggris dengan aksen dan ritme bahasa Spanyol. Kombinasi ini menghasilkan produk digital yang tidak dapat digunakan dan membuat pengguna frustrasi.
<html>...</html>
<html lang="en">...</html>
Atribut lang hanya dapat memiliki satu bahasa yang terkait dengannya. Artinya,
atribut <html> hanya dapat memiliki satu bahasa, meskipun ada beberapa
bahasa di halaman. Setel lang ke bahasa utama halaman.
<html lang="ar,en,fr,pt">...</html>Beberapa bahasa tidak didukung.
<html lang="ar">...</html>Hanya setel bahasa utama halaman. Dalam hal ini, bahasa yang digunakan adalah bahasa Arab.
Bahasa bagian
Anda juga dapat menggunakan atribut bahasa (lang) untuk pengalihan bahasa di konten itu sendiri. Aturan dasar yang sama berlaku seperti atribut bahasa halaman penuh, kecuali Anda menambahkannya ke elemen dalam halaman yang sesuai, bukan ke tag <html>.
Ingat bahwa bahasa yang Anda tambahkan ke elemen <html> akan menurun ke semua
elemen yang dimuat, jadi selalu tetapkan bahasa utama atribut lang tingkat atas
halaman terlebih dahulu.
Untuk elemen dalam halaman yang ditulis dalam bahasa lain, tambahkan atribut lang
tersebut ke elemen wrapper yang sesuai. Ini akan mengganti
setelan bahasa tingkat atas hingga elemen tersebut ditutup.
<html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
"Kas sa räägid inglise keelt?" when I met someone new.</p>
</div>
</body>
</html>
<html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
<span lang="et">"Kas sa räägid inglise keelt?"</span>
when I met someone new.</p>
</div>
</body>
</html>
iFrames
Elemen iFrame
(<iframe>)
digunakan untuk menghosting halaman HTML lain atau konten pihak ketiga dalam halaman. Pada dasarnya,
keamanan menempatkan halaman web lain di dalam halaman induk. iFrame biasanya
digunakan untuk iklan, video tersemat, analisis web, dan konten
interaktif.
Agar <iframe> dapat diakses, ada beberapa aspek yang perlu dipertimbangkan. Pertama, setiap <iframe> dengan konten yang berbeda harus menyertakan elemen judul di dalam tag induk. Judul ini memberi pengguna AT informasi lebih lanjut tentang konten yang ada di dalam <iframe>.
Kedua, sebagai praktik terbaik, sebaiknya atur scroll ke "auto" atau "yes" di setelan tag <iframe>. Dengan begitu, orang dengan gangguan penglihatan dapat men-scroll ke konten dalam <iframe> yang mungkin tidak dapat dilihat oleh mereka. Idealnya, penampung <iframe> juga akan fleksibel dalam hal tinggi dan lebar.
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
<iframe title="Google Pixel - Lizzo in Real Tone" src="https://www.youtube.com/embed/3obixhGZ5ds" scrolling="auto"> </iframe>
Menguji pemahaman Anda
Uji pengetahuan Anda tentang aksesibilitas dokumen.
Situs Anda adalah buku teks online multibahasa, yang menampilkan beberapa bahasa di satu halaman. Apa cara terbaik untuk memberi tahu teknologi pendukung bahasa salinannya?
<html>. Misalnya <html lang="en,lt,pl,pt">lang hanya dapat memiliki satu bahasa yang terkait dengannya.lang utama untuk <html>, dan bahasa tambahan di elemen apa pun yang memiliki konten dalam bahasa yang berbeda.<html> untuk membaca dokumen. Jika Anda memiliki teks multibahasa, pastikan untuk menambahkan atribut lang ke elemen yang sesuai (seperti bagian atau paragraf) dengan kode ISO dua huruf yang benar.