Dokumen

Selain struktur, ada banyak elemen HTML pendukung yang perlu dipertimbangkan saat membuat dan mendesain untuk aksesibilitas digital. Sepanjang kursus Belajar Aksesibilitas, kita membahas banyak elemen.

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

Judul halaman

Elemen HTML <title> menentukan konten halaman atau layar yang akan dialami pengguna. Elemen 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 yang mereka kunjungi, tetapi tidak ditampilkan di situs atau aplikasi itu sendiri.

Di aplikasi satu halaman (SPA), <title> ditangani dengan cara yang sedikit berbeda, karena pengguna tidak berpindah antar-halaman seperti 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 bagus 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, dan deskriptif, tetapi juga ringkas.

Saat menulis judul halaman, sebaiknya "muat di awal" halaman interior atau konten penting terlebih dahulu, lalu tambahkan halaman atau informasi sebelumnya setelahnya. Dengan begitu, pengguna AT tidak perlu mendengarkan informasi yang sudah 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 <html> tag. Atribut bahasa yang valid harus ditambahkan ke setiap halaman karena memberi sinyal kepada AT bahasa mana yang harus digunakan.

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

Jika atribut bahasa tidak ada sama sekali, AT akan menggunakan bahasa yang diprogram pengguna secara default. Misalnya, jika AT ditetapkan 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 bahasa Arab.

Bahasa bagian

Anda juga dapat menggunakan atribut bahasa (lang) untuk peralihan bahasa dalam konten itu sendiri. Aturan dasar yang sama berlaku seperti atribut bahasa halaman penuh, kecuali Anda menambahkannya ke elemen dalam halaman yang sesuai, bukan pada tag <html>.

Ingatlah bahwa bahasa yang Anda tambahkan ke elemen <html> akan diterapkan ke semua elemen yang ada, 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 penampung yang sesuai. Tindakan ini akan mengganti setelan bahasa tingkat atas 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>

iFrames

Elemen iFrame (<iframe>) digunakan untuk menghosting halaman HTML lain atau konten pihak ketiga dalam halaman. Pada dasarnya, elemen ini menempatkan halaman web lain dalam halaman induk. iFrame biasanya digunakan untuk iklan, video sematan, analisis web, dan konten interaktif.

Untuk membuat <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 lebih lanjut tentang konten di dalam <iframe>.

Kedua, sebagai praktik terbaik, sebaiknya tetapkan scrolling ke "auto" atau "yes" di setelan tag <iframe>. Hal ini memungkinkan orang dengan penglihatan rendah dapat men-scroll konten dalam <iframe> yang mungkin tidak dapat mereka lihat. Idealnya, penampung <iframe> juga 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>
Sebelumnya
Struktur konten
Berikutnya
Fokus keyboard