SVG yang Dapat Diakses: Pola Sempurna Untuk Pengguna Pembaca Layar

Sementara Scalable Vector Graphics (SVGs) pertama kali diperkenalkan pada akhir 90-an, mereka telah melihat kebangkitan besar-besaran dalam popularitas dalam dekade terakhir karena fleksibilitas ekstrim mereka, kesetiaan yang tinggi, dan relatif ringan di dunia di mana bandwidth dan kinerja penting lebih dari sebelumnya. . Kemajuan dalam JavaScript dan pengenalan kueri media CSS seperti @prefers-color-scheme dan @prefers-reduced-motion telah memperluas fungsionalitas SVG jauh melampaui kasus penggunaan awal mereka hanya dengan menampilkan gambar vektor di situs web.

Seiring kemajuan teknologi SVG, pemahaman kita tentang bagaimana kita merancang dan mengembangkan SVG juga perlu berkembang. Bagian dari kemajuan itu termasuk mempertimbangkan dampak dari desain dan kode tersebut pada manusia yang sebenarnya, alias pengguna akhir kami.

Artikel ini menguraikan dua belas pola SVG berbeda yang ditemukan "di alam liar" dan setiap deskripsi alternatif diumumkan saat diakses oleh berbagai kombinasi sistem operasi, browser, dan pembaca layar.

Tentu saja, contoh berikut tidak dimaksudkan untuk menjadi daftar lengkap dari semua kemungkinan pola yang digunakan dalam lingkup digital, tetapi contoh tersebut menyoroti beberapa pola SVG yang lebih populer atau ada di mana -mana yang mungkin Anda temui. Lanjutkan membaca untuk menemukan pola SVG mana yang harus Anda hindari dan pola mana yang paling inklusif!

Deskripsi Alternatif Dasar Menggunakan Tag <img>

Kelompok pertama dari empat pola menggunakan <img> yang menautkan ke file SVG. Ini adalah pilihan yang baik untuk gambar dasar dan tidak rumit di situs web, aplikasi, atau produk digital Anda lainnya. Meskipun kelemahan menggunakan pola ini adalah Anda tidak dapat dengan mudah mengontrol banyak elemen visual atau animasi sebagai SVG sebaris, pola ini seharusnya membuat gambar lebih ringan dan lebih cepat secara keseluruhan dan memungkinkan perawatan yang lebih mudah pada SVG yang Anda gunakan di banyak lokasi.

Pola #1: <img> + alt="[words]"

 <img class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Pola #2: <img> + role="img" + alt="[words]"

 <img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Pola #3: <img> + role="img" + aria-label="[words]"

 <img role="img" class="fox" aria-label="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Pola #4: <img> + role="img" + aria-labelledby="[ID]"

 <p class="visually-hidden">What does the fox say?</p> <img role="img" aria-labelledby="caption1" class="fox" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Deskripsi Alternatif Dasar Menggunakan Tag <svg>

Kelompok kedua dari empat pola menggunakan tag <svg> dengan file SVG sebaris. Meskipun menambahkan kode SVG langsung ke dalam markup berpotensi membuat halaman sedikit lebih lambat untuk dimuat, inefisiensi kecil itu akan diimbangi dengan memiliki kontrol lebih besar atas elemen visual atau animasi gambar Anda. Dengan menambahkan SVG Anda ke HTML secara langsung, Anda juga memiliki lebih banyak opsi dalam hal memberikan informasi gambar kepada pengguna pembaca layar Anda.

Pola #5: <svg> + role="img" + <title>

 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

Pola #6: <svg> + role="img" + <text>

 <svg role="img" ...> <text class="visually-hidden" font-size="0">What does the fox say?</text> [design code] </svg>

Pola #7: <svg> + role="img" + <title> + aria-describedby="[ID]"

 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

Pola #8: <svg> + role="img" + <title> + aria-labelledby="[ID]"

 <svg role="img" aria-labelledby="fox8" ...> <title>What does the fox say?</title> [design code] </svg>

Deskripsi Alternatif yang Diperluas Menggunakan Tag <svg>

Kelompok terakhir dari empat pola menggunakan tag <svg> dengan file SVG sebaris, seperti kelompok kedua. Namun, dalam kasus ini, kami memperluas deskripsi alternatif sederhana dengan informasi tambahan karena kerumitan gambar.

Ini akan menjadi pilihan pola yang baik untuk gambar yang lebih rumit yang membutuhkan lebih banyak penjelasan. Namun, penting untuk diingat bahwa ada beberapa penyandang disabilitas — seperti gangguan kognitif — yang mungkin mendapat manfaat dari ketersediaan informasi gambar tambahan ini di layar alih-alih terkubur dalam kode SVG.

