SVG yang Dapat Diakses: Inklusivitas Melampaui Pola

Scalable Vector Graphics (SVGs) menjadi standar terbuka W3C pada tahun 1999 — kembali ketika teknologi baru yang hot adalah telepon Blackberry, Napster pertama kali menyerbu asrama perguruan tinggi, dan bug Y2K memicu ketakutan dalam diri kita semua. Maju cepat ke dunia digital modern kita dan Anda akan melihat bahwa sementara tren teknologi lainnya telah berkurang, SVG masih ada dan berkembang.

Ini sebagian karena SVG memiliki jejak kecil untuk fidelitas visual yang begitu tinggi, di dunia di mana bandwidth dan kinerja lebih penting dari sebelumnya — terutama pada perangkat seluler dan situasi/lokasi di mana data sangat mahal. Tetapi juga karena SVG sangat fleksibel dengan gaya terintegrasi, interaktivitas, dan opsi animasinya. Apa yang dapat kita lakukan dengan SVG hari ini jauh melampaui bentuk dasar sebelumnya.

Jika kita fokus pada aspek aksesibilitas SVG, kita juga telah melangkah jauh. Saat ini, kami memiliki banyak pola dan teknik yang kuat untuk membantu kami mengoptimalkan inklusivitas. Ini benar terlepas dari apakah Anda membuat ikon, gambar sederhana, atau gambar yang lebih kompleks.

Sementara pola spesifik yang Anda putuskan untuk digunakan mungkin berbeda tergantung pada situasi khusus Anda dan tingkat kesesuaian WCAG yang ditargetkan — kenyataannya, kebanyakan orang berhenti di situ, berfokus pada kepatuhan kode dan bukan pengguna akhir aktual dan kebutuhan mereka. Jika inklusivitas sejati berada di luar pola — faktor apa lagi yang harus kita pertimbangkan saat merancang dan mengembangkan SVG yang dapat diakses?

Warna dan Kontras SVG

Fokus utama SVG yang dapat diakses adalah kepatuhan pembaca layar — yang hanya merupakan bagian dari masalah dan bagian dari solusi. Secara global, orang dengan gangguan penglihatan dan buta warna melebihi jumlah orang yang buta 14:1. Kami berbicara tentang total 546 juta yang mengejutkan (246 juta pengguna dengan penglihatan rendah ditambah 300 juta pengguna buta warna) vs 39 juta pengguna yang buta secara hukum. Banyak orang dengan gangguan penglihatan dan buta warna tidak bergantung pada pembaca layar, tetapi mungkin menggunakan alat seperti pengubahan ukuran browser, lembar gaya yang disesuaikan, atau perangkat lunak pembesaran untuk membantu mereka melihat apa yang ada di layar. Bagi 546 juta orang ini, keluaran pembaca layar mungkin tidak sepenting memastikan warna dan kontras cukup bagus sehingga mereka dapat melihat SVG di layar — tetapi bagaimana cara kita memeriksanya?

Alat Dan Cek

Langkah pertama yang harus Anda ambil saat mendesain palet warna SVG Anda adalah meninjau panduan rasio kontras warna WCAG. Sementara SVG dan ikon lainnya dikecualikan dari persyaratan rasio kontras warna belum lama ini (saat menargetkan kepatuhan AA WCAG), pembaruan terbaru pada pedoman WCAG 2.1 telah membuatnya sehingga semua citra non-teks penting harus mematuhi rasio kontras di minimal 3:1 terhadap warna yang berdekatan. Pada dasarnya, itu berarti jika SVG Anda menghilang, apakah itu akan mengubah informasi atau fungsionalitas konten secara mendasar? Jika Anda dapat menjawab “tidak”, kemungkinan besar Anda akan dikecualikan dari pedoman ini. Jika Anda dapat menjawab "ya" atau "mungkin", maka Anda perlu memastikan rasio kontras warna SVG Anda terkendali.

