Atribut alt gambar latar belakang CSS

Ini yang belum pernah saya tangani sebelumnya. Saya perlu menggunakan tag alt pada semua gambar di situs termasuk yang digunakan oleh atribut gambar latar belakang CSS.

Sejauh yang saya tahu, tidak ada properti CSS seperti ini, jadi apa cara terbaik untuk melakukannya?

Gambar latar belakang pasti bisa menyajikan data! Faktanya, ini sering kali direkomendasikan saat menyajikan ikon visual lebih ringkas dan ramah pengguna daripada daftar uraian teks yang setara. Setiap penggunaan gambar sprite bisa mendapatkan keuntungan dari pendekatan ini.

Ikon listingan hotel biasanya menampilkan fasilitas. Bayangkan sebuah halaman yang mencantumkan 50 hotel dan setiap hotel memiliki 10 fasilitas. CSS Sprite akan sempurna untuk hal semacam ini - pengalaman pengguna yang lebih baik karena lebih cepat. Tapi bagaimana Anda menerapkan tag ALT untuk gambar-gambar ini? Contoh situs .

Jawabannya adalah mereka tidak menggunakan altteks sama sekali, melainkan menggunakan titleatribut pada div yang memuatnya.

HTML

<div class="hotwire-fitness" title="Fitness Centre"></div>

CSS

.hotwire-fitness {
    float: left;
    margin-right: 5px;
    background: url(/prostyle/images/new_amenities.png) -71px 0;
    width: 21px;
    height: 21px;
}

Menurut W3C (lihat tautan di atas), atribut judul memiliki tujuan yang hampir sama dengan atribut alt

Judul

Nilai atribut judul dapat dirender oleh agen pengguna dengan berbagai cara. Misalnya, peramban visual sering kali menampilkan judul sebagai "tip alat" (pesan singkat yang muncul saat alat penunjuk berhenti di atas suatu objek). Agen pengguna audio mungkin mengucapkan informasi judul dalam konteks yang serupa. Misalnya, menyetel atribut pada tautan memungkinkan agen pengguna (visual dan non-visual) memberi tahu pengguna tentang sifat sumber daya yang ditautkan:

alt

Atribut alt didefinisikan dalam satu set tag (yaitu, img, area dan secara opsional untuk input dan applet) untuk memungkinkan Anda menyediakan teks yang setara untuk objek tersebut.

Teks yang setara memberikan manfaat berikut untuk situs web Anda dan pengunjungnya dalam situasi umum berikut:

• saat ini, browser Web tersedia dalam berbagai macam platform dengan kapasitas yang sangat berbeda; beberapa tidak dapat menampilkan gambar sama sekali atau hanya serangkaian jenis gambar yang dibatasi; beberapa dapat dikonfigurasi untuk tidak memuat gambar. Jika kode Anda memiliki atribut alt yang disetel dalam gambarnya, sebagian besar browser ini akan menampilkan deskripsi yang Anda berikan, bukan gambarnya
• beberapa pengunjung Anda tidak dapat melihat gambar, baik itu buta, buta warna, rabun; atribut alt sangat membantu orang-orang yang dapat mengandalkannya untuk mengetahui dengan baik apa yang ada di halaman Anda
• bot mesin pencari termasuk dalam dua kategori di atas: jika Anda ingin situs web Anda diindeks sebaik mungkin, gunakan atribut alt untuk memastikan bahwa mereka tidak akan melewatkan bagian penting dari halaman Anda.

Dalam artikel Jaringan Pengembang Yahoo ( tautan yang diarsipkan ) ini disarankan bahwa jika Anda benar - benar harus menggunakan gambar latar belakang sebagai ganti elemen img dan atribut alt, gunakan atribut ARIA sebagai berikut:

<div role="img" aria-label="adorable puppy playing on the grass">
  ...
</div>

Kasus penggunaan dalam artikel menjelaskan bagaimana Flickr memilih untuk menggunakan gambar latar belakang karena kinerjanya sangat meningkat pada perangkat seluler.

Saya pikir Anda harus membaca posting ini oleh Christian Heilmann. Ia menjelaskan bahwa gambar latar HANYA untuk estetika dan tidak boleh digunakan untuk menyajikan data, dan oleh karena itu dikecualikan dari aturan bahwa setiap gambar harus memiliki teks alternatif.

Kutipan (penekanan saya):

Gambar latar belakang CSS yang menurut definisi hanya memiliki nilai estetika - bukan konten visual dokumen itu sendiri . Jika Anda perlu meletakkan gambar di halaman yang memiliki arti, gunakan elemen IMG dan berikan teks alternatif di atribut alt.

Aku setuju dengannya.

Seperti yang disebutkan dalam jawaban lain, tidak ada atribut alt (didukung) untuk tag div hanya untuk tag img.

Pertanyaan sebenarnya adalah mengapa Anda perlu menambahkan atribut alt ke semua gambar latar belakang untuk situs tersebut? Berdasarkan jawaban ini, ini akan membantu Anda menentukan rute mana yang harus diambil dalam pendekatan Anda.

Visual / Textual: Jika Anda hanya mencoba menambahkan textual fallback untuk pengguna jika gambar gagal dimuat, cukup gunakan atribut title [judul]. Sebagian besar browser akan memberikan tip alat visual (kotak pesan) saat pengguna mengarahkan kursor ke gambar, dan jika gambar tidak dimuat karena alasan apa pun, ia berperilaku sama seperti atribut alt yang menampilkan teks saat gambar gagal. Teknik ini masih memungkinkan situs untuk mempercepat waktu muat dengan mengatur gambar ke latar belakang.

