- "Buraya tıklayın" gibi genel bağlantı metinleri kullanmanın sorunları vurgulanıyor
- Erişilebilirliği artırmak için bağlantı metninin içeriğin anlamını açıkça iletmesi gerektiği belirtiliyor
- Arama motorları ve ekran okuyucu kullanıcı deneyimi üzerinde olumsuz etki yaratıyor
- Açık ve bağlamı yansıtan bağlantı ifadeleri, hem kullanıcılara hem de teknolojiye fayda sağlıyor
- 2001'den beri web standartları ve UX ilkeleri çerçevesinde doğru bağlantı metinlerini öneren bir yaklaşım sürüyor
Giriş
- "Buraya tıklayın" veya "click here" gibi genel bağlantı metinleri kullanımı, uzun zamandır web geliştiricileri arasında yaygın bir uygulama olarak yerleşmiş durumda
- Ancak bu yaklaşım, erişilebilirlik, kullanılabilirlik ve SEO açısından önemli dezavantajlar barındırıyor
Bağlantı metninin anlamı ve sorunları
- Bağlantı metni, kullanıcının tıklamadan önce bağlantının nereye gideceğini tahmin edebilmesini sağlayacak bilgiyi sunma görevini taşımalı
- Sadece "Buraya tıklayın" şeklinde yazıldığında, bağlantı bağlamdan kopuk hale gelir ve kullanıcı kafa karışıklığına ile erişilebilirliğin azalmasına yol açar
Erişilebilirlik ve kullanıcı deneyimine etkisi
- Ekran okuyucu kullanıcıları sayfadaki bağlantı listesini taradığında, hepsinde aynı "Buraya tıklayın" ifadesini duydukları için bilgi edinmekte zorlanır
- Bağlantılar anlam içeren somut ifadelerle yazıldığında, hem görme engelli kullanıcılar hem de farklı koşullardaki kullanıcılar için deneyim verimliliği artar
Arama motoru optimizasyonu (SEO) açısından değerlendirme
- Arama motorları da içerik alaka düzeyini ve kalitesini değerlendirmek için bağlantı metinlerini analiz eder
- Önemli anahtar kelimeleri ve bağlamı içeren bağlantı metinleri, arama sıralaması ve görünürlükteki artışa olumlu katkı sağlar
Doğru bağlantı metni yazımı için öneriler
- Bağlamı açık biçimde yansıtan bağlantı metinlerinin kullanılması önerilir
- Örnek: "En güncel erişilebilirlik yönergelerini inceleyin" vb.
- Bu ilke, 2001'den beri web standartlarının ortaya çıkışı ve UX'in güçlenmesi sürecinde sürekli vurgulanmaktadır
Sonuç
- "Buraya tıklayın" yerine anlamlı metinleri bağlantı olarak kullanmak, hem bugünün web'i hem de geleceğin web'i için vazgeçilmez bir ölçüttür
1 yorum
Hacker News yorumları
Erişilebilirlik açısından bakınca, görme engellilere yönelik ekran okuyucular sayfayı doğrusal olarak okur.
Doğrusal okumadan çıkabilmek için başlıklar veya bağlantılar gibi öğe listelerini, özgün konumlarının bağlamı olmadan ayrı ayrı gezdirmeleri de sık görülür.
Tüm bağlantılar “click here” ise, bu kullanıcılardan doğrusal olmayan erişimi fiilen almış olursunuz.
Bu yüzden “get Amaya” veya “go to the Amaya website” gibi ifadeler fena görünmüyor.
Ayrıca github.io’daki indirme düğmesinin, çalıştırılabilir dosyayı SourceForge gibi kötü amaçlı yazılım sitesi muamelesi gören bir yerden getirmesi iyi bir yöntem değil. Aklıma wxMaxima geliyor.
Araçları değiştirelim demiyorum, ama ekran okuyucuların nasıl çalıştığını bizzat kurcalamayacak insanlara bunu görselleştirerek gösterecek bir yol olmalı gibi.
Ancak ilkinin ekran okuyucularda ne kadar iyi desteklendiğini bilmiyorum.
Düzenleme: Bağlantıları WCAG 2.0’dan 2.2’ye güncelledim.
Yine de yazıdaki örnekte olduğu gibi sadece “Amaya” bırakmak yerine “Get Amaya” gibi eylemi daha fazla içeren bir ifade kullanırdım.
Kullanıcı örneğin landmark’lar arasında, başlıklar arasında veya ikisini birlikte taslak gezinme modunda dolaşabilir.
Esas nokta, ekran okuyucu gezintisinin klavye gezintisiyle aynı olmadığıdır.
Hiç katılamıyorum. Kötü örnek olarak verdikleri “To download W3C's editor/browser Amaya, click here.” son derece açık.
Bağlantıya basınca doğrudan indirilir ya da indirme sayfasına gidilir.
Buna karşılık “Get Amaya!” Amaya web sitesine giden bir bağlantı gibi görünür, indirme sayfası gibi değil; bu yüzden indirme açısından etkili değil.
“Tell me more about Amaya: W3C's free editor/browser that lets you create HTML, SVG, and MathML documents.” da pek iyi değil. İndirmeyle ilgili bir cümle değil ve “tell me more” bir komut olmasına rağmen bağlantı olan kısım o değil.
Web’in geleneksel kullanımı, yani “To download W3C's editor/browser Amaya, click here.” veya “Download Amaya, the W3C's editor/browser.” tamamen makul.
Bağlantının fiil olmaması gerektiği fikri epey tuhaf görünüyor. İndirmek ya da daha fazla bilgi almak gibi bir eylem içeriyorsa bağlantı elbette fiil olabilir.
Wikipedia’daki referans bağlantıları gibi bir konu hakkında daha fazla bilgi edinme durumundan farklı.
“click here”, bağlantının basit bir referans bağlantısı değil, eylem bağlantısı olduğunu çok net gösterir. “Get Amaya!” ifadesini görünce bunun Amaya’yı nasıl edineceğini söylemediğini, “Amaya”nın indirme bağlantısı değil referans bağlantısı olduğunu hissediyorum.
Bir arama motoru yaptığınızı düşünseniz bile, “click here” dizine hangi bilgiyi verecek?
Fiilin kendisinin büyük sorun olduğu fikrine katılmıyorum, ama fiil click, nesne de here ise durum farklı.
“Click Here to download Amaya” bağlantı metnine katlanabilirim, ama bağlantı kelimenin tam anlamıyla sadece “click here” iki kelimesinden oluşuyorsa birçok bağlamda diğer bağlantılardan ayırt edilemez.
“Download Amaya” harika bir bağlantı olabilir. Sadece “Amaya” ya da sadece “click here” olması, Amaya bilgi sayfasına gidilen bir durum değilse iyi değil.
Sonuçta “click here” sorunu, diğer yorumların söylediği gibi bir erişilebilirlik sorunu; fakat bağlantı metninin hedefi doğru yansıtıp yansıtmamasıyla karıştırılınca mesaj epey bulanıklaşmış gibi.
aria-describedbyyardımcı olabilir, ancak bağlantının içindeki metni daha iyi hale getirirseniz buna duyulan ihtiyacı ortadan kaldırabilirsiniz.Fiil konusunda katılıyorum
Birleşik Krallık Government Digital Service de erişilebilirlik yönergelerinde benzer bir öneride bulunuyor: https://design.homeoffice.gov.uk/accessibility/links
En güzeli olmayabilir ama form bileşenlerindeki kalın siyah/sarı kenarlıklar gibi şeylerde erişilebilirlik tasarımdan önce gelir
W3C “Get Amaya”, “Read more about Amaya” diyor; Home Office ise “Get Amaya”, “Read more about Amaya” diyor
İkincisi çok daha makul görünüyor, ancak bağlam içinde kullanıldığında başka bir sorun ortaya çıkıyor
Kişisel olarak ikisinin de iki farklı kullanım senaryosunu birbirine karıştırdığını düşünüyorum. Bağlantılar çoğu zaman cümle içinde satır içi kullanılır; W3C ve Home Office’in ele aldığı örnekler ise daha ziyade cümle dışındaki düğmeler, örneğin
[Download],[Documentation]olarak ele alınsa daha iyi olurAma satır içi metin içindeki hiperlink kullanımında ikisi de tuhaf görünüyor
Örneğin “PiPedal is a guitar effects pedal that runs on Raspberry Pi. To download PiPedal, click here. To read the documentation, click here.” nasıl düzeltilmeli?
Karşı çıkma gerekçesini anlıyorum ama “PiPedal is a guitar effects pedal that runs on Raspberry Pi. Get Pipedal. Read the documentation.” gibi bir düzeltmeyi kabul etmek zor. İngilizce kullanıma uygun değil
Gerçek belgede “To download PiPedal, visit the Download Page. To learn more about Pipedal, view the Documentation.” şeklinde yazdım; ama deneyimlerime göre “click here” ifadesini isimleştirmek çoğu zaman çok zor
“Ubuntu Server installs don't suffer from this problem; but before choosing an Ubuntu Server install, you should read the Ubuntu Server section of the "Installing on Ubuntu" page.” gibi bir cümlede bu daha da geçerli
O zaman “here” kelimesini göndergenin zamiri olarak kullanmanın tam olarak neyi yanlış, diye insan merak ediyor
Bu kullanım senaryosunda bağlantı, gereken tüm bağlamı sağlayan bir cümlenin içinde olduğu için ortada gerçek bir erişilebilirlik sorunu olmayabilir
İlk örnek de kısalığın önemli olduğu bir web sayfasının giriş cümlesi
“To download PiPedal, click here.” gerçekten bir erişilebilirlik sorunu mu? Hemen üstünde
[ Download ] [ Documentation ]düğmeleri varsa özellikle öyleBurada gerçekten önemli metrik, insanların indirme sayfasını ne kadar ziyaret ettiği
Bu açıdan bakınca “To download PiPedal, visit the Download Page.” ifadesinin daha iyi olduğundan oldukça şüpheliyim
Kişisel olarak kaçınılmasını söyledikleri ikinci örneği daha iyi buluyorum: “To download Amaya, go to the Amaya_Website and get the necessary software.”
Yalnızca “Amaya” diye verilmiş bir bağlantının dahili mi harici mi olduğu anlaşılmaz; bağlamdan Amaya’yı indirme amacının açık olduğu durumda bile doğrudan dosyaya mı yoksa indirme sayfasına mı gittiğini anlamak zordur
Yaşlandığımdan mıdır bilmiyorum ama bağlantıların içgüdüsel olarak her zaman bir isme işaret ettiğini düşünmüşümdür
Bağlantı bir yeri gösterir ve o yerin bir fiili ya da sıfatı değil, bir adı vardır
Bu yüzden “web sitem”e giden bir bağlantı bana uygun gelir, ama “web siteme git” gibi bir bağlantı özünde yanlışmış gibi gelir
Emir kipinden de güçlü biçimde hoşlanmadığım için “go to my website” ya da “follow this link” gibi cümleleri asla kullanmam
Ancak bağlantı indirme gibi bir eylem başlatıyorsa iş muğlaklaşıyor. Yine de bunu “indirme” ya da “indirici” adlı bir isim olarak görürsek hâlâ isimdir
Bu muhtemelen sonuna kadar savunacağım internet tartışma konularından biri
Eylem çağrısı metni ayrı bir mesele ama yalnızca “here” kelimesini bağlantı yapan sayfa, hiper metin ortamını anlamamış bir yazarın bariz başarısızlığıdır
“click here” yanlışlıkla bırakılmış bir sahne yönergesi gibi görünür
Yazarların çoğu yazarken hiper metin bağlamında yazmaz; Markdown gibi bağlantı gösterimlerini değil, varsayılan olarak sahne yönergelerini kullanır
“I forgot my password” yazan bağlantıyla ilgili bir yazı aklıma geldi
“click here if...” yazsam daha iyi olur mu diye düşündüm ama içgüdüsel olarak bunun da doğru olmadığını biliyordum
Bir web sayfasındaki işe yaramaz öğeleri görmezden gelmek bazı insanların sahip olmadığı bir beceri ve bunu nasıl öğreteceğimi bilmiyorum
Arka plan bilgisi olmayan birine web kullanımı konusunda her yardım ettiğimde aklıma geliyor. Bazı kullanıcılar, sayfadaki kelimenin tam anlamıyla ilk öğe “Please enable notifications” olsa bile ikinci öğeyi görmeden önce bunu dikkatle düşünüyor
Google aramanın da artık gerçek sonuçlardan önce birkaç ekran dolusu çöp göstermesi bunu daha da artırıyor
Bununla bağlantılı bir sorun da, sayfa içindeki metnin epistemolojik statüsünü türlerine göre anlayamamak
Örneğin “I forgot my password” adlı tıklanabilir bir bağlantıyı görüp, bunun parolanızı unuttuğunuzda basılacak yer anlamına geldiğini değil, kendisinin parolasını unuttuğunu bildiren bir cümle olduğunu sanan kullanıcılar da var
Elbette UI standartlaşmasının ölümü bu sorunu çok daha kötüleştiriyor
https://mstdn.io/@mattskala/113188291223682980
Microsoft’un UI’da birçok düğmeyi kaldırıp yerine belirsiz şekilde renklendirilmiş metin bağlantıları koyduğu zamanı hatırlıyorum. Ondan sonra neye tıklanması gerektiğini anlamak çok daha zorlaşmıştı
Kullanıcılar sezgisel olarak makineye uyum sağlar, geliştiriciler de kullanıcıya uyum sağlar ve böylece bir geri bildirim döngüsü oluşur
Başka bir deyişle, sayısız web sitesi ve uygulamada “I forgot my password” bağlantısı bulunduğu için dilin anlamı da büyük olasılıkla değişmiş olabilir
En azından o bağlamda çoğu kişi niyeti anlayacak şekilde uyum sağlayacaktır
Başka bir yöntemi bilmeyen genç kuşaklar bunu dert edilecek bir şey olarak bile görmeyebilir
Bu yüzden gelenekler tek başına bakıldığında mantıksız görünse bile, gelenekleri korumanın değeri de vardır
Tüm örnekler tutarlı biçimde gerçekten “Amaya” indirileceği varsayımına dayanıyorsa, sadece Download Amaya hiperbağlantısı daha iyi olurdu
Mümkünse gerçek bir dosyaya gidildiğini gösteren bir indirme ikonu da olsa iyi olur
Çünkü bunun, gerçek indirme düğmesinin 4 reklamın arasına saklandığı başka bir sayfaya giden bağlantı olmadığını anlayabilirsiniz
Dragan Espenschied(despens), 2022’de bağlantı metinlerinin zaman içinde nasıl değiştiğine dair bir yazı yazmıştı: https://despens.systems/2022/06/button-pushes-you/
Davranışa çağrı metinlerinden, kullanıcıyı tarif eden düğme metinlerine geçişe dikkat çekiyor
“Bunun yerine bunlar kullanıcının durumunu yeniden kurgulamalı. Kullanıcı, sıradaki bilgiye erişmeden önce yazılı büyüyü kabul etmeli ve tutumunu değiştirmelidir” gibi
“Get Amaya.”, “Tell me more about Amaya.” zarif görünmüyor