Tag img HTML: atribut judul vs. atribut alt?

Saya sedang menjelajahi Amazon dan saya perhatikan bahwa ketika mencari " 1TB " jika Anda mengarahkan kursor mouse ke gambar peringkat bintang, Anda hanya melihat skor jika menggunakan IE. Jika Anda menggunakan browser lain maka skor tidak akan ditampilkan.

Nilai 3,8 dan 4,2 sama-sama muncul sebagai 4 bintang. Tentu saja 3,8 bintang vs 4,2 bintang (skor 76% vs 84%) dapat membuat perbedaan!

Ini karena cara standar menampilkan altteks hanya saat pengguna mematikan grafik atau saat browser "dibaca" (mis. Browser untuk pengguna yang memiliki gangguan penglihatan). Namun IE, menampilkannya di hover.

Jadi saya pikir jika Amazon akan menampilkannya terlepas dari browser pengguna, maka titleharus digunakan sebagai tambahan alt. Apakah anda setuju

Saya akan memilih keduanya. Judul akan menampilkan keterangan alat yang bagus di semua browser dan alt akan memberikan deskripsi saat menjelajah di browser tanpa gambar.

Meskipun demikian, saya ingin melihat beberapa statistik tentang berapa banyak "peselancar" di luar sana yang pergi ke "toko" untuk melihat-lihat barang dagangan yang gambarnya dimatikan atau menggunakan browser yang tidak mendukung gambar. Saya pikir hari-hari di mana 90% populasi menggunakan modem 28k untuk terhubung ke InterWeb sudah terlalu lama berakhir.

Mereka digunakan untuk berbagai hal. The altatribut digunakan bukan gambar. Jika gambar tidak dapat ditampilkan, dan di pembaca layar.

The titleatribut ditampilkan bersama dengan gambar, biasanya sebagai tooltip melayang-layang.

Yang satu tidak boleh digunakan "sebagai pengganti" dari yang lain. Masing-masing harus digunakan dengan benar , untuk melakukan hal-hal yang dirancang untuk mereka lakukan.

alt dan judul untuk hal yang berbeda, seperti yang telah disebutkan. Meskipun atribut judul akan memberikan keterangan alat, alt juga merupakan atribut penting, karena menentukan teks yang akan ditampilkan jika gambar tidak dapat ditampilkan. (Dan di beberapa browser, seperti firefox, Anda juga akan melihat teks ini saat gambar dimuat)

Hal lain yang saya rasa harus dibuat adalah bahwa atribut alt diperlukan untuk memvalidasi sebagai dokumen XHTML, sedangkan atribut judul hanyalah "opsi tambahan", seolah-olah.

Itu karena keduanya memiliki tujuan yang berbeda dan keduanya harus digunakan tidak hanya satu di atas yang lain.

"Alt" adalah untuk apa yang sudah Anda katakan, jadi Anda dapat melihat tentang apa gambar itu jika gambar itu tidak dapat ditampilkan (untuk alasan apa pun), ini juga memungkinkan orang yang memiliki gangguan penglihatan untuk memahami tentang apa gambar itu.

Atribut "title" adalah yang benar untuk menampilkan tooltip dengan judul gambar.

Menurut saya sebaiknya teks alt selalu mendeskripsikan apa yang terlihat pada gambar, untuk kasus gambar tersebut tidak ditampilkan.

alt = text [CS] Untuk agen pengguna yang tidak dapat menampilkan gambar, formulir, atau applet, atribut ini menentukan teks alternatif. Bahasa teks alternatif ditentukan oleh atribut lang.

w3.org

Saya yakin alt diperlukan untuk kepatuhan XHTML yang ketat.

Seperti yang dicatat orang lain, judul adalah untuk tooltips (bagus untuk dimiliki), alt untuk aksesibilitas. Tidak ada salahnya menggunakan keduanya, tapi alt harus selalu ada.

Atribut ALT ditujukan untuk pengguna dengan gangguan penglihatan yang akan menggunakan pembaca layar. Jika ALT hilang dari tag gambar APA PUN, seluruh url untuk gambar tersebut akan dibaca. Jika gambar adalah bagian dari desain situs, gambar tersebut masih harus memiliki ALT tetapi dapat dikosongkan sehingga url tidak harus dibaca untuk setiap bagian situs.

Atribut ALT

The altatribut didefinisikan dalam satu set tag (yaitu, img, areadan opsional untuk inputdan applet) untuk memungkinkan Anda untuk memberikan setara teks untuk objek.

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 telusur 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 laman Anda.

Atribut Judul

Tujuan dari teknik ini adalah untuk memberikan bantuan peka konteks bagi pengguna saat mereka memasukkan data dalam formulir dengan memberikan informasi bantuan dalam titleatribut. Bantuan tersebut dapat mencakup informasi format atau contoh masukan.

