Memahami Teknik HTML untuk Meningkatkan Aksesibilitas Web

Membuat halaman web tidak hanya membuat halaman web. Aspek penting dari pengembangan front-end adalah memastikan antarmuka pengguna dapat diakses oleh semua orang di internet, termasuk penyandang disabilitas penglihatan dan pendengaran. Anda harus menulis kode Anda dengan mempertimbangkan orang-orang ini. Bagaimana Anda memberikan akses yang sama kepada orang yang memiliki keterbatasan visual ke situs web Anda sebagai orang yang tidak memiliki keterbatasan visual? Baca artikel ini untuk mencari tahu.

Mengapa Pengembang Harus Memperhatikan Aksesibilitas Web?

Aksesibilitas web berkisar pada gagasan bahwa setiap orang harus memiliki akses yang sama ke web, terlepas dari kecacatan atau kecacatan apa pun. Memiliki situs web yang dapat diakses membuatnya lebih mudah untuk menjangkau khalayak yang lebih besar (sekitar 16% dunia menderita salah satu kecacatan atau lainnya).

Aksesibilitas digital seharusnya tidak menjadi pilihan

untuk pengembang. Ini adalah kebutuhan untuk setiap merek profesional. Ini dianggap serius: seperti yang dilaporkan oleh Variasi, seseorang menggugat The Pokémon Company pada tahun 2019 karena situs web yang tidak dapat diakses.

Aksesibilitas Web Dengan HTML

Dalam HTML, ada aturan untuk memastikan pengembangan situs web yang dapat diakses. Bagian ini akan menjelaskan beberapa peraturan tersebut.

Gunakan Elemen Semantik

Elemen semantik dalam HTML adalah elemen yang memiliki makna. Di HTML5, ada sekitar 100 elemen. Beberapa elemen seperti Dan, adalah non-semantik, sementara tag HTML lainnya bersifat semantik. Meskipun tidak mungkin untuk berhenti menggunakan elemen non-semantik ini, penting untuk memasukkan sebanyak mungkin elemen semantik ke dalam karya Anda. Berikut adalah daftar elemen semantik populer:

Pertimbangkan contoh ini dari Taaskly:

Sekilas pada gambar di atas akan mengungkapkan elemen-elemen berikut:

• Judul
• Sebuah gambar
• Sebuah paragraf
• Tiga tombol

Mudah untuk berasumsi bahwa pengembang menggunakan tag untuk mengatur elemen di layar. Dengan melihat kode lebih dekat, Anda akan melihat bahwa mereka menggunakan enam tag semantik. Kode yang disederhanakan terlihat seperti ini:

<bagian>
<imgsrc="/hero.png"alt="pahlawan">
<artikel>
<h1>Temukan Produk dan Layanan yang tepat pada waktu yang tepat.h1>
<P>
 Alas kaki buatan tangan, penataan rambut, manajer media sosial, pengiriman tugas, sumber pendapatanB>— sebut saja, Taaskly mengerti. Temukan setiap produk atau layanan yang Anda butuhkan hari ini dengan mendaftar dan menggunakan Taaskly. 
P>
<Ahref="/utama/rumah">Mengalihdayakan TugasA>
<Ahref="/utama/layanan"> Temukan layananA>
<Ahref="/utama/pasar" >Cari tokoA>
artikel>
bagian>

Dari cuplikan HTML, Anda dapat mengamati hal berikut:

1. Gambar, teks, dan tombol ada di dalam a elemen.
2. Itu elemen sama-sama membagi Dan elemen.
3. Itu elemen memegang, , Dan elemen.
4. Tombol diberi kode sebagai elemen; karenanya, mereka adalah tautan, bukan tombol. Sebagai aturan umum, selalu gunakan tautan untuk mengarahkan pengguna ke halaman atau tampilan lain, dan gunakan tombol saat Anda hanya ingin pengguna melakukan tindakan dalam tampilan yang sama. Melihat Halaman Tombol Angular untuk info lebih lanjut tentang ini.

Gunakan Tengara untuk Memberikan Struktur Halaman yang Jelas

Tengara adalah tag semantik yang membantu pengguna tunanetra menavigasi halaman web dengan pembaca layar. Dengan landmark, Anda dapat dengan mudah menentukan berbagai bagian halaman web. situs web Apple menggunakan Tengara.

Gambar di atas menunjukkan empat landmark yang berbeda. Anda dapat menggunakan Wawasan Aksesibilitas ekstensi untuk memvisualisasikan landmark ini.

