Menguji Situs Web Drupal untuk Aksesibilitas dengan WCAG 2.1

Diterbitkan: 2023-05-16

Tahukah Anda bahwa 1 dari 4 orang dewasa di AS memiliki disabilitas*? Itu adalah 61 juta orang yang mengejutkan yang mungkin terpengaruh oleh situs web yang tidak dapat diakses.

Sebagai pengembang Drupal, Anda memiliki kekuatan untuk membuat perbedaan dengan memastikan situs Anda memenuhi Pedoman Aksesibilitas Konten Web (WCAG). Di blog ini, kita akan menjelajahi fitur utama dan praktik terbaik untuk menguji aksesibilitas WCAG 2.1 di Drupal, sehingga Anda dapat membuat situs web yang inklusif untuk semua pengguna.

pengujian aksesibilitas di situs web drupal

Apa itu Aksesibilitas (A11y)

Aksesibilitas mengacu pada membuat situs web dapat digunakan oleh sebanyak mungkin orang, terutama terkait dengan penyandang disabilitas. Apa yang dimaksud dengan A11y? A11y hanya mengacu pada kata "Aksesibilitas" di mana 11 menunjukkan jumlah karakter yang ada antara "A" dan "Y"

WCAG dan asal-usulnya

WCAG adalah singkatan dari Pedoman Aksesibilitas Konten Web. Ini dianggap sebagai tolok ukur standar untuk aksesibilitas situs web. Dibuat oleh World Wide Web Consortium (W3C), pedoman WCAG adalah cara terbaik dan termudah untuk membuat situs web Anda dapat digunakan oleh semua orang. Pedoman WCAG diikuti secara ketat oleh sebagian besar organisasi pemerintah dan layanan kesehatan untuk memastikan bahwa situs web mematuhi undang-undang aksesibilitas (misalnya, bagian 508).

Prinsip WCAG

Ada empat prinsip utama aksesibilitas jika Anda ingin menerapkan kepatuhan WCAG. Ini mengikuti akronim 'POUR', yang merupakan singkatan dari Perceivable, Operable, Understanding, dan Robust .

Terlihat

Dengan kata sederhana, konten harus dapat dideteksi oleh indra pengguna. Ini berarti bahwa mereka harus dapat mengenali informasi yang disajikan kepada mereka. Ini termasuk memungkinkan pengguna untuk mendengar konten audio dengan jelas dan memastikan bahwa itu dapat dibedakan dari kebisingan latar belakang.

Dapat dioperasikan

Ini semua tentang memastikan pengguna dapat dengan nyaman menavigasi situs web Anda dan antarmuka ramah pengguna. Tidak boleh ada bagian situs yang tidak dapat diakses atau langkah apa pun yang mungkin tidak dapat diselesaikan pengguna. Sebaiknya hindari konten yang bergerak cepat dan berkedip saat mendesain konten web Anda. Harus dibuat mudah untuk menjelajahi situs tanpa keyboard, juga memastikan situs dapat diakses oleh keyboard bagi pengguna yang tidak dapat menggunakan mouse.

Dapat dimengerti

Pengguna harus dapat memproses informasi yang disajikan kepada mereka dan juga dapat memahami cara menggunakan dan menavigasi melalui situs web. Ini termasuk membuat teks menjadi jelas dan dapat dibaca serta dapat diprediksi untuk memastikan bahwa halaman muncul dengan cara yang mudah digunakan dan diantisipasi.

Kokoh

Ini menyoroti bahwa teknologi dapat berkembang dan membangun situs web Anda dengan perkembangan teknologi di masa depan. Sebagai aturan umum, jika teknologi berubah dan berkembang, konten juga harus tetap dapat diakses. Itu juga perlu dipahami oleh spektrum yang luas dari pengguna dengan disabilitas yang berbeda dan tetap mudah dipahami. Misalnya, situs membuatnya kompatibel untuk bekerja dengan pembaca layar versi terbaru.

Mengapa Anda harus mematuhi WCAG

Di bawah ini adalah beberapa keuntungan penerapan WCAG

  • Situs web yang dapat diakses membangun niat baik terhadap merek Anda dan meningkatkan pengoptimalan mesin telusur. Situs Anda akan mendapat peringkat lebih tinggi dalam hasil mesin pencari.
  • Situs web yang dapat diakses memungkinkan keterlibatan, jangkauan, dan retensi yang lebih besar karena Anda akan secara efisien menghilangkan hambatan yang mencegah banyak orang mengakses konten Anda.
  • Setelah WCAG diimplementasikan sebagai bagian dari situs web mana pun, itu dianggap standar.

