Skip to main content – İçeriğe atla bağlantısı

Web’de ve son kullanıcıya yönelik tüm web’e bağlı web siteleri veya uygulamalarda standartlar koyulurken “Accessibility” yani erişilebilirlik de göz önünde bulundurulmaktadır, hatta bu Google SEO noktasında bir etken de olduğu için web yöneticileri rekabet/optimizasyon için web sitelerini accessibility konusunda da geliştirmektedir.

W3C

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
— Tim Berners-Lee, W3C Director

Accessibility kısaca normal olmayan/engelli insanların web sitesin/uygulamayı sorunsuz kullanabilmesi anlamına geliyor.

Çoğu WordPress temasında varsayılan olarak accessibility göz önünde bulundurulmuş oluyor ancak özel olarak yapılmışlar ve bazılarında bu düşünülmemiş oluyor. Normal bir kullanıcı makale sayfasına girdiğinde kendisi ilgili makale yazısına bakarak gidebilir ancak görme engelli biri bunu yapamaz ve sayfayı baştan başlayarak komple okuması gerekir. “Skip to main content” yani içeriğe atla bağlantısı görme engelli birinin web sitesinde bir makale sayfasını okurken(dinleyerek/ekran okuyucu veya dokunarak) sayfa açıldığında diğer gereksiz şeyleri atlayarak ilgili konunun kendisine direk gitmesini sağlayan basit bir buton bağlantıdır. Bu bağlantının görünümü tahmin edeceğiniz gibi görme engelli kullanıcılara yönelik olduğu için önemsizdir bu yüzden sitede görünmesi gerekmez. Dolayısıyla bu bağlantıyı web sitelerinizin makale sayfalarına eklendiğinden emin olmak görme engelli bir kullanıcının çok işine yarayacağı gibi görme engelli olmayan diğer kişileri de hiç rahatsız etmeyecektir çünkü görünürde hiçbir şey değişmeyecek.

Örnek bir sayfa yapalım, HTML içeriği aşağıdaki gibidir:

<body>
    <a class="skip-link" href="#main-content">SKIP TO MAIN CONTENT</a>
    <header> .....</header>
    <main id="main-content">
         Main Body Content .....
    </main>
    <footer>......</footer>
</body>

CSS içeriği aşağıdaki gibidir:

.skip-link{
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    top: auto;
}

.skip-link:active, .skip-link:focus{
    color: #000;
    display: inline-block;
    height: auto;
    width: auto;
    position: static;
    margin: auto
}

Örnek web siteleri

Yukarıdaki örnek gibi canlı olarak birçok web sitesinde bunu görebilir ve test edebilirsiniz, örnek benim bulogumda vardır ve sayfaya ilk girdiğiniz anda “tab” yuşuna basarsanız göreceksinizdir. Ve diğer birçok web sitesi: codeboosh.com/how-to-style-accessibility-skip-links/

The BBC News website has a “Skip to content” link that takes users to the main content of the page and an “Accessibility Help” link.