Salah satu contoh gambar non-teks yang penting adalah ikon SVG yang digunakan sebagai tombol atau tautan CTA — seperti yang kita lihat di tombol beranda ini. Dalam SVG ini, kita melihat gambar garis sebuah rumah tanpa teks visual. Ketika kita melihat ke dalam kode, kita melihat teks "Home" dalam rentang dengan kelas yang disebut "sr-only" (hanya pembaca layar) di atasnya. Kelas ini, bersama dengan CSS terkait, menyembunyikan teks rentang dari pengguna yang dapat melihat, tetapi tidak dari pengguna AT (ini hanyalah salah satu contoh pola gambar/grafik yang dapat diakses) .

Ini adalah langkah pertama yang baik, tetapi memilih pola SVG yang benar adalah salah satu bagian dari teka-teki — bagian lain adalah kontras warna antara ikon dan latar belakangnya. Kembali ke contoh, sekilas sepertinya kedua SVG dapat diakses. Namun, saat menggunakan alat kontras warna dan menguji ikon rumah dengan latar belakangnya, kami melihat SVG pertama gagal memenuhi rasio kontras warna 2:1 antara goresan ( #8f8f8f ) dan latar belakang ( #cccccc ), sedangkan SVG kedua berlalu dengan rasio kontras warna 3:1 antara goresan ( #717171 ) dan latar belakang ( #cccccc ). Dengan menggunakan pola yang dapat diakses yang sama, tetapi mengambil langkah ekstra dan mengubah warna goresan menjadi sesuatu yang sedikit lebih gelap, kami membuat SVG kami lebih inklusif untuk rentang kemampuan yang lebih luas.

Untuk memeriksa rasio kontras warna yang dapat diakses, ada banyak alat yang tersedia untuk digunakan. Untuk pemeriksaan titik kontras warna yang cepat, Anda dapat menggunakan Pemeriksa Kontras di Chrome DevTools. Untuk memeriksa kontras warna pada desain tanpa kode, periksa alat Penganalisis Kontras Warna. Dan untuk tinjauan palet warna penuh, Palet Warna A11y adalah cara yang bagus untuk membantu Anda melihat kombinasi warna mana yang paling mudah diakses. Tentu saja, pastikan Anda mencoba beberapa alat dan memilih apa pun yang paling cocok untuk Anda dan tim Anda — alat terbaik adalah yang benar-benar Anda gunakan.

Mode Terang/Gelap

Selain memeriksa rasio kontras warna, Anda juga harus mempertimbangkan kueri media yang semakin populer dan didukung yang disebut @prefers-color-scheme yang memungkinkan pengguna memilih versi situs web atau aplikasi bertema terang atau gelap yang mereka kunjungi. Meskipun kueri media ini tidak menggantikan pemeriksaan rasio kontras warna, kueri media ini dapat memberikan lebih banyak pilihan kepada pengguna terkait pengalaman keseluruhan situs web atau aplikasi Anda.

Mengizinkan pengguna Anda untuk memilih pengalaman mereka selalu lebih baik daripada berasumsi bahwa Anda tahu apa yang mereka inginkan.

“

Seperti kueri media lainnya, untuk melihat perubahan tema terang/gelap, pengembang situs web atau aplikasi harus menambahkan kode tambahan yang menargetkan kueri. Kembali ke contoh ikon rumah sebelumnya, Anda dapat melihat dalam kode berikut bahwa warna goresan, isian, dan latar belakang SVG dikendalikan oleh CSS. Karena elemen gaya ini dikontrol secara eksternal dan tidak dikodekan secara keras dalam markup SVG, kita dapat menambahkan beberapa baris CSS tambahan untuk membuat SVG berfungsi dalam tema gelap.

Mode cahaya/default:

 body { background: #cccccc; } .nav-home1 { stroke: #8f8f8f; } .nav-home2 { stroke: #717171; } #home-svg1, #home-svg2 { fill: #64b700; } #home-door-svg1, #home-door-svg2 { fill: #b426ff; }

Mode gelap:

 @media (prefers-color-scheme: dark) { body { background: #333333; } .nav-home1 { stroke: #606060; } .nav-home2 { stroke: #7C7C7C; } }

Seperti yang ditunjukkan contoh ini, menyiapkan desain Anda untuk menggunakan CSS untuk mengontrol elemen gaya berarti membuat versi tema gelap SVG Anda bisa relatif sederhana. Sebaliknya, jika Anda memiliki gaya hard-code ke dalam markup SVG, Anda mungkin perlu membayangkan ulang SVG Anda dengan cara yang memungkinkan CSS memiliki kontrol lebih besar atas desain. Atau Anda mungkin ingin mempertimbangkan untuk membuat versi gelap SVG yang benar-benar baru dan menukar versi terang saat preferensi tema berubah. Ingat saja, jika Anda berencana untuk menampilkan/menyembunyikan gambar yang berbeda berdasarkan mode pengguna, Anda juga perlu menyembunyikan SVG yang tidak terlihat dari pengguna AT!

Catatan: dalam contoh khusus ini, tema default sudah terang sehingga masuk akal juga untuk menjadikannya sebagai pengalaman default dan membangun tema gelap untuk pengalaman alternatif. Jika tidak, jika kita memulai dengan tema gelap, kita bisa melakukan kebalikannya dengan menjadikan tema gelap sebagai pengalaman default dan menggunakan @media (prefers-color-scheme: light) untuk membuat tema terang.

Dalam contoh berikutnya, kita melihat SVG yang lebih kompleks dengan versi mode terang dan gelap melalui kueri media @prefers-color-scheme . Teman kita Karma Chameleon (dalam bentuk SVG) memiliki tema gelap dan tema terang/default. Dengan mengubah pengaturan preferensi terang/gelap Anda (pengaturan mode gelap Mac OS + Win OS) dan menavigasi ke browser yang mendukung kueri media @prefers-color-scheme , Anda dapat melihat perubahan lingkungan. Dalam mode cahaya/default, Karma Chameleon sedang duduk di cabang di hutan hijau yang dikelilingi oleh kupu-kupu merah yang beterbangan. Dalam mode gelap, dia duduk di cabang di luar angkasa dengan roket biru meluncur melewatinya. Di kedua lingkungan, warnanya secara otomatis berubah dan matanya bergerak.

Aksesibilitas Warna Dan Kontras

Meskipun contoh di atas adalah cara yang menyenangkan untuk menunjukkan apa yang dapat Anda lakukan dengan warna dan kontras dan kueri media @prefers-color-scheme , ada beberapa alasan dunia nyata yang sangat bagus untuk mempertimbangkan untuk menambahkan tema gelap termasuk:

• Tema gelap sangat membantu orang dengan fotofobia, atau sensitivitas cahaya. Orang dengan fotofobia dapat memicu sakit kepala dan migrain ketika mereka melihat situs web atau aplikasi yang terlalu terang.
• Beberapa orang menemukan teks di situs web atau aplikasi lebih mudah dibaca dalam mode gelap sementara yang lain mungkin menemukan tema yang lebih terang lebih mudah dibaca — pada dasarnya memberikan pilihan kepada pengguna Anda dan memungkinkan mereka untuk mengatur preferensi mereka.
• Tidak seperti beberapa pertanyaan media berbasis warna atau kontras lainnya seperti @inverted-colors (saat ini hanya didukung oleh Safari) dan @forced-colors (dikembangkan oleh insinyur Edge/IE dengan dukungan Chromium segera hadir), dukungan browser cukup universal untuk @prefers-color-scheme — jadi kueri media ini berguna di luar kotak hari ini dan harus bertahan untuk sementara waktu. Ditambah dengan perubahan terbaru pada MS Edge menggunakan Chromium di bawah tenda, bahkan ada lebih banyak dukungan untuk kueri media ini di masa mendatang (RIP -ms-high-contrast-mode ).

Animasi SVG

Dalam hubungannya dengan warna dan kontras, bagaimana SVG Anda bergerak di layar adalah aspek lain yang perlu dipertimbangkan saat merancang dan mengembangkan dengan mempertimbangkan inklusivitas. Pedoman gerakan WCAG jelas: informasi bergerak, berkedip, atau menggulir yang tidak penting yang dimulai secara otomatis, berlangsung lebih dari lima detik, dan merupakan bagian dari elemen halaman lain harus memungkinkan pengguna untuk menjeda, menghentikan, atau menyembunyikannya. Tetapi mengapa kita membutuhkan aturan ini?

Bagi sebagian pengguna, memindahkan, berkedip, atau menggulir konten bisa sangat mengganggu. Orang dengan ADHD dan gangguan defisit perhatian lainnya mungkin sangat terganggu oleh SVG animasi Anda sehingga mereka lupa mengapa mereka pergi ke situs web/aplikasi Anda sejak awal. Sedangkan bagi orang lain, gerak dapat memicu reaksi fisik. Misalnya, orang dengan masalah vestibular bisa menjadi mual dan pusing saat melihat gerakan. Sementara yang lain dapat dipicu untuk mengalami kejang saat melihat konten yang berkedip atau cerah — situasi yang jelas ingin Anda hindari.

Meskipun kita semua suka "senang" dengan fitur situs web dan aplikasi yang menarik — kita perlu mencapai keseimbangan antara menjadi kreatif versus mengganggu (atau merugikan) pengguna kita selama interaksi mereka dengan konten yang bergerak.

“

Berhenti Manual/Otomatis

Karena animasi SVG, seperti konten bergerak lainnya, tidak boleh diputar otomatis selama lebih dari lima detik, Anda harus membuat cara bagi pengguna untuk menjeda atau menghentikan animasi. Salah satu cara untuk melakukannya adalah dengan membuat tombol sakelar JS untuk memutar/menjeda animasi.

Jika SVG Anda besar atau merupakan fitur utama situs web Anda (misalnya animasi yang muncul dan keluar saat Anda menggulir halaman ke bawah), tombol jeda/putar di bagian atas layar mungkin merupakan opsi realistis untuk mengontrol seluruh pengalaman halaman. Jika SVG Anda berukuran lebih kecil atau terkait dengan input pengguna (misalnya animasi terjadi saat pengguna mengirimkan formulir), tombol jeda/putar mungkin tidak realistis untuk setiap gambar, jadi opsi alternatifnya adalah mengkodekan animasi untuk berhenti pada lima detik vs. memainkannya dalam putaran tak terbatas. ### Gerakan Berkurang

Selain menggunakan opsi jeda/putar atau membuat loop animasi terbatas, Anda juga dapat mempertimbangkan untuk menambahkan kueri media @prefers-reduced-motion untuk menangani animasi di SVG Anda. Mirip dengan contoh tema terang/gelap, kueri media @prefers-reduced-motion memeriksa pengaturan pengguna untuk pembatasan gerakan dan kemudian mengimplementasikan pengalaman visual berdasarkan preferensi mereka. Dalam kasus @prefers-reduced-motion , pengguna dapat memilih untuk meminimalkan jumlah animasi atau gerakan yang mereka lihat.

Dalam contoh berikut, SVG animasi “menulis” sebuah kata saat halaman dimuat — ini adalah animasi defaultnya. Dalam versi gerakan yang diperkecil, SVG tidak bergerak dan kata dimuat tanpa animasi. Bergantung pada kerumitan animasi SVG Anda dan bagaimana Anda menginginkan tampilan pengalaman gerakan yang dikurangi, jumlah kode tambahan yang terlibat dapat bervariasi.

Gerakan bawaan:

 .svg-color { stroke: #ff4b00; } #a11y-svg { stroke-linecap: round; padding: 0.25rem; stroke-dasharray: 1000; stroke-dashoffset: 0; -webkit-animation: dash 5s linear forwards; animation: dash 5s linear forwards; overflow: visible; font-size: 100px; height: 0; margin: 10rem 0 5rem; position: relative; } #a11y-svg-design { cursor: pointer; stroke-width: 2px; } @-webkit-keyframes dash { from { stroke-dashoffset: 1000; fill: transparent; } to { stroke-dashoffset: 0; fill: #ff4b00; } }

Gerakan berkurang:

 @media (prefers-reduced-motion: reduce) { #a11y-svg { animation: none; fill: #ff4b00; } }

Perlu diingat, menerapkan @prefers @prefers-reduced-motion code adalah salah satu langkah untuk membuat SVG Anda lebih mudah diakses, tetapi Anda juga perlu mempertimbangkan cara mengurangi gerakan. Misalnya, katakanlah Anda membuat versi animasi SVG yang diperlambat menggunakan @prefers-reduced-motion . Namun, versi yang lebih lambat berada pada loop tak terbatas sehingga animasi berlangsung lebih dari lima detik, yang melanggar satu bagian dari aturan WCAG tentang gerakan. Jika Anda malah membuat versi gerakan yang diperkecil dari SVG animasi Anda yang menghentikan animasi dalam lima detik, maka itu akan melewati bagian aturan itu. Perubahan kode halus ini sama dengan dua pengalaman pengguna yang sama sekali berbeda.

Pada contoh berikutnya, Karma Chameleon kembali dengan kueri media @prefers-reduced-motion dan kode terkait. Dengan mengubah pengaturan gerakan Anda (pengaturan Mac, Win, Android, dan iOS) dan menggunakan browser yang mendukung kueri media @prefers-reduced-motion , Anda dapat melihat perubahan animasi. Dalam mode cahaya dengan gerakan berkurang, Bunglon Karma di hutan dengan kupu-kupu merah stasioner. Dalam mode gelap dengan gerakan yang dikurangi, dia berada di luar angkasa dengan roket biru stasioner di latar belakang. Di kedua lingkungan, warna dan matanya juga tidak bergerak, karena animasi SVG asli dihilangkan sepenuhnya.

Aksesibilitas Animasi

Dari sudut pandang aksesibilitas, ada beberapa alasan bagus untuk mempertimbangkan membatasi pergerakan di layar Anda atau menyediakan animasi alternatif di SVG Anda, termasuk:

• Kurang itu lebih! Menjaga animasi SVG Anda tetap sederhana untuk orang-orang dengan gangguan kognitif dan perhatian dapat membantu pengalaman pengguna Anda secara keseluruhan. Ini terutama berlaku untuk SVG yang penting untuk konten atau fungsionalitas situs web atau aplikasi Anda — seperti navigasi, tombol, tautan, atau animasi apa pun yang dipicu oleh input pengguna.
• Jangan buat orang sakit! Beberapa orang dengan kejang, gangguan vestibular, dan penglihatan dapat memicu reaksi fisik dengan gerakan di SVG Anda, jadi harap bertanggung jawab dengan desain dan kode Anda. Catatan: Anda harus memeriksa ulang setiap SVG animasi yang mungkin bermasalah di area berkedip/berkedip, dengan menggunakan Alat Analisis Epilepsi Fotosensitif (PEAT) gratis untuk memastikan Anda tidak memicu kejang dengan konten Anda.
• Sebagian besar browser utama sekarang mendukung @prefers-reduced-motion media query baik di desktop maupun perangkat seluler — artinya lebih banyak orang dapat membatasi paparan mereka terhadap gerakan yang tidak diinginkan di layar mereka. Berbeda dengan media query @prefers-color-scheme yang memiliki banyak pesaing, saat ini tidak ada media query pengurang gerakan lain yang tersedia.

Membungkus

Warna, kontras, dan animasi adalah inti dari setiap SVG. Studi melaporkan bahwa elemen visual ini memiliki makna intrinsik, berkontribusi pada pengenalan merek, dan terkait dengan nilai yang dirasakan perusahaan — menjadikan SVG area yang sangat luas di mana desainer dan pengembang dapat memiliki dampak langsung dan langsung pada pengguna kami.

Tetapi penting juga bahwa kita tidak hanya menganggap aksesibilitas SVG sebagai sesuatu untuk membantu "orang lain" — karena siapa yang tidak pernah berada dalam situasi di mana mereka harus melawan silau pada layar perangkat? Atau Anda mengalami migrain dan SVG terus mengambang di layar dan membuat Anda sakit alih-alih "senang". Atau mungkin Anda mengunjungi situs web dalam pengaturan cahaya rendah dan teksnya sulit dibaca karena skema warna abu-abu?

Dengan penggunaan alat aksesibilitas, pedoman WCAG, dan penambahan dan dukungan berkelanjutan dari kueri media CSS baru untuk memungkinkan lebih banyak pilihan, kami dapat memengaruhi semua orang dengan cara yang lebih bertanggung jawab dan inklusif.

Untuk inklusivitas digital sejati adalah memahami bahwa setiap orang dari kita dapat memperoleh manfaat dari desain dan kode yang lebih mudah diakses.

“