Bağlantıların ayırt edilebilir adları yok hatası Pagespeed Insights raporunda erişilebilirlik sekmesinde karşılaştığımız bir hatadır. Bu durum sitemizi ziyaret eden görme engelli bireylerin kullandığı ekran okuyucuların sağlıklı bir şekilde çalışmasına engel olacaktır. Bağlantılar için ayırt edilebilir metinler kullanıldığında bu bağlantılar ekran okuyucular tarafından fark edilebilir olacaktır. Aksi takdirde ekran okuyucular bu alanları metin olarak görecek ve site deneyimini olumsuz bir şekilde etkileyecektir.
Not: Bağlantı metinleri her bir bağlantı ( <a href=””></a> etiketine sahip tüm alanlar) için benzersiz olmalıdır.
Neden Önemlidir?
- Erişilemeyen bağlantı öğeleri, bir web sitesinin temel bileşeni olduğundan erişilebilirliğe engel teşkil eder.
- Bir web sayfasında gezinmek için yalnızca klavyeye (fareye değil) güvenen kullanıcılar, yalnızca programatik olarak odaklanabilen bağlantılara tıklayabilir. Programatik odağı alamayan bir bağlantıya bu kullanıcılar erişemez.
- Görebilen kullanıcılar gibi, ekran okuyucu kullanıcılarının da bir bağlantının nereye işaret ettiğini bilmesi gerekir. İç bağlantı metni bu bilgiyi sağlar, ancak ekran okuyucunun ona erişememesi durumunda kullanılmaz.
- Görme engelli ekran okuyucu kullanıcıları veya fare kullanamayan kişiler de dahil olmak üzere klavye kullanıcıları, yalnızca programatik olarak odak alabilen bağlantıları ve form öğelerini etkinleştirebilir. Yalnızca diğer odak türleri tarafından etkinleştirilen olaylara (örneğin onmouseover odağına bağlı olan fareyle üzerine gelme olayları) klavye kullanıcıları erişemez. Varsayılan olarak yalnızca bağlantılar ve form öğeleri klavye odağını alır. Odaklanmak için bağlantı veya form bileşeni olmayan öğeleri tabindex = “0” ekleyerek değiştirin.
Hata Nasıl Çözülür?
Bağlantıların ayırt edilebilir adları yok hatasını çözebilmek için öneriler;
- Tüm bağlantı adlarının erişilebilir olduğundan emin olun. İç bağlantı metninin ekran okuyucu tarafından görülmemesi, yinelenen bağlantı etiketleri olması veya bağlantının odaklanamaması mümkün olabilir.
- Tüm bağlantı metinlerinin ekran okuyucular tarafından görülebilmesini sağlamak için bağlantı metinlerini gizlemeyin. (örn. display: none veya ile aria-hidden=”true” gibi CSS veya HTML kodları eklemeyin).
- Tüm bağlantıların programatik odağı alabilmesini sağlamak için onmouseover(), mouseover(), hover(), onmouseout(), mouseout() gibi cihaza özgü Javascript eventlerinden kaçının. Bunları focus(), onfocus(), onblur(), blur() gibi eventler ile değiştirin .
- Bir bağlantı programlı odağın nesnesi olduğunda, stildeki değişikliği bastırmak için bağlantıların stilini değiştirmeyin. Bağlantı stillerini değiştirmek, görme engelli olmayan klavye kullanıcılarının sayfada nerede olduklarını bilme yeteneğini ortadan kaldırır. Ayrıca, <a href> özelliğe sahip öğeyi kullanarak gerçek bağlantılar oluşturduğunuzdan emin olun.
ARIA 1.1 Wiki Bağlantı amacı için kullanma aria-label sayfası, aria-label öğesini kullanan HTML’deki bir bağlantının amacını açıklamak için aşağıdaki örneği sağlar:
<h4>Neighborhood News</h4> <p>Seminole tax hike: Seminole city managers are proposing a 75% increase in property taxes for the coming fiscal year. <a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a> </p> <p>Baby Mayor: Seminole voters elect the city's youngest mayor ever by voting in 3 year old Willy "Dusty" Williams in yesterday's mayoral election. <a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">[Read more...]</a> </p>
<a href=””> etiketine aria-label=”bağlantının ne ile alakalı olduğunu buraya detaylıca yazmalıyız” özelliği ekleyerek bu hatayı çözebilirsiniz.
