Google Developers Indonesia Blog: Aksesibilitas dalam Web Stories

Aksesibilitas dalam Web Stories

28 July 2020

Web Stories adalah media baru yang menarik untuk bercerita di web. Kami percaya bahwa sangatlah penting bagi setiap orang untuk dapat menikmati Stories. Karena dibangun di atas AMP dan teknologi web inti, Web Stories sudah dilengkapi dengan dukungan berkualitas tinggi untuk banyak fitur aksesibilitas yang berguna. Tujuan kami adalah memastikan Web Stories bisa diakses secara default, dan kami menyadari bahwa kami memiliki banyak hal yang harus dilakukan untuk mencapai tujuan ini. Ini adalah prioritas utama bagi kami, dan dalam entri blog ini, kami akan membahas pendekatan kami dan memberikan panduan membuat Web Stories yang lebih mudah diakses.

Bekerja menuju aksesibilitas secara default

Sangatlah penting bagi kami untuk menetapkan standar aksesibilitas yang jelas dan konsisten untuk media baru ini, mirip dengan (atau bahkan melampaui) standar rata-rata untuk artikel dan video. Sebagai titik awal, format Web Story menstandardisasi model interaksi pengguna inti dan memastikan bahwa tindakan pengguna utama seperti navigasi dari halaman ke halaman, berbagi cerita, dan menggeser ke lampiran halaman bisa mendukung kemampuan aksesibilitas penting secara default. Kami secara proaktif bekerja sama dengan para pakar industri untuk mengidentifikasi cara kami bisa meningkatkan aksesibilitas Web Story dan membutuhkan masukan serta umpan balik Anda. Jika Anda menemukan masalah aksesibilitas (atau memiliki saran perbaikan) silakan laporkan masalah di repositori Github kami. Kami sangat menghargai bantuan Anda!

Namun, seperti halnya dengan semua halaman web, penayang dan kreator harus mengikuti praktik terbaik untuk memastikan bahwa Web Stories mereka mencapai hasil aksesibilitas terbaik.

Memulai dengan praktik terbaik web

Prinsip inti untuk memastikan Web Story Anda bisa diakses adalah sama untuk semua konten web / AMP. Ingatlah prinsip aksesibilitas utama dan evaluasi cerita Anda berdasarkan praktik terbaik. Secara khusus, mengingat sifat Web Stories yang kaya secara visual, penting untuk memastikan hal-hal berikut diimplementasikan dengan benar:

Teks alt untuk gambar

Ini mungkin praktik terbaik yang paling familier untuk aksesibilitas di web, dan ini juga berlaku untuk Stories di web. Pastikan semua gambar dalam Story Anda memberikan deskripsi teks alt yang jelas bagi orang-orang yang tidak dapat secara visual melihat semua aspek gambar. Berikut adalah contoh teks alt untuk gambar:

<amp-img
alt="Stack of blueberry pancakes with powdered sugar"
src="/images/pancakes.jpg"
layout="fill"
>
</amp-img>

Salah satu pola umum dalam Stories adalah menggunakan gambar yang menyertakan teks sebagai bagian dari gambar. Ini sebaiknya dihindari untuk mendapatkan hasil aksesibilitas yang ideal, tetapi bila Anda tidak bisa menghindarinya, pastikan menyediakan teks “burned in” ini sebagai teks alt.

Label aria untuk video

Video dalam Stories mengambil peran yang sangat mirip dengan gambar di kebanyakan dokumen web. Itulah mengapa sering kali kita perlu memberikan `label aria` yang fungsinya mirip dengan teks alt pada video.

Teks / subtitel untuk video

Berikan subtitel dan / atau teks untuk video dalam Stories Anda. Pengguna sering kali perlu melihat Stories tanpa audio. Teks yang menyatu dengan video tidak bisa dideteksi pembaca layar serta teknologi bantuan lainnya dan sebaiknya diganti dengan elemen yang sesuai.

Kontras

Stories menggunakan banyak media dan pola desain umumnya adalah dengan menyusun teks di atas gambar atau video. Saat melakukan hal ini, Anda harus memastikan bahwa teks memiliki kontras yang cukup terhadap latar belakang. Teknik yang biasa digunakan adalah dengan menggunakan warna latar belakang dalam kolom teks yang kontras secara efektif terhadap warna teks.

Navigasi keyboard

Setiap halaman dalam Web Story harus menetapkan alur informasi yang jelas baik ketika pengguna berinteraksi secara visual maupun melalui teknologi bantu (seperti navigasi keyboard). Pastikan markup Web Story disusun untuk mencerminkan urutan interaksi yang dimaksud. Ini bisa dilakukan secara natural dalam struktur DOM, tetapi ketika ini tidak mudah dilakukan, urutan fokus masih dapat ditentukan untuk mengikuti urutan yang relevan dengan atribut `tabindex`.

Audit aksesibilitas

Meskipun mengikuti praktik terbaik yang dijelaskan di sini adalah langkah pertama yang baik untuk mencapai aksesibilitas yang baik bagi Stories, mereka tidak bisa menjamin hasil yang sempurna. Sama seperti kemunculan web lainnya, kami sarankan untuk melakukan audit aksesibilitas dan mendapatkan dukungan profesional dari spesialis aksesibilitas untuk mendapatkan hasil terbaik.

Ringkasan

Web Stories dirancang untuk aksesibilitas, dan menggabungkan kemampuan utama dalam pengalaman pengguna secara keseluruhan, tetapi bergantung pada penulis Story untuk mengikuti praktik terbaik konten seperti menandai elemen media dengan judul dan teks aksesibilitas serta memperhatikan kontras untuk teks penting.