Dokumen

Bersama dengan struktur, ada banyak elemen HTML pendukung yang perlu dipertimbangkan saat membuat dan mendesain untuk aksesibilitas digital. Selama kursus Pembelajaran Aksesibilitas, kita akan membahas banyak elemen.

Modul ini berfokus pada elemen yang sangat spesifik yang tidak terlalu sesuai dengan modul lain, tetapi berguna untuk dipahami.

Judul halaman

Elemen HTML <title> menentukan konten halaman atau layar yang akan dilihat pengguna. Bagian ini ditemukan di bagian <head> dokumen HTML dan setara dengan <h1> atau topik utama halaman. Konten judul ditampilkan di tab browser dan membantu pengguna memahami halaman mana yang mereka buka, 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 membuka halaman satu ke halaman lain seperti yang mereka lakukan di situs multi-halaman. Untuk SPA, nilai properti document.title dapat ditambahkan secara manual atau oleh paket helper, bergantung pada framework JavaScript. Mengumumkan judul halaman yang diperbarui kepada 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 hal pertama yang diumumkan saat pengguna AT mengunjungi halaman, judul harus akurat, unik, dan deskriptif, tetapi juga ringkas.

Saat menulis judul halaman, sebaiknya "muat di awal" halaman dalam atau konten penting terlebih dahulu, lalu tambahkan halaman atau informasi sebelumnya setelah itu. Dengan begitu, pengguna AT tidak perlu mendengarkan informasi yang telah mereka 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 karena akan memberi tahu AT bahasa yang harus digunakan.

Sebaiknya gunakan kode bahasa ISO dua karakter untuk cakupan AT yang lebih luas, karena banyak di antaranya tidak mendukung kode bahasa yang diperluas.

Jika atribut bahasa benar-benar tidak ada, AT akan ditetapkan secara default ke bahasa yang diprogram 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 irama bahasa Spanyol. Kombinasi ini menghasilkan produk digital yang tidak dapat digunakan dan pengguna yang frustrasi.

Larangan
<html>...</html>
Anjuran
<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. Tetapkan lang ke bahasa utama halaman.

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

Bahasa bagian

Anda juga dapat menggunakan atribut bahasa (lang) untuk pengalihan bahasa dalam konten itu sendiri. Aturan dasar yang sama berlaku seperti 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> akan diterapkan 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. Tindakan ini akan mengganti setelan bahasa tingkat teratas hingga elemen tersebut 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>) digunakan untuk menghosting halaman HTML lain atau konten pihak ketiga dalam halaman. IFrame pada dasarnya menempatkan halaman web lain dalam halaman induk. iFrame biasanya digunakan untuk iklan, video tersemat, analisis web, dan konten interaktif.

Agar <iframe> Anda 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 selengkapnya tentang konten di dalam <iframe>.

Kedua, sebagai praktik terbaik, sebaiknya tetapkan 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 fleksibel dalam tinggi dan lebarnya.

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>

Memeriksa 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 teks?

Jangan khawatir, AT dapat membaca setiap bahasa secara otomatis.
Meskipun beberapa AT mungkin memiliki keterampilan deteksi bahasa, Anda tidak dapat menjamin AT akan menebak dengan benar.
Sertakan semua bahasa dalam elemen <html>. Misalnya <html lang="en,lt,pl,pt">
Atribut lang hanya dapat memiliki satu bahasa yang terkait dengannya.
Tetapkan lang utama untuk <html>, dan bahasa tambahan pada elemen apa pun yang memiliki konten dalam bahasa yang berbeda.
AT terutama akan mengandalkan atribut bahasa <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.