Saya sedikit terlambat masuk ke sini, tetapi menemukan halaman ini ketika merenungkannya sendiri. Tentu saja saya tidak tahu bagaimana Facebook atau Twitter membenarkannya, tetapi di sini ada proses pemikiran saya sendiri untuk apa nilainya.
Pada akhirnya, saya menyimpulkan bahwa praktik ini tidak terlalu tidak romantis (apakah itu sebuah kata?). Faktanya, selain kekurangan dan asosiasi "i adalah untuk ikon," saya pikir itu sebenarnya adalah pilihan yang paling semantik untuk sebuah ikon ketika <img>
label sederhana tidak praktis.
1. Penggunaan konsisten dengan spesifikasi.
Meskipun mungkin bukan apa yang dipikirkan W3, menurut saya spesifikasi resmi untuk <i>
dapat mengakomodasi ikon cukup mudah. Lagi pula, simbol panah balasan mengatakan "balas" dengan cara lain. Ini mengungkapkan istilah teknis yang mungkin asing bagi pembaca dan biasanya dicetak miring. ("Di sini, di Twitter, ini adalah apa yang kami sebut panah balasan .") Dan itu adalah istilah dari bahasa lain: bahasa simbolik.
Jika, alih-alih simbol panah, Twitter menggunakan <i>shout out</i>
atau <i>[Japanese character for reply]</i>
(pada halaman bahasa Inggris), itu akan konsisten dengan spesifikasi. Lalu mengapa tidak <i>[reply arrow]</i>
? (Saya berbicara semantik HTML di sini, bukan aksesibilitas, yang akan saya bahas.)
Sejauh yang saya bisa lihat, satu-satunya bagian dari spesifikasi yang secara eksplisit dilanggar oleh penggunaan ikon adalah frasa "rentang teks" (ketika tag tidak mengandung teks juga). Jelas bahwa <i>
tag ini terutama ditujukan untuk teks, tapi itu detail yang cukup kecil dibandingkan dengan keseluruhan maksud tag. Pertanyaan penting untuk tag ini bukanlah format konten yang dikandungnya, tetapi apa arti konten itu.
Ini terutama benar ketika Anda menganggap bahwa garis antara "teks" dan "ikon" hampir tidak ada di situs web. Teks mungkin terlihat lebih mirip ikon (seperti dalam contoh Jepang) atau ikon mungkin terlihat seperti teks (seperti pada tombol jpg yang bertuliskan "Kirim" atau foto kucing dengan teks yang dilapiskan) atau teks dapat diganti atau ditingkatkan dengan gambar melalui CSS. Teks, gambar - siapa yang peduli? Itu semua konten. Selama semua orang - manusia dengan disabilitas, browser dengan disabilitas, spider mesin pencari, dan mesin lain dari berbagai jenis dapat memahami makna itu, kami telah melakukan tugas kami.
Jadi fakta bahwa penulis spec tidak berpikir (atau memilih) untuk mengklarifikasi ini seharusnya tidak mengikat tangan kami dari melakukan apa yang masuk akal dan konsisten dengan semangat tag. The <a>
tag pada awalnya ditujukan untuk membawa pengguna ke tempat lain, tapi sekarang mungkin muncul lightbox. Teriakan besar, kan? Jika seseorang menemukan cara memunculkan lightbox pada klik sebelum specnya ditemukan, mereka masih harus menggunakan <a>
tag, bukan a <span>
, bahkan jika itu tidak sepenuhnya konsisten dengan definisi saat ini - karena itu datang paling dekat dan merupakan masih konsisten dengan semangat tag ("sesuatu akan terjadi ketika Anda mengklik di sini"). Kesepakatan yang sama <i>
- apa pun jenis yang Anda masukkan ke dalamnya, atau seberapa kreatif Anda menggunakannya,
2. <i>
Tag menambahkan makna semantik ke elemen ikon.
Pilihan alternatif untuk membawa kelas ikon dengan sendirinya adalah <span>
, yang tentu saja tidak memiliki makna semantik sama sekali. Ketika sebuah mesin menanyakan <span>
isinya, ia berkata, "Saya tidak tahu. Bisa apa saja." Tetapi <i>
tag itu berkata, "Saya mengandung cara yang berbeda untuk mengatakan sesuatu dari cara biasa, atau mungkin istilah yang tidak dikenal." Itu tidak sama dengan "Saya mengandung ikon," tapi itu jauh lebih dekat daripada <span>
mendapatkannya!
3. Akhirnya, penggunaan umum menjadi benar.
Selain hal di atas, ada baiknya mempertimbangkan bahwa mesin pembaca (apakah mesin pencari, pembaca layar, atau apa pun) dapat setiap saat mulai mempertimbangkan bahwa Facebook, Twitter, dan situs web lain menggunakan <i>
tag untuk ikon. Mereka tidak peduli tentang spek sebanyak mereka peduli tentang penggalian makna dari kode dengan cara apa pun yang diperlukan. Jadi mereka mungkin menggunakan pengetahuan tentang penggunaan umum ini hanya untuk merekam bahwa "mungkin ada ikon di sini" atau melakukan sesuatu yang lebih maju seperti memicu pandangan ke CSS untuk petunjuk tentang makna, atau siapa yang tahu apa. Jadi jika Anda memilih untuk menggunakan <i>
ikon for di situs web Anda, Anda mungkin memberikan lebih banyak makna daripada spesifikasi.
Selain itu, jika penggunaan ini menyebar luas, kemungkinan akan dimasukkan dalam spesifikasi di masa mendatang. Maka Anda akan melalui kode Anda, mengganti <span>
dengan dengan <i>
! Jadi mungkin masuk akal untuk bergabung dengan apa yang tampaknya menjadi arah spesifikasi, terutama ketika itu tidak jelas bertentangan dengan spesifikasi saat ini. Penggunaan umum cenderung mendikte aturan bahasa lebih dari sebaliknya. Jika Anda cukup tua, apakah Anda ingat bahwa "Situs web" adalah ejaan resmi ketika kata itu baru? Kamus bersikeras harus ada ruang dan Web harus ditulis dengan huruf besar. Ada alasan semantik untuk itu. Tetapi penggunaan umum mengatakan, "Apa pun, itu bodoh. Saya menggunakan 'situs web' karena lebih ringkas dan terlihat lebih baik." Dan tak lama kemudian,
4. Jadi saya akan maju dan menggunakannya.
Jadi, <i>
memberikan lebih banyak makna ke mesin karena speknya, ia memberikan lebih banyak makna bagi manusia karena kita dengan mudah menghubungkan "i" dengan "ikon", dan panjangnya hanya satu huruf. Menang! Dan jika Anda memastikan untuk memasukkan teks yang setara baik di dalam <i>
tag atau tepat di sebelahnya (seperti Twitter), maka pembaca layar memahami di mana harus mengklik untuk membalas, tautan tersebut dapat digunakan jika CSS tidak memuat, dan pembaca manusia dengan baik penglihatan dan peramban yang layak melihat ikon yang cantik. Dengan semua ini dalam pikiran, saya tidak melihat sisi buruknya.
<i class="sm-reply"></i>
.