Mengurangi gerakan dengan elemen gambar

Mengurangi gerakan dengan elemen gambar

Saya baru saja berbicara dengan Dave tentang aksesibilitas gambar bergerak di web, dan dia berkata:

hm ... Saya ingin tahu apakah Anda dapat menggunakan gambar + lebih suka gerak dikurangi?

Dia kemudian mengirimkan kode berikut:

   <pre><picture> <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source> <img srcset="animated.gif alt="brick wall"/> </picture></pre>

Saya menyalin kode, menjatuhkannya ke posting saya, membuat gambar statis dari GIF animasi, dan menyalakan preferensi "kurangi gerak" (System Preferences> Aksesibilitas> Tampilan). Dan kemudian BOOM. Baru saja bekerja. Dalam waktu nyata!

Saya pikir ini sangat keren. Saya selalu mengaitkan prefers-reduced-motion dengan CSS, tetapi tentu saja elemen gambar menerima permintaan media!

Di mana lagi ini bisa berguna? Teknik ini pasti akan sangat membantu untuk posting dengan animasi GIF tertanam di dalamnya. Penulis harus mengambil kerangka statis GIF sebagai fallback, jadi ada sedikit pekerjaan tambahan yang terlibat, tetapi eksekusi teknisnya sangat mudah.

Jika Anda tertarik untuk belajar lebih banyak tentang gerakan dan aksesibilitas, saya senang mendengar Val memberikan ceramah yang hebat tentang hal itu, dan dia sudah menulisnya sejak lama sekarang.

Share this post