Tips Siangkat: Menggunakan Attribute “lang” untuk Aksesibilitas yang Lebih Baik
Indonesian (Bahasa Indonesia) translation by Haikal Kamil (you can also view the original English article)
Atribut lang
adalah salah satu atribut HTML global yang dapat diterapkan ke element HTML apa pun, dan atribut ini benar-benar dapat membantu dengan aksesibilitasnya (accessibility). Attribute ini memungkinkan Anda untuk menentukan bahasa suatu element dan semua element turunannya menggunakan bahasa "subtag": code karakter 2 atau 3 yang ditentukan oleh international standards body.
Penggunaan Dasar
lang
paling sering ditemukan pada element html
, di mana deklarasi dapat menyebar ke semua konten di halaman tersebut. Misalnya, deklarasi <html lang="en">
memberi tahu browser bahwa semua konten di halaman tresebut adalah bahasa Inggris.
subtags lang
juga memiliki script atau penunjuk wilayah, yang memungkinkan Anda untuk menentukan sistem penulisan bahasa atau wilayah geografis. Misalnya, deklarasi <html lang="en-GB">
menentukan Bahasa Inggris United Kingdom (color vs. colour, center vs. centre, dll).
Anda dapat mengganti deklarasi lang
yang ada dengan deklarasi lang
yang lebih spesifik untuk mengidentifikasi konten secara terprogram yang menggunakan bahasa yang berbeda dari bagian lain dalam halaman tersebut. Bagian yang ditulis dalam bahasa Spanyol pada halaman bahasa Inggris akan terlihat seperti ini:
<html lang="en"> <head>…</head> <body> <!-- English page content --> <aside lang="es"> <h2>Información para hispanohablantes</h2> <p><!-- Additional Spanish content --></p> </aside> </body> </html>
Jadi mengapa kita perlu melakukan ini? Ada beberapa alasan:
1. Penerjemahan dan Interoperabilitas
Mengidentifikasi bahasa konten memungkinkan layanan terjemahan seperti Google Chrome berfungsi lebih akurat. Karena Anda berbicara dengan mesin menggunakan code, Anda dapat langsung memberi tahu algoritme identifikasi bahasa asing yang seharusnya men-trigger perintah terjemahan.



Kehadiran deklarasi attribute lang
yang valid juga membantu layanan otomatis lainnya yang menyerap dan mengkontekstualkan konten situs web. Selain itu, dapat berfungsi sebagai pengait styling untuk hal-hal seperti CSS’ quotes
property.
2. Screen Reader
Beberapa perangkat lunak yang membaca konten di layar dengan keras juga dapat menguraikan attribute lang
, yang memengaruhi cara pengucapan konten dalam halaman. Perangkat lunak ini juga tidak hanya terbatas pada teknologi pembantu. Voice assistant seperti Alexa, mode pembaca browser khusus, aplikasi navigasi seperti Google Maps, public address system, dll. Semuanya dapat memiliki fungsionalitas ini.
Paling tidak, penggunaan yang tepat dari attribute lang
dapat menambahkan ekstra je ne sais quoi pada experience, memberi tahu perangkat lunak untuk membaca konten dengan keras seperti yang dilakukan seseorang.
Paling banter, attribute ini membantu dalam memahami konten Anda. Interface dengan voice-based tidak memiliki banyak keunggulan yang kita terima dengan UI visual, jadi penting untuk meminta mereka merepresentasikan konten seakurat mungkin.
Berikut ini contoh bagaimana pembaca layar populer JAWS memperlakukan konten yang memiliki attribute lang
dengan benar diterapkan padanya. Akan ada dua contoh yang dibacakan: satu tanpa attribute, dan satu dengan atrtibute lang
diterapkan dengan benar pada bagian frasa Prancis, “Dalam bahasa Prancis, frasa“ Bolehkah saya menggunakan kamar mandi Anda? ”Adalah, 'Puis-je utiliser votre salle de bain? '”
Kesimpulan
Menjelaskan dengan semantik konten Anda adalah salah satu hal kecil yang dapat Anda lakukan sebagai seorang developer untuk meningkatkan experience orang-orang dan layanan yang menggunakan situs web dan aplikasi web Anda.