Dokumen

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.

Larangan
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
Anjuran
<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.

Larangan
<html>...</html>
Anjuran
<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.

Larangan
<html lang="ar,en,fr,pt">...</html>
Beberapa bahasa tidak didukung.
Anjuran
<html lang="ar">...</html>
Hanya setel bahasa utama halaman. Dalam hal ini, bahasanya adalah Arab.

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.

Larangan
<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>
Anjuran
<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.

Larangan
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
Anjuran
<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?

Sertakan semua bahasa dalam elemen <html>. Misalnya <html lang="en,lt,pl,pt">
Jangan khawatir, AT dapat secara otomatis membaca setiap bahasa.
Setel lang utama untuk <html>, dan bahasa tambahan di elemen apa pun yang memiliki konten dalam bahasa lain.