Desain Web yang Dapat Diakses: Cara Memperbarui Situs Anda untuk Semua Pengguna Internet

Diterbitkan: 2022-01-11

Dalam video ini, Jaci dari tim WebFX Interactive menjelaskan bagaimana Anda dapat memulai dengan desain web yang dapat diakses.

Salinan:

Bagaimana perasaan Anda jika Anda sangat bersemangat untuk memeriksa sebuah situs web, tetapi ketika Anda pergi ke situs web itu, Anda tidak dapat mengakses konten apa pun? Saya pribadi merasa frustrasi, dan saya membayangkan Anda juga.

Jika Anda tidak menggunakan desain web yang dapat diakses, ini adalah skenario yang Anda buat untuk satu dari empat orang dewasa yang hidup dengan disabilitas di AS. Itu sekitar 61 juta orang yang tidak memiliki akses yang sama ke situs web Anda.

Mengikuti pedoman aksesibilitas desain web tidak mudah jika Anda belum pernah melakukannya sebelumnya, tetapi saya akan menjelaskan beberapa hal yang dapat Anda lakukan untuk memulai .

Gunakan stempel waktu dalam deskripsi video jika Anda ingin melompat ke bagian lain dari video ini. Saat ini, saya akan menyelami ikhtisar aksesibilitas situs web.

Apa itu aksesibilitas situs web?

Aksesibilitas situs web berarti bahwa situs web Anda dirancang agar penyandang disabilitas dapat menggunakannya. Tujuan dari desain yang dapat diakses adalah untuk menghilangkan hambatan teknologi sehingga siapa pun dapat berinteraksi dengan konten Anda.

Menurut World Wide Web Consortium, juga dikenal sebagai W3C, situs web yang dapat diakses berfungsi untuk orang-orang dengan cacat pendengaran, kognitif, neurologis, fisik, bicara, dan visual.

Jangan khawatir jika Anda tidak yakin harus mulai dari mana. W3C memiliki dokumentasi yang memberi tahu Anda apa yang harus disertakan situs web Anda untuk memenuhi standar mereka.

Dokumentasi ini meliputi:

  • Pedoman Aksesibilitas Alat Penulisan (ATAG)
  • Pedoman Aksesibilitas Konten Web (WCAG)
  • Pedoman Aksesibilitas Agen Pengguna (UAAG)

ATAG berfokus pada alat yang digunakan orang untuk membuat konten Internet dan UAAG melihat aksesibilitas alat yang merender konten web.

Saya akan fokus pada WCAG dalam video ini, yang merupakan pedoman untuk membuat konten situs web dapat diakses oleh semua orang.

Dengan WCAG, Anda memiliki tiga tingkat kepatuhan yang berbeda: A, AA, dan AAA. Saat Anda beralih dari A ke AA ke AAA, Anda mengikuti lebih banyak standar yang ditetapkan oleh WCAG dan membuat situs Anda dapat diakses oleh lebih banyak orang.

Jadi, bagaimana Anda tahu jika Anda memiliki situs web yang dapat diakses? Lakukan audit!

Cara mengaudit aksesibilitas situs web Anda

Anda tidak perlu melakukan audit sendiri. Jika Anda lebih suka mengalihdayakan audit Anda, hubungi tim konsultan yang dapat menganalisis situs web Anda dan membuat penyesuaian yang diperlukan untuk Anda.

Sekarang, jika Anda lebih suka menangani hal-hal di rumah, Anda memiliki banyak pilihan. Anda dapat menyisir halaman situs web Anda untuk mencari masalah secara manual, tetapi ini mungkin akan menghabiskan banyak waktu Anda.

Anda mungkin ingin menggunakan beberapa alat untuk membantu Anda. Colokkan URL Anda ke pemeriksa aksesibilitas seperti WAVE untuk melihat apa yang perlu Anda perbarui di satu halaman. Anda juga dapat menggunakan pemeriksa aksesibilitas massal untuk menganalisis beberapa halaman sekaligus.

Pemeriksa aksesibilitas WAVE

Situs web W3C memiliki daftar besar alat aksesibilitas , jadi Anda tidak perlu melakukan semuanya sendiri.

Kami juga memiliki daftar lima elemen penting untuk aksesibilitas Anda dan beberapa contoh desain yang dapat diakses — yang akan saya bicarakan selanjutnya — jadi tetaplah bersama saya.

5 pedoman aksesibilitas desain web

Ingatlah bahwa ini adalah ringkasan singkat dari pedoman WCAG. Saya mendorong Anda untuk menggunakan panduan referensi cepat W3C untuk mempelajari teknik yang lebih mendalam untuk desain yang dapat diakses.

1. Pastikan teks dapat dibaca

Teks berukuran biasa apa pun yang menyampaikan informasi penting harus mudah dibaca.

Kontras memainkan peran penting dalam hal ini. Seperti yang ada sekarang, teks besar (seperti judul utama) membutuhkan rasio kontras teks dan latar belakang 3:1. Teks biasa (atau lebih kecil), seperti teks yang membentuk isi konten Anda, memerlukan rasio kontras 4,5:1.

Contoh kontras yang terlalu sedikit terlihat seperti teks hijau muda pada latar belakang hijau yang sedikit lebih gelap. Ubah teks menjadi mungkin hitam atau putih, dan Anda memiliki lebih banyak kontras di situs web Anda.

