Google Menjelaskan Teks Alt untuk Logo & Tombol

Google Menjelaskan Teks Alt untuk Logo & Tombol

Dalam podcast Google Search Off the Record, Lizzi Sassman dan John Mueller dari Google membahas cara terbaik untuk menangani teks alternatif untuk logo dan tombol berbasis gambar.

Ada praktik terbaik untuk menambahkan atribut alt ke logo dan tombol.

Aturannya mungkin tampak sedikit rumit pada awalnya, tetapi sebenarnya mudah dipahami.

Mendapatkan atribut alt dengan benar bagus untuk pengguna dan dalam jangka panjang bagus untuk penghasilan.

Menambahkan Teks Alt ke Gambar Fungsional

Lizzi Sassman memulai diskusi dengan membuat referensi ke gambar fungsional, gambar yang memiliki tujuan fungsional di halaman web.

Dia bertanya apakah teks alternatif harus menjelaskan apa yang dilakukan tombol atau apa gambar pada tombol dalam situasi di mana tombol adalah ikon.

Terakhir, dia bertanya apakah ada tujuan SEO untuk menambahkan teks alternatif ke gambar fungsional seperti tombol.

“Lizzi Sasman:
…Tingkat perhatian yang kita keluarkan untuk aset visual, kita juga harus menempatkan tingkat energi yang sama ke dalam kata-kata yang menggambarkan aset itu juga. Yang menurut saya hebat.

Kategori gambar lainnya seperti benda fungsional, yang terkadang bisa berupa tombol.

Seperti itu grafik yang juga berfungsi sebagai sesuatu.

Jadi haruskah teks alternatif memberi tahu saya apa yang akan terjadi?

Jika Anda mengklik ini, maka itu akan membawa Anda ke sini?

Bisa seperti gambar sesuatu, yang kemudian juga berfungsi sebagai tombol.

Dan apakah Anda menggambarkan fungsinya, atau seperti itu, saya tidak tahu … seperti gambar panah?

Dan juga, apakah itu penting untuk SEO?

John Muller:
Ya. Menurut saya…

Lizzi Sasman:
Bisa jadi seperti logo.

John Muller:
Untuk aksesibilitas, itu mungkin masuk akal, untuk melakukan sesuatu di sekitarnya.

Tetapi untuk SEO, orang tidak akan mencari tombol checkout, atau semacamnya.”

Teks Alt pada Tombol Adalah Untuk Aksesibilitas Bukan SEO

John Mueller menjelaskan bahwa tidak ada tujuan SEO untuk menambahkan teks alternatif ke tombol.

Tetapi dia juga mengamati bahwa teks alternatif untuk jenis gambar ini terutama untuk alasan aksesibilitas.

Lizzi melanjutkan diskusi:

“Lizzi Sasman:
…Tapi mungkin mereka akan melakukannya untuk logo, atau sesuatu seperti logo. Ketika Anda mengkliknya, itu membawa Anda ke beranda, atau sesuatu.

Tapi itu juga, “Oh, itu logo.”

Jadi apakah Anda mengatakan, “Ini adalah logo untuk Pusat Pencarian Google.”

John Muller:
Tentu.

Lizzi Sasman:
Atau seperti apa yang akan menjadi teks deskriptif.

Itu adalah Googlebot di dalam logo, tetapi apakah hal yang paling penting untuk diketahui tentang gambar adalah fakta bahwa itu adalah sebuah logo?

Atau seperti apa logonya?

Saya kira dari sudut itu, orang mungkin mencari logo.

John Muller:
Ya.

Lizzi Sasman:

Seperti apa logo untuk perusahaan X, mungkin?

John Muller:
Ya. Maksud saya, ini kembali ke jenis strategi yang kami coba hindari.

Untuk apa Anda ingin ditemukan?

Lizzi Sasman:
Ya, tapi itu pertanyaan yang paling penting, saya kira, karena itu semacam mengarahkan…

Saya bisa terbawa oleh semua lubang kelinci ini, jadi saya tidak tahu, memprioritaskan hal-hal apa yang harus kita pikirkan, karena Anda tidak perlu menulis semua hal untuk hal-hal ini, Kukira.”

Penggunaan Teks Alt yang Tepat pada Logo dan Tombol

Cara yang tepat untuk menggunakan teks alternatif pada gambar seperti logo sebenarnya tergantung pada apakah gambar itu tautan atau bukan tautan.

Jika gambar logo berfungsi sebagai tautan kembali ke halaman beranda, maka sudah tepat untuk memberi label gambar tersebut dengan fungsi yang dimilikinya, sehingga pengunjung situs yang menggunakan pembaca layar tidak dapat mengetahui bahwa logo ini adalah tautan ke halaman beranda.

Badan pembuat standar HTML resmi, The World Wide Web Consortium (W3C) menerbitkan penjelas tentang cara menangani logo.

