Aksesibilitas dan judul: mendesain untuk pengguna tunanetra
Diterbitkan: 2021-07-19Detail kecil seperti bagaimana Anda menggunakan judul di situs web atau aplikasi Anda dapat merugikan prospek atau penjualan Anda. Baca terus untuk mengetahui mengapa situs web Anda harus dapat diakses, apa yang bisa terjadi jika tidak, dan beberapa praktik terbaik tentang bagaimana Anda dapat menggunakan heading untuk memandu pengguna melalui halaman dengan benar.
Kasus untuk aksesibilitas
Judul dapat dengan mudah diabaikan saat mendesain situs web baru atau memperbarui situs web lama Anda. Pemasar cenderung lebih fokus pada sisi estetika desain dan kurang pada sisi praktis. Memang benar bahwa elemen visual memainkan peran penting dalam pengalaman pengguna (UX) situs web, namun membuatnya lebih mudah diakses oleh pengguna dengan gangguan penglihatan dapat meningkatkan jumlah pengunjung yang berkonversi.
Statistik memperkuat kasus kami untuk aksesibilitas:
- sekitar 253 juta orang di seluruh dunia menderita gangguan penglihatan
- setiap hari 250 orang mulai kehilangan penglihatan mereka di Inggris
- lebih dari 2 juta orang di Inggris hidup dengan kehilangan penglihatan yang berdampak signifikan pada kehidupan sehari-hari mereka, misalnya ketidakmampuan mengemudi
- degenerasi terkait usia adalah penyebab utama kebutaan pada orang dewasa.

Dengan 4,1 juta orang diperkirakan akan terpengaruh oleh kehilangan penglihatan di Inggris pada tahun 2050 , bisnis tidak dapat tidak menyesuaikan situs web mereka dengan semua audiens. Ini sangat penting jika target pasar mereka adalah demografis yang lebih tua, yang lebih mungkin mengalami masalah penglihatan.
Aspek sederhana seperti menggunakan heading dengan benar dapat membuat perbedaan besar dan tidak sulit untuk diterapkan. Itu juga bisa menghemat biaya untuk melalui gugatan.
kasus domino
Domino's Pizza adalah contoh yang baik tentang bagaimana mengabaikan aksesibilitas untuk pengguna tunanetra bisa mahal.
Seorang pelanggan tunanetra AS mengajukan keluhan pada tahun 2016 setelah berjuang untuk memilih topping, menggunakan kode diskon dan bahkan menyelesaikan pesanannya di aplikasi iPhone restoran. Masalahnya adalah aplikasi tidak terintegrasi dengan perangkat lunak pembaca layar ponsel, yang menyuarakan konten berdasarkan teks yang digunakan dengan benar dan gambar ditandai dengan teks. Aplikasi dan situs web perusahaan tidak memiliki kode yang benar untuk memungkinkan iPhone membacakan opsi.

Sementara hakim pada awalnya berpihak pada Domino, pengadilan banding memutuskan untuk memenangkan pelanggan minggu lalu dengan alasan bahwa “ Dugaan tidak dapat diaksesnya situs web dan aplikasi Domino menghambat akses ke barang dan jasa dari waralaba pizza fisiknya – yang merupakan tempat umum akomodasi ”.
Di Inggris, Royal National Institute of Blind People juga menyambut baik komentar putusan untuk BCC : “Semua organisasi memiliki tanggung jawab di bawah Undang-Undang Kesetaraan 2010 untuk memastikan bahwa situs web dan aplikasi mereka dapat digunakan oleh orang-orang tunanetra dan sebagian terlihat, termasuk mereka yang menggunakan pembaca layar”.
Ada berbagai cara di mana bisnis dapat membuat situs web mereka lebih mudah diakses dan menggunakan tag heading dengan benar sangat membantu pengguna menavigasi halaman.
Judul praktik terbaik untuk aksesibilitas
Ada sedikit kebingungan dan penyalahgunaan heading, sebagian karena pengembang mengikuti desain terlalu dekat atau desainer tidak mengetahui cara yang benar untuk menggunakan heading.