Kriteria Sukses WCAG 2.0/2.1: Paling Banyak Diimplementasikan

  1. Setiap kolom input di situs memiliki label yang sesuai
  2. Konten dekoratif diimplementasikan sedemikian rupa sehingga dapat diabaikan oleh teknologi pendukung. Misalnya, gambar dekoratif diabaikan oleh pembaca layar
  3. Teks disediakan untuk semua konten audio/video yang direkam sebelumnya
  4. Interpretasi bahasa isyarat disediakan untuk konten audio
  5. Urutan konten yang bermakna, misalnya judul pada halaman mana pun ditempatkan dalam urutan berurutan
  6. Pengguna dapat menjeda atau menghentikan audio atau mengontrol volume audio secara terpisah dari keseluruhan volume sistem untuk memutar video secara otomatis.
  7. Rasio kontras teks dan gambar teks adalah 4,5:1, dan teks dan gambar berskala besar adalah 3:1. Rasio kontras tidak berlaku untuk konten dekoratif atau logo atau nama merek
  8. Rendah atau tidak ada audio latar belakang. Audio/video pra-rekam tidak mengandung kebisingan latar belakang
  9. Semua fungsionalitas konten dapat diakses melalui antarmuka keyboard. Tidak akan ada jebakan kata kunci.
  10. Memberi pengguna waktu yang cukup untuk membaca dan menggunakan konten
  11. Jika konten berbasis waktu, pengguna diizinkan untuk menjeda atau menyesuaikan batasan waktu
  12. Jika ada konten yang bergerak cepat seperti komidi putar otomatis, pengguna akan diberikan opsi untuk menjeda atau menghentikannya
  13. Saat sesi pengguna yang diautentikasi berakhir, pengguna akan dapat melanjutkan sesi tanpa kehilangan data setelah autentikasi ulang.
  14. Judul halaman, judul, dan label akan menjelaskan topik halaman web
  15. Fokus keyboard terlihat dan disorot dengan baik
  16. Komponen yang dapat difokuskan akan menerima fokus dalam urutan yang menandakan makna dan pengoperasian.
  17. Setiap bagian halaman web disertai dengan judul bagiannya
  18. Kecuali untuk gambar dekoratif, semua gambar memiliki teks Alt yang bermakna
  19. Audio, video, formulir, menu tarik-turun, teks jangkar, URL, dan teks alternatif dapat diakses dengan keyboard dan pembaca layar
  20. Kejernihan konten disesuaikan dengan tingkat zoom halaman. Konten terlihat jelas, bahkan pada tingkat zoom maksimum
  21. Menu header dan footer dengan konteks bantuan harus tersedia di semua halaman di seluruh situs
  22. Situs-situs tersebut memiliki implementasi yang tepat dari status hover dan fokus

Pembaca Layar

Banyak orang dengan tantangan visual menggunakan kaca pembesar layar dan pembaca layar. Pembaca layar adalah perangkat lunak yang membacakan teks digital yang ditampilkan di layar dengan lantang. Beberapa contoh pembaca layar meliputi:

  • Produk berbayar seperti JAWS (Windows) dan Dolphin Screen Reader (Windows).
  • Freeware seperti NVDA (Windows), ChromeVox (Chrome) dan Orca (Linux).
  • Perangkat lunak bawaan OS (Sistem operasi), seperti VoiceOver (macOS, iPadOS, iOS), Narator (Windows), ChromeVox (di Chrome OS) dan TalkBack (Android).

Tiga tingkat aksesibilitas

WCAG 2.1 memiliki 3 level kriteria keberhasilan

  • Level A: Semua 30 kriteria sukses penting yang ditentukan dalam WCAG 2.0 terpenuhi. Minimal, semua situs web harus mencapai tingkat kepatuhan ini.
  • Tingkat AA: Semua kriteria keberhasilan tingkat A terpenuhi dan 28 kriteria keberhasilan aksesibilitas tambahan terpenuhi. Level ini mencapai spektrum aksesibilitas yang lebih luas dan seringkali menjadi tujuan yang ingin dicapai oleh sebagian besar tim pengembangan.
  • Tingkat AAA: Situs web harus memenuhi ketiga tingkat kriteria keberhasilan, termasuk 28 kriteria keberhasilan tambahan. Level ini biasanya disediakan untuk situs khusus seperti organisasi pemerintah.

Sebagian besar situs yang kompatibel dengan WCAG secara luas berada di bawah kriteria keberhasilan aksesibilitas tingkat A atau AA.

Menguji Aksesibilitas Situs Web Drupal

Berikut ini adalah langkah-langkah yang diikuti untuk melakukan tes aksesibilitas untuk situs web Drupal

  1. Jalankan audit Google Chrome Lighthouse dan perbaiki masalah aksesibilitas yang disorot
  2. Jalankan audit alat Wave
  3. Validasi fokus sorotan keyboard dan urutan tab halaman secara manual
  4. Validasi halaman dengan perangkat lunak pembaca layar yang diperlukan. Misalnya, VoiceOver
  5. Validasi aksesibilitas situs pada semua resolusi seperti desktop lebar, laptop, tab, dan perangkat seluler
  6. Validasi kode situs menggunakan alat validasi W3C untuk Markup dan CSS
  7. Validasi kontras warna situs untuk memastikannya memenuhi standar (4:5:1) dengan menggunakan alat ekstensi Chrome seperti Kontras atau aplikasi seperti Penganalisis Kontras Warna