Pada gambar tersebut, kita dapat menyimpulkan a di bagian atas, a berisi a, dan a elemen. Terlihat, gambar menunjukkan "navigasi", "wilayah", Dan “info konten”. Ini dikenal sebagai peran, yang akan kita lihat nanti.

Setiap kali Anda harus menggunakan beberapa penanda untuk satu halaman, selalu bedakan dengan label. Misalnya, jika Anda menggunakan banyak elemen seperti yang dimiliki Apple, Anda harus memberi label. Anda harus melabelinya dengan aria-label atribut. Jadi, Anda dapat menulis sesuatu seperti ini:

<navaria-label = "global">
<navaria-label = "navigasi lokal">
<navaria-label = "direktori apel">

Menggunakan label dapat membantu pembaca layar melewati navigasi apa pun.

Memanfaatkan Atribut Peran, Nama, dan Nilai

Terkadang, tidak mungkin menggunakan elemen HTML dengan fitur aksesibilitas bawaan. Kasus seperti itu dapat berupa salah satu dari keduanya:

1. Tidak ada elemen HTML asli untuk apa yang ingin Anda capai. Misalnya, jika Anda harus menggunakan a karena sepertinya tidak ada unsur lain yang cocok dengan peran tersebut.
2. Anda tidak dapat menggunakan elemen semantik karena masalah teknis. Jika Anda menggunakan kerangka kerja yang menggunakan ketika itu akan lebih baik untuk digunakan, itu akan menjadi tugas Anda untuk menentukan kontrol kustom.

Untuk menentukan kontrol khusus, Anda memerlukan peran, nama, dan nilai (terkadang) untuk elemen Anda.

Peran

Secara default, a elemen memiliki peran navigasi, sementara a elemen memiliki peran spanduk. Anda hanya boleh menggunakan elemen ini untuk tujuan yang dimaksudkan untuk membantu teknologi pendukung memahami struktur halaman web. Jika Anda harus menggunakan salah satu dari yang lain, Anda harus menentukan peran seperti ini:

<tajukperan = "navigasi">
<navperan = "spanduk">
<divperan = "navigasi">

Nama

Nama adalah teks deskriptif atau label yang terkait dengan elemen HTML. Bentuk termudah dari sebuah nama adalah teks dari sebuah elemen. Ini contohnya:

<divperan = "tombol">Klik saya!div>

Dalam cuplikan di atas, "Klik saya!" adalah nama dari elemen. Itu juga dikenal sebagai nama yang dapat diakses.

Untuk elemen seperti navigasi, drop-down, dll., menetapkan nama lebih rumit daripada contoh sebelumnya. Ini berbeda karena elemen ini memiliki elemen anak di dalamnya. Untuk menetapkan nama navigasi di atas, gunakan aria-label atribut. Lihatlah contoh ini:

<navperan = "navigasi"aria-label = "navigasi global">...nav>

Anda harus mencatat bahwa a nama atribut berbeda dari nama yang dapat diakses. Cuplikan kode ini memberikan pemahaman yang lebih baik:

 atribut nama 
<navperan = "navigasi"nama = "navigasi global">...nav>
 nama yang dapat diakses 
<navperan = "navigasi"aria-label = "navigasi global">...nav>

Melihat Artikel TGPi tentang nama yang dapat diakses untuk mendapatkan pemahaman yang lebih dalam tentang ini.

Nilai

Dalam HTML, atribut nilai dapat memberikan informasi tambahan tentang suatu elemen. Nilai memberikan informasi tentang status komponen untuk komponen kustom seperti akordeon. Misalnya, akordeon dapat dibuka atau ditutup.

Anda dapat menambahkan nilai ke elemen Anda dengan beberapa cara. Cuplikan ini menunjukkan beberapa cara yang dapat Anda lakukan:

 aria-valuenow 
kelas="tombol putar" aria-label="Putar audio" aria-nilaisekarang="0"></button>
<audiosrc="file-audio.mp3">audio>
aria-diperluas
<divperan="tombol"aria-diperluas="PALSU">FAQ 1div>
nilai
<memasukkanjenis="kotak centang"nama="produk[]"nilai="1">

Memprioritaskan Aksesibilitas Web untuk Pengalaman Daring yang Inklusif

Aksesibilitas web melampaui aturan berikut; ini juga tentang memastikan bahwa setiap orang memiliki akses yang sama ke situs web Anda. Memasukkan elemen semantik, landmark, dan atribut seperti peran, nama, dan nilai ke dalam HTML Anda dapat membuat situs web Anda lebih mudah diakses oleh penyandang disabilitas. Jangan menganggap aksesibilitas web sebagai pilihan; menganggapnya sebagai kebutuhan.