Contoh 1: Menu pull-down yang membatasi cakupan
pencarian Formulir pencarian menggunakan menu pull-down untuk membatasi cakupan pencarian. Menu pull-down berada tepat di samping kolom teks yang digunakan untuk memasukkan istilah pencarian. Hubungan antara kolom pencarian dan menu pulldown terlihat jelas bagi pengguna yang dapat melihat desain visual, yang tidak memiliki ruang untuk label yang terlihat. The titleatribut digunakan untuk mengidentifikasi selectmenu. The titleatribut dapat diucapkan oleh pembaca layar atau ditampilkan sebagai tool tip untuk orang yang menggunakan bantu layar.

<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
    ...
</select> 

Contoh 2: Kolom input untuk nomor telepon
Halaman Web berisi kontrol untuk memasukkan nomor telepon di Amerika Serikat, dengan tiga kolom untuk kode area, pertukaran, dan empat digit terakhir.

<fieldset>
    <legend>Phone number</legend>
    <input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" >
    <input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" >
    <input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" >
</fieldset> 

Contoh 3: Fungsi Pencarian Halaman Web berisi kolom teks tempat pengguna dapat memasukkan istilah pencarian dan tombol berlabel "Search" untuk melakukan pencarian. The titleatribut digunakan untuk mengidentifikasi kontrol bentuk dan tombol diposisikan tepat setelah kolom teks sehingga jelas kepada pengguna bahwa bidang teks di mana istilah pencarian harus dimasukkan.

<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>

Contoh 4: Tabel data dari kontrol formulir
Tabel data dari kontrol formulir perlu mengaitkan setiap kontrol dengan judul kolom dan baris untuk sel itu. Tanpa judul (atau LABEL di luar layar), sulit bagi pengguna non-visual untuk menjeda dan menginterogasi nilai tajuk baris / kolom yang sesuai menggunakan teknologi bantuan mereka saat menelusuri formulir.

Misalnya, formulir survei memiliki empat judul kolom di baris pertama: Pertanyaan, Setuju, Tidak Diputuskan, Tidak Setuju. Setiap baris berikut berisi pertanyaan dan tombol radio di setiap sel yang sesuai dengan pilihan jawaban di tiga kolom. Atribut judul untuk setiap tombol radio adalah rangkaian pilihan jawaban (tajuk kolom) dan teks pertanyaan (tajuk baris) dengan tanda hubung atau titik dua sebagai pemisah.

Elemen Img

Atribut yang diizinkan disebutkan di MDN .

• alt
• crossorigin
• decoding
• height
• importance (api eksperimental)
• intrinsicsize (api eksperimental)
• ismap
• referrerpolicy (api eksperimental)
• src
• srcset
• width
• usemap

Seperti yang Anda lihat, titleatribut tidak diperbolehkan di dalam imgelemen. Saya akan menggunakan altatribut dan jika membutuhkan saya akan menggunakan CSS (Contoh: pseudo class :hover) daripada titleatribut.

Tidak, menurut saya altlebih baik karena tujuan atribut itu adalah untuk menyediakan teks "alternatif" jika gambar tidak dapat dilihat (apakah gambar hilang atau browser itu sendiri tidak dapat menampilkannya).

MVCFutures untuk ASP.NET MVC memutuskan untuk melakukan keduanya. Bahkan jika Anda memberikan 'alt' maka secara otomatis akan membuat 'title' dengan nilai yang sama untuk Anda.

Saya tidak memiliki kode sumber untuk ditangani tetapi pencarian cepat di Google menghasilkan kasus uji untuk itu!

    [TestMethod]
    public void ImageWithAltValueInObjectDictionaryRendersImageWithAltAndTitleTag() {
        HtmlHelper html = TestHelper.GetHtmlHelper(new ViewDataDictionary());
        string imageResult = html.Image("/system/web/mvc.jpg", new { alt = "this is an alt value" });
        Assert.AreEqual("<img alt=\"this is an alt value\" src=\"/system/web/mvc.jpg\" title=\"this is an alt value\" />", imageResult);
    }

Anda tidak boleh menggunakan atribut judul untuk elemen img. Alasan di balik ini cukup sederhana:

Mungkin informasi teks adalah informasi penting yang harus tersedia untuk semua pengguna secara default. Jika demikian, tunjukkan konten ini sebagai teks di sebelah gambar.

Sumber: http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/

HTML 5.1 mencakup saran umum tentang penggunaan atribut judul:

Mengandalkan atribut title saat ini tidak disarankan karena banyak agen pengguna tidak mengekspos atribut dengan cara yang dapat diakses seperti yang disyaratkan oleh spesifikasi ini (misalnya, memerlukan perangkat penunjuk seperti mouse untuk menyebabkan tooltip muncul, yang mengecualikan pengguna hanya keyboard dan pengguna hanya sentuh, seperti siapa pun yang memiliki ponsel atau tablet modern).

Sumber: http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

Mengenai aksesibilitas dan pembaca layar yang berbeda:

• Rahang 10-11: dimatikan secara default
• Window-Eyes 7.02: diaktifkan secara default
• NVDA: tidak didukung (tidak ada opsi dukungan)
• VoiceOver: tidak didukung (tidak ada opsi dukungan)

Oleh karena itu, seperti yang cukup dikemukakan oleh Denis Boudreau : jelas bukan praktik yang direkomendasikan .