Pengguna juga harus dapat memperbesar teks dengan cara yang tidak memengaruhi fungsionalitas situs Anda atau menyebabkan mereka kehilangan konten.

2. Optimalkan gambar untuk dilihat dan dibaca

Menambahkan teks alternatif ke gambar bukan hanya praktik SEO yang umum. Ini membantu orang yang tidak dapat melihat gambar untuk memahami apa yang ada di dalamnya.

Alt text adalah sedikit teks yang menjelaskan dengan jelas apa yang terjadi dalam sebuah gambar. Teks alt cocok dengan kode embed gambar Anda. Seperti yang Anda lihat dalam contoh ini dari Mashable, halaman memiliki gambar dan ketika Anda membalik ke sisi kode, Anda melihat teks alternatif.

Tangkapan layar teks alternatif dalam kode situs web Mashable

3. Beri pemirsa Anda cara tambahan untuk memahami video

Jika Anda belum pernah menambahkan teks ke video Anda sebelumnya, sekaranglah saatnya untuk memulai. Dan jangan hanya mengandalkan yang dihasilkan oleh YouTube atau penyedia hosting lain secara otomatis.

Jika Anda memiliki waktu dan kesabaran, lihat teks yang dibuat secara otomatis dan edit. Mereka tidak akan sempurna datang dari AI.

Anda juga dapat memesan teks menggunakan alat seperti Rev dan kemudian menambahkannya ke video Anda.

Menyertakan transkrip dengan video Anda membuatnya lebih mudah diakses. Jika Anda sudah menulis naskah, Anda sudah menyiapkan transkripnya!

Deskripsi audio menambahkan lapisan aksesibilitas lainnya. Ini adalah trek audio terpisah yang menjelaskan apa yang terjadi di video Anda di antara celah dialog.

Jadi, jika Anda memiliki dua orang yang membicarakan tentang perjalanan belanja mereka baru-baru ini, dan kemudian video tersebut dipotong menjadi beberapa cuplikan dari seseorang yang mencoba pakaian, deskripsi audio akan menjelaskan apa yang terjadi dalam video tersebut. Mungkin seperti ini: Seorang wanita berdiri di depan cermin dan menggantungkan dua syal di bahunya.

Platform hosting seperti Wistia memungkinkan Anda mengunggah deskripsi audio (dan bahkan memiliki daftar periksa aksesibilitas video saat Anda mengunggah video).

4. Rancang situs web Anda agar ramah mouse dan keyboard

Tidak semua orang menggunakan mouse untuk menavigasi Internet. Situs web Anda harus mencerminkan hal itu.

Ini tidak hanya berarti Anda harus memastikan seseorang dapat berinteraksi dengan situs web Anda melalui keyboard, tetapi juga mengharuskan Anda memiliki cara nyata untuk menyoroti bagian mana dari situs web Anda yang menjadi fokus.

Melihat contoh desain lain yang dapat diakses, Anda melihat bahwa ketika saya mengklik bilah pencarian di situs web Keds, garis berkedip klasik muncul untuk memberi tahu saya bahwa saya dapat mengetik. Bilah pencarian juga menjadi lebih menonjol saat diklik.

Tangkapan layar bilah pencarian di situs web Keds

Untuk memenuhi pedoman WCAG, fungsi ini harus terjadi saat keyboard digunakan.

5. Jadikan navigasi situs Anda mudah dimengerti

Tip ini melampaui aksesibilitas. Secara umum adalah hal yang baik untuk membuat navigasi situs web Anda sederhana dan jelas.

Tulis judul halaman dan heading yang memiliki tujuan yang jelas. Gunakan teks tautan tautan yang memudahkan untuk memahami isi konten yang Anda tautkan.

Sekali lagi, gunakan indikator fokus sehingga orang tahu di mana mereka berada di halaman. Menawarkan lebih dari satu cara untuk mengakses halaman web, seperti melalui peta situs, navigasi utama, atau daftar isi.

Dan bagaimana saya bisa melewatkan yang ini? Memiliki navigasi yang konsisten. Ini berarti jika Anda memiliki tajuk navigasi utama, itu seharusnya tidak berubah ketika pengguna melompat dari halaman ke halaman.

Dalam contoh ini menampilkan situs web At Home, meskipun saya mengklik dari satu halaman ke halaman berikutnya, navigasi di bagian atas halaman tidak berubah.

Tangkapan layar navigasi utama di situs web perusahaan dekorasi rumah At Home

Dan seperti yang saya katakan sebelumnya, ini jelas bukan daftar lengkap tentang apa yang perlu Anda lakukan untuk mengikuti panduan aksesibilitas desain web. Panduan ini juga dapat berubah, jadi lakukan riset saat Anda siap untuk mengevaluasi aksesibilitas Anda .

Untuk terus belajar tentang berbagai desain web dan topik pemasaran digital, berlangganan saluran YouTube dan buletin email kami, Revenue Weekly . Anda tidak akan kecewa.

Terima kasih telah bergabung dengan saya!

Bergabunglah dengan 5.000 pemasar yang mendapatkan pengetahuan pemasaran mereka dari video WebFX.

Berlangganan sekarang