Bagaimana Drupal Membantu Mencapai Standar Aksesibilitas

Pengembangan web harus menyertakan aksesibilitas untuk memastikan bahwa situs web berfungsi dan dapat diakses oleh mereka yang memiliki keterbatasan. Drupal terkenal dengan dedikasinya yang teguh terhadap aksesibilitas. Lihatlah bagaimana Drupal mempromosikan aksesibilitas dan alat serta fitur apa yang disediakannya untuk membantu situs web menjadi lebih ramah pengguna.

1. Membangun Aksesibilitas ke dalam Drupal

Tujuan tim pengembangan Drupal selalu membangun platform yang dapat digunakan oleh sebanyak mungkin pengguna. Persyaratan Panduan Aksesibilitas Konten Web (WCAG) 2.1 Level AA diikuti saat mengembangkan platform inti Drupal. Ini menunjukkan bahwa berbagai kecacatan, seperti yang memengaruhi sistem visual, pendengaran, fisik, verbal, kognitif, dan neurologis, dapat mengakses situs web Drupal.

2. Fitur Aksesibilitas Default

  • Dengan kemampuannya untuk beradaptasi dengan berbagai ukuran layar dan perangkat berkat desain yang responsif, tema bawaan Drupal dapat digunakan oleh mereka yang menggunakan perangkat seluler atau teknologi bantuan.
  • Drupal membuat markup HTML semantik, yang membantu pembaca layar dan alat bantu teknologi lainnya dalam memahami struktur situs web.
  • Drupal menyertakan bidang untuk menambahkan teks alternatif ke foto, yang membantu mereka yang buta dalam memahami konten situs web.
  • Drupal mendukung navigasi keyboard, yang sangat penting bagi pengguna yang tidak dapat menggunakan mouse.
  • Formulir yang mudah digunakan dan dinavigasi dengan teknologi bantuan dihasilkan oleh Drupal yang dapat diakses.

3. Drupal Menyediakan Plugin & Modul untuk Aksesibilitas

Untuk meningkatkan aksesibilitas situs web, Drupal menyediakan berbagai modul dan plugin aksesibilitas yang dapat digunakan. Beberapa modul dan plugin aksesibilitas yang populer adalah sebagai berikut:

  • Pemeriksa Aksesibilitas Editoria11y: Modul ini memeriksa situs web untuk masalah aksesibilitas dan membuat rekomendasi solusi.
  • Plugin Aksesibilitas CKEditor: Pengaya ini meningkatkan aksesibilitas editor teks yang banyak digunakan untuk Drupal, CKEditor.
  • Widget Aksesibilitas All-in-one: Modul ini menyertakan widget aksesibilitas yang memungkinkan pengguna mengubah ukuran teks situs web, kontras, dan pengaturan terkait aksesibilitas lainnya.
  • A11Y: Pembantu formulir: Modul ini membantu membuat semua formulir web Drupal memenuhi standar aksesibilitas
  • Blokir Peran Landmark ARIA: Modul ini menambahkan elemen tambahan ke formulir konfigurasi blok yang memungkinkan pengguna menetapkan peran landmark ARIA dan/atau label ARIA ke sebuah blok.

4. Dukungan Komunitas yang Kuat untuk Aksesibilitas

Pengembang dan desainer yang berkomitmen pada aksesibilitas merupakan bagian yang cukup besar dari komunitas Drupal. Upaya yang dipimpin oleh komunitas untuk membuat Drupal lebih mudah diakses oleh penyandang disabilitas adalah Grup Aksesibilitas Drupal. Grup ini menawarkan panduan, alat, dan praktik terbaik untuk mengembangkan situs web Drupal yang sesuai dengan ADA.

Referensi:

https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html

Pikiran Akhir

Drupal adalah sistem manajemen konten sumber terbuka dan efektif yang menyediakan berbagai fitur, alat, dan plugin untuk meningkatkan aksesibilitas situs web. Karena dedikasinya terhadap aksesibilitas dan kekuatan komunitasnya yang berfokus pada aksesibilitas, Drupal adalah platform fantastis untuk membuat situs web yang dapat digunakan dan diakses oleh mereka yang memiliki keterbatasan.
Saya harap artikel ini memberi Anda wawasan yang diperlukan tentang pengujian aksesibilitas dengan WCAG 2.1. Ingin membangun situs web Drupal yang dapat diakses dari awal atau ingin membuat situs Anda saat ini lebih mudah diakses? Kami ingin mewujudkannya! Ayo bicara!