Pembaca Layar: Opsi di tengah jalan, ini bervariasi karena secara teknis menyimpan gambar Anda sebagai latar belakang dan menggunakan pendekatan atribut judul harus berfungsi seperti yang diisyaratkan di atas, "Agen pengguna audio mungkin mengucapkan informasi judul dalam konteks yang serupa." Namun ini tidak dijamin akan berhasil di semua kasus, termasuk beberapa pembaca mungkin mengabaikan semuanya secara bersamaan. Jika Anda akhirnya memilih pendekatan ini, Anda juga dapat mencoba menambahkan label aria untuk membantu memastikan pembaca layar mengambilnya.

SEO / Mesin Pencari: Ini yang terbesar, jika Anda seperti saya, Anda menambahkan gambar latar belakang, semuanya bagus. Kemudian berbulan-bulan kemudian pelanggan (atau mungkin diri Anda sendiri) menyadari bahwa Anda kehilangan beberapa emas SEO utama dengan tidak memiliki alt untuk gambar Anda. Perlu diingat, atribut judul tidak memiliki bobot apa pun di mesin pencari , dari penelitian saya dan seperti yang disebutkan dalam artikel di sini: https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly /. Jadi jika Anda membidik SEO, maka Anda harus memiliki tag img dengan atribut alt. Salah satu pendekatan yang mungkin adalah memuat gambar aktual yang sangat kecil di situs dengan atribut alt, dengan cara ini Anda mendapatkan semua SEO dan tidak perlu menyesuaikan kembali CSS yang ada. Namun hal ini dapat menyebabkan waktu muat tambahan tergantung pada ukurannya dan google memang melihat jalur gambar saat mengindeks. Singkatnya jika Anda mengikuti rute ini, cukup terima apa yang harus dilakukan dan sertakan gambar sebenarnya daripada menggunakan latar belakang.

Keyakinan umum adalah bahwa Anda tidak boleh menggunakan gambar latar belakang untuk hal-hal dengan nilai semantik yang bermakna sehingga tidak ada cara yang tepat untuk menyimpan data alt dengan gambar tersebut. Pertanyaan pentingnya adalah apa yang akan Anda lakukan dengan data alt itu? Apakah Anda ingin menampilkannya jika gambar tidak dimuat? Apakah Anda memerlukannya untuk beberapa fungsi programatik di halaman? Anda dapat menyimpan data secara sewenang-wenang menggunakan properti css yang dibuat yang tidak memiliki arti (mungkin menyebabkan kesalahan?) ATAU dengan menambahkan gambar tersembunyi yang memiliki gambar dan tag alt, dan kemudian ketika Anda membutuhkan gambar latar belakang alt Anda dapat membandingkan gambar tersebut jalur lalu tangani datanya sesuai keinginan Anda menggunakan beberapa skrip khusus untuk mensimulasikan apa yang Anda butuhkan. Tidak ada cara yang saya tahu untuk membuat browser secara otomatis menangani semacam atribut alt untuk gambar latar belakang.

Cara klasik untuk mencapai ini adalah dengan meletakkan teks ke dalam div dan menggunakan teknik penggantian gambar.

<div class"ir background-image">Your alt text</div>

dengan gambar latar belakang menjadi kelas tempat Anda menetapkan gambar latar belakang dan ir bisa menjadi kelas pengganti gambar HTML5boilerplates, di bawah ini:

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

Artikel dari W3C ini memberi tahu Anda apa yang menurut mereka harus Anda lakukan https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage

dan memiliki contoh di sini http://mars.dequecloud.com/demo/ImgRole.htm

di antaranya

<a href="http://www.facebook.com">
 <span class="fb_logo" role="img" aria-label="Connect via Facebook">
 </span>
</a>

Namun, jika seperti pada contoh di atas, elemen yang berisi gambar latar belakang hanyalah sebuah wadah kosong, saya pribadi lebih suka meletakkan teks di sana dan menyembunyikannya menggunakan CSS; tepat di tempat Anda menampilkan gambar:

<a href="http://www.facebook.com"><span class="fb_logo">
  Connect via Facebook
</span></a>

.fb_logo {
  height: 37px; width: 37px;
  background-image: url('../gfx/logo-facebook.svg');
  color:transparent; overflow:hidden; /* hide the text */
}

Inilah solusi saya untuk jenis masalah ini:

Buat kelas baru dalam CSS dan posisi di luar layar. Kemudian letakkan teks alt Anda dalam HTML tepat sebelum properti yang memanggil gambar latar Anda. Dapat tag apapun, H1, H2, p, dll

CSS

<style type="text/css">
  .offleft {
    margin-left: -9000px;
    position: absolute;
  }
</style>

HTML

<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image>  </div>

Tidak jelas bagi saya apa yang Anda inginkan.

Jika Anda ingin properti CSS merender nilai atribut alt, mungkin Anda sedang mencari fungsi atribut CSS misalnya:

IMG:before { content: attr(alt) }

Jika Anda ingin meletakkan atribut alt pada gambar background, maka ... itu aneh karena atribut alt adalah atribut HTML sedangkan gambar latar belakang adalah properti CSS. Jika Anda ingin menggunakan atribut alt HTML maka saya pikir Anda memerlukan elemen HTML yang sesuai untuk memasukkannya.

Mengapa Anda "perlu menggunakan tag alt pada gambar latar belakang": apakah ini untuk alasan semantik atau untuk beberapa alasan efek visual (dan jika demikian, lalu apa efek atau alasan apa)?

Anda dapat melakukannya dengan meletakkan alttag di tempat divgambar Anda akan muncul.

Contoh:

<div id="yourImage" alt="nameOfImage"></div>