Tautan Beranda Logo

Logo yang berfungsi sebagai tautan beranda harus berisi teks alternatif yang memberi tahu pengguna pembaca layar bahwa logo tersebut adalah tautan beranda.

W3C menggunakan contoh kode ini:

<a href="https://www.w3.org/">
<img src="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/w3c.png" alt="W3C home">
</a>

Kode di atas adalah untuk logo yang mungkin ditemui di bagian atas halaman yang juga berfungsi sebagai tautan kembali ke halaman beranda.

Contoh teks alternatif yang disediakan oleh W3C hanya mengatakan, “W3C home” tetapi bisa lebih deskriptif jika Anda mau.

Tautan Beranda Logo dan Teks

Ada jenis tautan logo lain di mana ada logo gambar dan teks tepat di sebelahnya atau di bawahnya dan gambar dan teks dikodekan dalam kode tautan yang sama.

Dengan kata lain, tidak ada dua tautan seperti satu tautan untuk logo dan satu tautan untuk teks, itu hanya satu tautan untuk logo dan teks secara bersamaan.

Dalam hal ini, karena teks menggambarkan fungsi tautan, maka akan berulang-ulang untuk mengulangi fungsi tautan logo.

Jadi untuk kasus itu, praktik terbaik adalah menggunakan teks alternatif nol.

Ini adalah contoh yang disediakan W3C:

<a href="https://www.w3.org/">
<img src="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/w3c.png" alt=""> W3C Home
</a>

Perhatikan bagaimana atribut alt dikodekan untuk gambar:

img src="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/w3c.png" alt=""

Tanda kutip kosong untuk teks alt disebut atribut alt nol (atau teks alt nol). Pembaca layar akan melewatkannya begitu saja.

Alasan mengapa teks alt nol itu bagus adalah karena ada teks yang menjelaskan apa fungsi tautan itu:

Beranda W3C

Teks Alt untuk Tautan Ikon

Terkadang tautan berbentuk ikon, tanpa teks untuk menjelaskan fungsinya, misalnya ikon dalam bentuk amplop (mewakili email atau pesan) atau printer (yang menunjukkan tautan mengaktifkan printer).

Untuk situasi ini adalah praktik yang buruk untuk menggambarkan apa itu gambar (seperti amplop atau printer).

Praktik terbaik adalah menjelaskan fungsi gambar (memulai email atau mencetak halaman web).

W3C menggunakan contoh ikon printer dengan kode berikut dan teks alternatif:

<a href="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/javascript:print()">
<img src="print.png" alt="Print this page">
</a>

Seperti yang Anda lihat, ikon dalam bentuk printer memiliki kata-kata “Cetak halaman ini” sebagai teks alternatif. Ini memberi tahu apa yang dilakukan ikon. Itu membantu.

Teks Alt untuk Tombol

Mirip dengan contoh ikon, teks alternatif untuk gambar tombol harus menjelaskan fungsi gambar tersebut.

W3C menggunakan contoh kotak pencarian yang memiliki kaca pembesar untuk tombol kirim.

Cara yang buruk untuk melakukannya adalah dengan menggunakan teks alt untuk menggambarkan bahwa gambar tersebut adalah kaca pembesar.

Praktik terbaik adalah menggunakan teks alternatif untuk menjelaskan fungsi gambar.

Ini adalah contoh kode yang ditunjukkan oleh W3C sebagai contoh:

<input type="image" src="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/searchbutton.png" alt="Search">

Seperti yang Anda lihat, teks alternatif untuk tombol pencarian adalah kata, “Cari” yang menjelaskan apa fungsi tombol tersebut.

Teks Alt untuk Tombol dan Logo

Lizzi dan John tidak membahas detail tentang bagaimana menangani skenario yang berbeda untuk logo dan tombol.

Namun John menunjukkan bahwa tidak ada nilai SEO untuk teks alternatif untuk tombol dan logo, ini untuk aksesibilitas.

Ini adalah praktik terbaik untuk menyajikan halaman web yang berfungsi dengan tepat bagi pengguna yang mengakses halaman web dengan pembaca layar.

Seperti yang disebutkan sebelumnya, orang yang menggunakan pembaca layar dapat menjadi pelanggan atau pendukung bisnis atau situs web Anda.

Jadi, intinya adalah baik untuk menggunakan praktik terbaik aksesibilitas.


kutipan

Pelajari lebih lanjut tentang aksesibilitas untuk tombol dan logo di W3C

Gambar Fungsional

Menggabungkan tautan gambar dan teks yang berdekatan untuk sumber yang sama

Menggunakan atribut alt pada gambar yang digunakan sebagai tombol kirim

Dengarkan Podcast Search Off the Record pada menit 15:57:

Gambar unggulan oleh Shutterstock/Evgeny Atamanenko

Share

Leave a Reply

Your email address will not be published. Required fields are marked *