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 bagi pengembang. Ini adalah kebutuhan untuk setiap merek profesional. Ini dianggap serius: seperti yang dilaporkan oleh Variasiseseorang menggugat The Pokémon Company pada tahun 2019 karena situs web yang tidak dapat diakses.

Baca Juga:

Mau Berkarir di Dunia blockchain? Ini Dia 10 Skill yang Harus Kamu Dalami!

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 , bersifat non-semantik, sedangkan 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:

1. <article>
2. <aside>
3. <footer>
4. <header>
5. <main>
6. <nav>

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:

 <section>
<img src="/hero.png" alt="hero"> 
<article>
<h1>Find the right Products and Services at the right time.</h1>
<p>
Handmade footwear, hair revamp, social media manager, sending errands, source of income</b> &mdash; you name it, Taaskly got it. Find every product or service you need today when you sign up and use Taaskly. 
</p>
<a href="/main/home">Outsource a Task</a>
<a href="/main/services"> Find a service</a>
<a href="/main/marketplace" >Find a shop</a>
</article>
</section>
 

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