WordPress Sitenizi Daha Erişilebilir Hale Getirmek İçin Bağlantıları Atla Nasıl Kullanılır?

Erişilebilirlik serimize girişimizde, çeşitli Web İçeriği Erişilebilirlik Yönergelerinin (WCAG) temelinden bahsettik. Şimdi, bazı önemli yönergelere bakarak ve sitenizi nasıl daha erişilebilir hale getireceğinizi göstererek bir sonraki adımı atma zamanı. Daha yaygın olarak atlama bağlantıları olarak bilinen baypas bloklarıyla başlayalım.

Atlama Bağlantısı nedir?

Atlama bağlantısı, sekme tuşu veya bir ekran okuyucu aracılığıyla :focus gelene kadar sitenizde gizlenen özel bir bağlantıdır. Amaçları, alternatif teknoloji kullanıcılarına (klavye ve ekran okuyucu kullanan kişiler) içerik bloklarını atlama yeteneği vermektir. Doğrudan standartlardan:

"Birden çok Web sayfasında tekrarlanan içerik bloklarını atlamak için bir mekanizma mevcuttur." – WCAG Standardı 2.4.1 – Baypas Blokları

2.4.1, A düzeyinde bir standarttır. Bu, Bölüm 508 kapsamında olduğu ve kanunen gerekli olduğu anlamına gelir. Atlama bağlantılarına sahip olmanız gerekir .

En yaygın içerik atlama bağlantılarının ne için geçerli olduğunu tahmin edebilir misiniz? "Menü" diye tahmin ettiyseniz, haklısınız. Menüler, bir sitenin hemen hemen her sayfasında görünür. Gören kullanıcılar ve fare kullanıcıları, orada olmasını beklediğiniz site öğelerinden biri olduğu için yanlarında gezinme eğilimindedir. Ancak gezinme menüleri, atlama bağlantılarına ihtiyaç duyan tek blok değildir.

Atlama bağlantıları için genellikle gözden kaçan bir alan, sol taraftaki kenar çubuklarıdır (veya Arapça gibi sağdan sola yazılan dillerdeki siteler için sağdaki kenar çubuklarıdır). Anlamsal sıraya düşme eğiliminde olduklarından, kullanıcıların doğrudan içeriğe ulaşmak için düzenli olarak tekrarlanan kenar çubuğunu atlamak için bir yola ihtiyacı olacaktır.

Aynı şey, ana sayfanın dışında görünen öne çıkan gönderi blokları için de geçerli. Bazı site tasarımları, öne çıkan yazı bölümlerini veya kaydırıcıları iç sayfalara taşır. Bu bölümlerin içeriği değişmediği sürece, örneğin: kategori veya arşiv sayfaları, yerinde bir atlama bağlantısı bulunmalıdır.

Atlama Bağlantılarını Nasıl Eklersiniz?

Artık atlama bağlantısının ne olduğunu bildiğinize göre, bunları sitenize eklemenin zamanı geldi. Bu sorunu çözmenin birkaç yolu var. Kolay yol (ve sizin için kodlayıcı olmayanlar için tek yol), bir eklenti yüklemektir. Zor yol, onları temanıza kendiniz kodlamaktır.

Eklenti Kullanmak

Bağlantıları atlamak söz konusu olduğunda önerdiğimiz bir eklenti: WP Erişilebilirlik, Joe Dolson. Sizin için temel atlama bağlantılarının eklenmesi de dahil olmak üzere çeşitli erişilebilirlik sorunlarını çözer.

Kendiniz Kodlayın

Diğer seçeneğiniz, atlama bağlantılarını kendiniz kodlamaktır. Kodun kendisi oldukça basittir ve yalnızca bazı temel HTML ve CSS bilgisi gerektirir, ancak bu yöntemi denemeden önce WordPress temalarının ve şablonlarının nasıl çalıştığı konusunda rahat olmanız gerekir. Bu noktadan itibaren, referans verilen dosyaları nasıl bulacağınızı ve onları nasıl düzenleyeceğinizi bildiğinizi varsayacağız.

