Selain struktur, ada banyak elemen HTML pendukung yang perlu dipertimbangkan saat membuat dan mendesain untuk aksesibilitas digital. Selama Pembelajaran Kursus aksesibilitas, kita membahas banyak elemen.
Modul ini berfokus pada elemen yang sangat spesifik yang tidak cukup sesuai dengan modul lain tetapi berguna untuk dipahami.
Judul halaman
HTML <title>
mendefinisikan konten dari laman atau layar yang akan dibuka pengguna
pengalaman yang lancar bagi developer. Ini ditemukan di
Bagian <head>
dari
dokumen HTML dan setara dengan <h1>
atau topik utama halaman. Tujuan
konten judul ditampilkan di tab browser dan membantu pengguna memahami
halaman yang mereka kunjungi, tetapi tidak ditampilkan di situs atau aplikasi itu sendiri.
Di aplikasi web satu halaman (SPA),
<title>
ditangani dengan cara yang sedikit berbeda, karena pengguna tidak melakukan navigasi
antar halaman seperti yang mereka lakukan
di {i>website<i} multi-halaman. Untuk SPA, nilai
document.title
bisa ditambahkan secara manual atau dengan paket helper, tergantung pada
framework JavaScript. Mengumumkan
judul halaman yang diperbarui
ke pengguna pembaca layar
mungkin memerlukan beberapa pekerjaan tambahan.
Judul halaman deskriptif baik untuk pengguna dan pengoptimalan mesin telusur (SEO)—tetapi jangan berlebihan dan tambahkan banyak kata kunci. Karena judul adalah yang pertama yang diumumkan ketika seorang pengguna AT mengunjungi suatu laman, maka itu harus akurat, unik, dan deskriptif, tetapi juga ringkas.
Saat menulis judul halaman, praktik terbaiknya adalah "frontload" interior atau konten penting terlebih dahulu, lalu tambahkan halaman atau informasi sebelumnya gambar berikutnya. Dengan cara ini, pengguna AT tidak perlu memikirkan informasi yang mereka miliki sudah Anda 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 untuk menandakan AT ke bahasa mana yang harus digunakan.
Disarankan agar Anda menggunakan dua karakter Kode bahasa ISO untuk cakupan AT yang lebih besar, karena banyak dari mereka tidak mendukung kode bahasa tambahan.
Ketika atribut bahasa tidak ada sama sekali, AT akan secara {i>default<i} ke bahasa pemrograman pengguna. Misalnya, jika AT disetel ke bahasa Spanyol, tetapi mengunjungi situs web atau aplikasi berbahasa Inggris, AT akan mencoba membaca teks dengan aksen dan ritme bahasa Spanyol. Kombinasi ini menyebabkan hasil tidak dapat digunakan produk digital dan pengguna yang frustrasi.
<html>...</html>
<html lang="en">...</html>
Atribut lang hanya boleh memiliki satu bahasa yang terkait dengannya. Artinya
Atribut <html>
hanya dapat memiliki satu bahasa, meskipun ada beberapa bahasa
bahasa pada halaman. Tetapkan lang
ke bahasa utama halaman.
<html lang="ar,en,fr,pt">...</html>
<html lang="ar">...</html>
Bahasa bagian
Anda juga dapat menggunakan atribut bahasa (lang) untuk tombol bahasa di konten itu sendiri. Aturan dasar yang sama berlaku sebagai atribut bahasa halaman lengkap, kecuali Anda menambahkannya ke elemen dalam halaman yang sesuai, bukan pada tag <html>
.
Ingat bahwa bahasa yang Anda tambahkan ke elemen <html>
menurun ke semua
elemen yang ada di dalamnya, jadi selalu setel bahasa utama laman
atribut lang
tingkat teratas terlebih dahulu.
Untuk elemen dalam halaman yang ditulis dalam bahasa lain, tambahkan lang
tersebut
ke elemen wrapper yang sesuai. Ini akan mengganti
setelan bahasa tingkat atas hingga elemen itu 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>
iFrame
Elemen iFrame
(<iframe>
) adalah
digunakan untuk menghosting halaman HTML lain atau
konten pihak ketiga di dalam halaman. Ini
pada dasarnya menempatkan laman
web lain ke dalam laman induk. iFrame biasanya
digunakan untuk iklan, video tersemat, analisis web, dan
saat ini.
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 memberikan informasi lebih lanjut tentang konten di dalam <iframe>
kepada pengguna AT.
Kedua, sebagai praktik terbaik, sebaiknya setel scroll ke "otomatis" atau "ya" di setelan tag <iframe>
. Hal ini memungkinkan pengguna dengan gangguan penglihatan dapat men-scroll ke konten dalam <iframe>
yang mungkin tidak dapat mereka lihat. Idealnya, penampung <iframe>
juga akan memiliki tinggi dan lebar yang fleksibel.
<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, dengan beberapa bahasa ditampilkan di satu halaman. Apa cara terbaik untuk menyampaikan bahasa salinan pada teknologi pendukung?
<html>
. Misalnya <html lang="en,lt,pl,pt">
lang
hanya boleh memiliki satu bahasa yang terkait dengannya.lang
utama untuk <html>
, dan bahasa tambahan di elemen apa pun yang memiliki konten dalam bahasa lain.<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.