Jika Anda tidak yakin apa itu heading, maka W3C memiliki definisi yang baik dan Yoast menjelaskan penggunaan SEO-nya.
W3C mendefinisikan penggunaan yang benar sebagai:
“Enam elemen heading, H1 sampai H6, menunjukkan heading bagian. Meskipun urutan dan kemunculan judul tidak dibatasi oleh DTD HTML, dokumen tidak boleh melewati level (misalnya, dari H1 ke H3), karena mengonversi dokumen tersebut ke representasi lain seringkali bermasalah.”
Penggunaan judul yang benar tidak hanya berdampak pada cara orang dan Google membaca halaman Anda, tetapi juga berdampak besar pada cara pembaca layar menyajikan konten Anda kepada pengguna. Orang yang menggunakan alat aksesibilitas dapat menavigasi halaman melalui judul Anda, jadi jika Anda memiliki sesuatu yang penting untuk dikatakan maka itu harus ditata secara struktural dan visual seperti yang Anda inginkan.
Tidak perlu kerja ekstra untuk membuat judul dapat diakses saat Anda membuat halaman. Jika Anda mengikuti penggunaan yang benar maka kriteria aksesibilitas akan terpenuhi. Saran aksesibilitas W3c untuk heading menjelaskan hal ini dengan cukup baik, dan seperti yang Anda lihat, ini tidak hanya masuk akal untuk aksesibilitas tetapi juga masuk akal secara struktural dan visual.
Bagaimana cara memeriksa judul?
Jika pengembang atau tema Anda mengikuti penggunaan heading yang benar, maka Anda seharusnya dapat dengan mudah menambahkan konten dan menambahkan heading Anda dengan cara yang benar melalui editor/CMS Anda.
Sebagai catatan tambahan, Anda tidak perlu menambahkan judul di mana-mana, H1 sederhana (yang biasanya merupakan judul halaman) diikuti oleh H2 sudah cukup – tetapi katakanlah Anda ingin menyusun halaman yang sangat panjang dengan benar atau Anda memeriksa halaman orang lain kerja? Coba gunakan salah satu plugin ini untuk browser favorit Anda:
- Peta judul untuk Chrome
- Peta judul untuk Firefox
Setelah diinstal, mereka sangat mudah digunakan dan setiap judul yang salah muncul disorot dengan warna merah di bilah sisi saat Anda mengklik tombol plugin. Fitur ini juga akan menjadi opsi default di editor Gutenberg di rilis WordPress 5.0 dan dijelaskan di situs ini.
Cara penggunaan heading yang benar:
<h1>Biasanya judul halaman Anda</h1>
<p>Beberapa teks paragraf di sini</p>
<h2>Bagian penting berikutnya dari halaman Anda</h2>
<p>Beberapa teks paragraf di sini</p>
<h3>Sesuatu yang tidak begitu penting tetapi berhubungan dengan h2 di atas</h3>
<p>Beberapa teks paragraf di sini</p>
<h2>Bagian penting berikutnya dari halaman Anda</h2>
Cara penggunaan heading yang salah:
<h1>Biasanya judul halaman Anda</h1>
<p>Beberapa teks paragraf di sini</p>
<h3>Bagian penting berikutnya dari halaman Anda</h3>
<p>Beberapa teks paragraf di sini</p>
<h2>Sesuatu yang tidak begitu penting tetapi berhubungan dengan h3 di atas</h2>
<p>Beberapa teks paragraf di sini</p>
<h4>Bagian penting berikutnya dari halaman Anda</h4>
Gambar di bawah ini menunjukkan heading yang digunakan untuk styling daripada struktur. Ini akan menyebabkan kesalahan markup dan secara semantik salah – hindari menggunakannya seperti ini!

Semoga posting ini sekarang akan membantu Anda menyusun halaman web Anda dengan benar untuk semua orang.
Jika Anda memerlukan bantuan dengan Pengembangan Web Anda, jangan ragu untuk menghubungi kami.