Önce gerçek atlama bağlantılarını yazarak başlayacağız. Bu, şablon dosyalarına kolayca kopyalayıp yapıştırmaya izin verecektir. HTML bilgisini hatırlayarak, bir bağlantı etiketi yazmanız gerekecek. Buradaki biçimlendirmenin okunabilirlik için olduğunu unutmayın.

 <a href=”[don't fill this in yet]” class=”skip-link”> Skip to Main Content </a>

href niteliğini bilerek boş bıraktık. Bunun nedeni, atlama bağlantımızın nereye bağlanacağını tanımlamamız gerektiğidir. Bu örnekte, <main> öğesini hedefimiz olarak kullanacağız. Kimliği olmayan bir öğeye doğrudan bağlanamayacağımız için, <main> öğemizin bir kimliği olduğundan emin olmamız gerekecek. <main> öğeniz muhtemelen header.php içinde bulunacaktır, ancak her zaman değil. Öğeyi bulduktan sonra, bir kimliği olduğundan emin olmanız gerekir. Değilse, şöyle bir tane ekleyin:

 <main id=”main-content”> [a bunch more code below]

Kimliğin belirli değeri önemli değildir, ancak bunu hatırlamanız gerekir. Şimdi atlama bağlantısı kodunuzu kimlik değeriyle güncellemek isteyeceksiniz.

 <a href=”#main-content” class=”skip-link”> Skip to Main Content </a>

Artık atlama bağlantınızı oluşturduğunuza göre, header.php dosyanıza veya temanızın <body> açılış etiketinin bulunduğu yere geri dönün. <body> etiketi, klavye ve ekran okuyucu kullanıcıları için kesinlikle :focus gelen ilk şey olması gerektiğinden, atlama bağlantıları için temel yerleşimdir.

<body> etiketinden hemen sonra, tamamlanmış HTML'nizi geçin. Aşağıda, birden çok atlama bağlantısı içeren daha ayrıntılı bir örnek gösterilmektedir. Sitenize birden çok bağlantı eklemek istiyorsanız kimliklerin doğru uygulandığından emin olun.

 <body> <a href=”#left-sidebar” class=”skip-link”>Skip to Sidebar</a> <a href=”#featured-posts-block” class=”skip-link”>Skip to Featured Posts</a> <a href=”#main-content” class=”skip-link”>Skip to Main Content</a> [Header navigation goes here]

Artık kodunuzda atlama bağlantıları var, ancak henüz işiniz bitmedi! Sayfanızı şimdi yüklerseniz, üst kısımda atlama bağlantılarını göreceksiniz. Biraz CSS ekleme zamanı. Atlama bağlantılarının stili, aşağıdaki örnek kullanılarak oldukça basittir:

 .skip-link { position: absolute; top: 0; z-index: 9999; right: 100%; padding: 5px; padding: 0.5rem; font-size: 20px; font-size: 2rem; color: #000; background: #FFF; } .admin-bar .skip-link { top: 32px; } .skip-link:focus { right: auto; }

Görmediğiniz şey display: none kullanımıdır. Bunu kullanmak, ekran okuyucunun bağlantıyı tamamen atlamasına ve amacı tamamen ortadan kaldırmasına neden olur. Gizleme, right: 100% kullanarak metni ekran dışına yerleştirerek ve : :focus üzerinde right: auto konumuna kaydırarak yapılır.

CSS'niz uygulandığında artık hazırsınız. Atlama bağlantılarınız yerinde ancak gizli. Bir klavye kullanıcısı veya ekran okuyucusu, inisiyatiflerde :focus konumunda sayfanızı yüklediğinde, atlama bağlantılarınız onların doğrudan aradıkları içeriğe gitmelerini sağlar.

Sarmalamak

Bağlantıları atla, çok iş gibi görünen ama gerçekte öyle olmayan bir erişilebilirlik özelliğinin mükemmel bir örneğidir. Kod tarafında yaptığımız tek şey birkaç satır HTML ve CSS eklemekti. Teknik olmayan yaklaşım için bir eklenti kurduk. Her iki yöntem de çok uzun sürmez ve atlama bağlantıları WCAG 2.0 (en güncel WCAG standartları) için A düzeyinde bir standart olduğundan, buna dikkat etmek önemlidir.Yasalar gereği bunları sitenizde bulundurmanız gerekir.Kendinizi riske atmayın; atlama bağlantılarınızı bugün ekleyin!