Artikel Yang Perlu Diketahui Tentang Perubahan WCAG Mendatang
Diterbitkan: 2022-10-07Pada bulan September 2022, W3C mengumumkan bahwa versi WCAG berikutnya telah mencapai status rekomendasi kandidat. Kecuali perubahan jam kesebelas, versi 2.2 dari standar harus segera diratifikasi. Perubahannya relatif kecil, tetapi siapa pun yang bertanggung jawab atas konstruksi atau pemeliharaan situs web harus tahu apa yang akan terjadi.
Jika Anda sudah terbiasa dengan WCAG, Anda dapat melewati ikhtisar dan langsung ke detail kutu buku, jika tidak, baca terus.
Apa itu WCAG, dan Mengapa Itu Penting?
Pedoman Aksesibilitas Konten Web (WCAG) terdiri dari serangkaian kriteria yang dirancang untuk membantu pengembang web, perancang, dan administrator konten memastikan situs web mereka dapat diakses oleh orang-orang dengan berbagai disabilitas. Tim Inisiatif Aksesibilitas Web W3C bertanggung jawab atas standar tersebut. W3C dan WAI terdiri dari konsorsium pemimpin industri dan pakar materi pelajaran yang berfokus untuk membuat web lebih mudah diakses.
WCAG diatur berdasarkan empat prinsip aksesibilitas. Prinsip-prinsip tersebut menyatakan bahwa sebuah situs web harus dapat dipahami, dapat dioperasikan, dapat dipahami, dan kuat. Di dalam masing-masing prinsip ini terdapat pedoman yang menjelaskan tujuan dasar. Dalam setiap pedoman terdapat kriteria keberhasilan yang menggambarkan tujuan spesifik dan terukur yang harus dipenuhi oleh pengembang situs web agar sesuai dengan WCAG.
Kriteria keberhasilan masing-masing memiliki indikator tingkat kesesuaian A, AA atau AAA. Kriteria Level A lebih mudah dipenuhi, sedangkan AAA paling ketat.
Apakah Saya Akan Digugat jika Situs Web Saya Tidak Memenuhi WCAG 2.2 AA?
Jawaban pasti adalah "mungkin".
Di AS, undang-undangnya ambigu, dan ADA tidak secara eksplisit menangani situs web. Meskipun ada undang-undang yang sangat spesifik tentang akomodasi yang harus dibuat di ruang fisik, satu-satunya hal yang menurut ADA dapat diterapkan langsung ke situs web adalah bahwa "fasilitas harus dapat diakses" perusahaan. Meski begitu, tidak semua pengadilan setuju apakah situs web dianggap sebagai fasilitas perusahaan dan tidak ada definisi yang jelas tentang "dapat diakses". Perhatikan bahwa kita berbicara tentang situs web perusahaan swasta dan undang-undang federal. Untuk situs web federal dan beberapa pemerintah negara bagian, ada undang-undang yang berlaku.
Karena tidak ada definisi yang jelas tentang "dapat diakses", kami melihat ke WCAG untuk memberi tahu kami apa yang harus dilakukan saat membangun atau memelihara situs web. Tidak ada undang-undang AS yang secara khusus merekomendasikan versi WCAG (atau standar lainnya) untuk situs web publik. Namun, berjuang untuk memenuhi versi kriteria keberhasilan WCAG adalah tujuan yang baik. Ini harus mengarah ke situs yang dapat diakses secara wajar untuk semua.
Bagaimana Standar Dikembangkan?
Berlawanan dengan kepercayaan populer, pengembangan standar tidak dilakukan di menara gading oleh segelintir peserta terpilih. Sementara sebagian besar pekerjaan dilakukan oleh karyawan organisasi anggota, sebagian besar pekerjaan berasal dari pakar yang diundang dan individu lain yang bersemangat tentang topik tersebut dan bersedia meluangkan waktu. Lebih lanjut, banyak tim standar memiliki forum publik terbuka di mana anggota masyarakat pada umumnya didorong untuk berpartisipasi dengan mengajukan pertanyaan atau mengangkat masalah baru.
Untuk WCAG, publik dapat membaca dan mengomentari standar dengan membuka edisi baru, pull request, atau hanya dengan berpartisipasi dalam diskusi yang ada di repositori WCAG di Github. Ketika datang ke grup dengan sebuah ide, selalu bijaksana untuk mencari semua masalah yang ada dan menarik permintaan untuk memastikan ide Anda belum dibawa ke meja. Jika Anda berpikir untuk berkontribusi pada WCAG dengan permintaan tarik, selalu luangkan waktu untuk membuka masalah dan diskusikan ide Anda terlebih dahulu. Ada kemungkinan besar bahwa Anda dapat menyelamatkan diri dari beberapa pekerjaan yang tidak perlu.
Berkontribusi pada standar bisa membuat frustrasi dan sulit, tetapi juga sangat bermanfaat. Sebagian besar, peserta sangat ramah dan sabar. Jika Anda meluangkan waktu untuk meneliti ide-ide Anda, melakukan uji tuntas, dan bersikap sopan serta menghormati orang lain, maka kontribusi Anda akan diterima. Hasil terburuk yang mungkin terjadi adalah Anda akan menjadi lebih akrab dengan materi pelajaran daripada yang pernah Anda bayangkan.
Apa yang Berubah?
Satu kriteria keberhasilan yang ada telah diubah di WCAG 2.2, dan sembilan kriteria keberhasilan baru telah ditambahkan. Di sini kami akan membatasi diri hanya pada Level A dan AA karena kami jarang menargetkan AAA. Untuk melihat semua kriteria baru, lihat artikel lengkap dari W3C,
2.4.7 Fokus Terlihat (A)
Kriteria ini telah berubah dari Level AA menjadi A, yang merupakan bar terendah untuk kesesuaian WCAG. Sebagian alasannya adalah bahwa, di masa lalu yang tidak terlalu lama, itu adalah praktik umum bagi orang-orang yang membuat situs web untuk menghapus cincin fokus. Lagi pula, mereka bukan bagian dari desain. Ini berarti bahwa pengguna yang menavigasi halaman web dengan keyboard mereka tidak dapat melihat di mana mereka berada di halaman. Masuk akal bahwa kriteria ini dipindahkan ke A tunggal karena sejumlah besar pengguna bergantung pada navigasi keyboard, bahkan mereka yang tidak memiliki gangguan dalam bentuk apa pun.
Semua browser web utama akan menampilkan cincin fokus secara default. Persyaratan utama di sini adalah tidak merusak fungsionalitas bawaan.
W3C – Memahami Fokus Terlihat
2.4.11 Penampilan Fokus (AA)
Kriteria baru ini mendefinisikan beberapa aturan klarifikasi tentang visibilitas cincin fokus. Mereka harus memiliki rasio kontras 3:1 dengan piksel di sekitarnya dan piksel yang diganti. Mereka juga harus menyertakan elemen atau sub-komponen yang difokuskan atau sebesar garis setebal 4 piksel di sepanjang tepi terpendek elemen.
Sekali lagi, cincin fokus default browser biasanya akan memenuhi kriteria ini. Karena pengguna terbiasa dengan default, Anda hanya boleh menggantinya jika perlu. Salah satu contohnya mungkin jika ada kontras warna yang tidak memadai antara cincin fokus default dan warna utama merek Anda. Browser biasanya default ke cincin fokus biru, jadi jika Anda memiliki warna biru di palet merek Anda, mungkin ada konflik.
W3C – Memahami Penampilan Fokus
2.4.12 Fokus Tidak Diburamkan (Minimum) (AA)
Kriteria ini menyatakan bahwa fokus tidak boleh sepenuhnya dikaburkan oleh konten buatan pengguna. Ini dimaksudkan untuk mencegah konten berlapis, seperti navigasi lengket (bilah menu yang tetap berada di bagian atas jendela saat pengguna menggulir), menutupi indikator fokus.
Perbaikan termudah di sini adalah tidak memiliki elemen lengket. Namun, situs web modern menggunakan navigasi lengket dan CTA mengambang secara liberal, sehingga kemungkinan itu bukan pilihan. Ada beberapa harapan bahwa properti CSS scroll-padding dan scroll-margin suatu hari nanti akan memungkinkan kita untuk menentukan offset yang akan mengakomodasi sticky nav. Untuk saat ini, properti tersebut digunakan secara eksklusif pada elemen yang memanfaatkan scroll snap.
Itu meninggalkan kita dengan JavaScript. Secara umum, tujuan kami adalah hanya menggunakan JavaScript di browser jika diperlukan. Fungsi StickyFix ini akan memantau elemen yang dapat difokuskan di dalam elemen utama, dan jika elemen tersebut dikaburkan oleh navigasi tempel saat mendapatkan fokus, elemen tersebut akan digulir ke tampilan.
Untuk menggunakan fungsi ini, cukup sertakan dalam file JavaScript situs Anda.
/** * A minimal function that will detect if a focusable element is obscured by sticky navigation * This only works for sticky elements at the top of the page, but could be extended * @author Donovan Buck <[email protected]> * @param {string} selector - A valid CSS selector string for the sticky element * @param {number} offset - An additional offset for the focused element * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors * @tutorial https://www.brandextract.com/Insights/Articles/Changes-to-the-Web-Content-Accessibility-Guidelines/ * @license MIT */ function stickyFix(selector, offset = 0) { // Find the height of our sticky element const sticky = document.querySelector(selector); let stickyRect = sticky.getBoundingClientRect(); let stickyHeight = stickyRect.bottom - stickyRect.top; // Select all the focusable elements within the main element const focusables = document.querySelectorAll('main button:not([disabled]), main [href], main input:not([disabled]), main select:not([disabled]), main textarea:not([disabled]), main [tabindex]:not([tabindex="-1"]):not([disabled]), main details:not([disabled]), main summary:not(:disabled)'
); // Add a listener to each focusable element focusables.forEach(focusable => { focusable.addEventListener('focus', (event) => { const targetRect = event.target.getBoundingClientRect(); if(targetRect.top < stickyHeight + offset) { window.scrollTo({ top: targetRect.top + window.scrollY - stickyHeight - offset }); } }); }); };Anda kemudian dapat memanggil fungsi:
// Wait for the document to load document.addEventListener("DOMContentLoaded", function() { stickyFix('.sticky', 24); });Memahami Fokus Tidak Terkaburkan (Minimum)
2.5.7 Gerakan Menyeret (AA)
Kriteria ini menyatakan bahwa jika gerakan menyeret adalah bagian dari antarmuka pengguna, maka metode alternatif harus disediakan yang memungkinkan tindakan tunjuk dan klik sederhana. Contohnya adalah formulir yang memungkinkan pengguna untuk menarik dan melepas file dari komputer mereka ke browser untuk diunggah. Anda harus memastikan bahwa pengguna juga dapat menggunakan dialog unggah file mereka untuk memilih file mana yang harus diunggah. Gerakan menyeret umumnya tidak diperlukan di sebagian besar UI situs web, dengan pengecualian yang satu ini.
Memahami Gerakan Menyeret
2.5.8 Ukuran Target (Minimum) (AA)
Target penunjuk apa pun harus berukuran minimal 24 x 24 piksel kecuali target tersebut berjarak setidaknya 24 piksel dari setiap target yang berdekatan atau target berada dalam kalimat atau blok teks. Saat memeriksa desain untuk kriteria ini, berhati-hatilah untuk memeriksa tautan berbagi sosial yang hanya menggunakan ikon dan semua daftar navigasi Anda.
Memahami Ukuran Target (Minimum)
3.2.6 Bantuan Konsisten (A)
Misalkan situs web Anda berisi detail kontak, opsi bantuan mandiri, atau mekanisme kontak apa pun yang muncul di beberapa halaman. Dalam hal ini, elemen tersebut akan muncul dalam urutan yang sama relatif terhadap konten halaman lain di seluruh situs Anda. Ini sebagian besar merupakan fungsi dari desain yang baik dan konsisten, dan kriteria ini seharusnya tidak sulit untuk dipenuhi.
Memahami Bantuan yang Konsisten
3.3.7 Otentikasi yang Dapat Diakses (AA)
Memaksa pengguna untuk mengingat nama pengguna dan kata sandi dapat menimbulkan beban yang tidak semestinya bagi penyandang disabilitas kognitif. Karena itu, pengembang web tidak boleh membuat proses masuk yang melarang penggunaan pengelola kata sandi atau salin dan tempel. Kriteria ini memungkinkan metode otentikasi alternatif, selama mereka tidak bergantung pada tes fungsi kognitif seperti mengingat kata sandi atau memecahkan teka-teki.
Memahami Otentikasi yang Dapat Diakses
3.3.9 Entri yang Berlebihan (A)
Kriteria ini menyatakan bahwa informasi apa pun yang sebelumnya dimasukkan oleh pengguna selama proses yang sama akan diisi secara otomatis atau tersedia bagi pengguna untuk dipilih daripada harus memasukkan kembali informasi secara manual. Jelas, ini harus menjadi kenyamanan yang diharapkan bagi siapa pun.
Memahami Entri yang Berlebihan
Referensi
- Apa yang Baru di Draf WCAG 2.2
- Repositori WCAG W3C di Github