Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Accessibility

Tips Siangkat: Menggunakan Attribute “lang” untuk Aksesibilitas yang Lebih Baik

by
Difficulty:BeginnerLength:ShortLanguages:

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:

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.

Google Chrome prompting the user to translate a page ScreenshotGoogle Chrome prompting the user to translate a page ScreenshotGoogle Chrome prompting the user to translate a page Screenshot
Google Chrome mendorong pengguna untuk menerjemahkan sebuah halaman.

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.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.