Bergantung pada jenis dan jumlah informasi yang perlu Anda tambahkan ke SVG Anda, Anda mungkin mempertimbangkan untuk mengambil pendekatan yang berbeda sama sekali.

Pola #9: <svg> + role="img" + <title> + <text>

 <svg role="img" ...> <title>What does the fox say?</title> <text class="visually-hidden" font-size="0">Will we ever know?</text> [design code] </svg>

Pola #10: <svg> + role="img" + <title> + <desc>

 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

Pola #11: <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

 <svg role="img" aria-labelledby="fox11 description11" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

Pola #12: <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> 

Pemenang dan Pecundang Pola SVG

Dengan menjalankan berbagai pembaca layar pada kombinasi sistem operasi dan browser yang berbeda, kami melihat pola tertentu yang muncul di tabel hasil akhir. Ada beberapa pemenang dan pecundang pola SVG yang jelas , ditambah beberapa pola di tengah yang dapat Anda terapkan selama Anda menyadarinya, dan dapat menerima batasannya. Melihat tabel hasil, kita dapat menyimpulkan sebagai berikut:

Deskripsi Alternatif Dasar Menggunakan Tag <img> (Grup 1)

Pertunjukan Terbaik

• Pola 2 : <img> + role="img" + alt="[words]"
• Pola 3 : <img> + role="img" + aria-label="[words]"

Gunakan dengan hati-hati

• Pola 4 : <img> + role="img" + aria-labelledby="[ID]"

Tidak direkomendasikan

• Pola 1 : <img> + alt="[words]"

Deskripsi Alternatif Dasar Menggunakan Tag <svg> (Grup 2)

Pertunjukan Terbaik

• Pola 5 : <svg> + role="img" + <title>
• Pola 8 : <svg> + role="img" + <title> + aria-labelledby="[ID]"

Gunakan dengan hati-hati

• Pola 7 : <svg> + role="img" + <title> + aria-describedby="[ID]"

Tidak direkomendasikan

• Pola 6 : <svg> + role="img" + <text>

Deskripsi Alternatif yang Diperluas Menggunakan Tag <svg> (Grup 3)

Pertunjukan Terbaik

• Pola 11 : <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

Catatan : Meskipun pola ini tidak sempurna karena mengulangi deskripsi alternatif, pola ini tidak mengabaikan salah satu elemen dalam pengujian, tidak seperti pola "gunakan hati-hati".

Gunakan dengan hati-hati

• Pola 9 : <svg> + role="img" + <title> + <text>
• Pola 10 : <svg> + role="img" + <title> + <desc>
• Pola 12 : <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

Tidak direkomendasikan

• Tak satu pun dari pola dalam kelompok ini yang benar-benar gagal dalam tes.

Hasil Pengujian

Membungkus

Penting untuk dicatat bahwa bagian dari menafsirkan hasil tes pola SVG adalah memahami bahwa pembuat setiap pembaca layar memiliki browser yang direkomendasikan yang mereka dukung sepenuhnya. Ini tidak berarti Anda tidak boleh atau tidak dapat menggunakan pembaca layar di browser lain, ini hanya berarti bahwa jika Anda melakukannya, hasilnya mungkin tidak seakurat jika Anda menggunakan yang direkomendasikan.

Pengujian pola untuk artikel ini memang menyertakan beberapa kombinasi browser dan pembaca layar yang mungkin termasuk dalam kategori "pinggiran", tetapi ada juga catatan tentang kombinasi sistem operasi, browser, dan pembaca layar mana yang direkomendasikan untuk pengujian Anda sendiri. Hasil tes ini akan membantu Anda membuat keputusan pola SVG terbaik, berdasarkan kebutuhan dan batasan pola Anda.

Sebuah pengingat bahwa sebelum Anda menentukan pola, pastikan Anda mengetahui dasar-dasar bagaimana dan kapan membuat gambar yang dapat diakses dan bahwa Anda sepenuhnya memahami informasi alternatif yang diperlukan yang diperlukan untuk jenis gambar yang berbeda.

Jika Anda memerlukan bantuan tambahan untuk memutuskan pola mana yang akan digunakan untuk lingkungan Anda, lihat artikel Baik, Lebih Baik, Terbaik: Mengurai Dunia Kompleks Pola yang Dapat Diakses untuk membantu Anda menavigasi perairan rumit dari pola yang dapat diakses. Berbekal semua informasi ini dan hanya sedikit usaha, SVG Anda sedang dalam perjalanan untuk menjadi lebih inklusif bagi semua.

Catatan editor : Anda dapat mempelajari praktik terbaik tentang aksesibilitas dengan Carie dalam lokakarya online mendatang tentang Pola Ujung Depan yang Dapat Diakses — dengan pedoman, alat pengujian, teknologi bantu, dan pola desain inklusif. Online, dan langsung.