WordPress sitenizi daha erişilebilir hale getirmek için atlama bağlantıları nasıl kullanılır?

Erişilebilirlik serimize girişimizde, çeşitli Web İçeriği Erişilebilirlik Yönergelerinin (WCAG) temellerinden bahsettik. Şimdi, bazı temel 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 ekran okuyucu aracılığıyla :focus 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. Standartlardan doğrudan:

“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üzeyi bir standarttır. Bu, Bölüm 508 kapsamında olduğu ve yasaların gerektirdiği 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üyü” 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 olmayı beklediğiniz site öğelerinden biri olduğu için, yanlarında kaydırma eğilimindedir. Ancak, atlama bağlantılarına ihtiyaç duyan tek blok gezinme menüleri değildir.

Bağlantıları atlamak için yaygın olarak gözden kaçan bir alan sol kenar çubuklarıdır (veya Arapça gibi sağdan sola dillerdeki siteler için sağ kenar çubukları). Anlamsal sırayla 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 atlamanın bir yoluna ihtiyacı olacaktır.

Aynısı, ana sayfanın dışında görünen öne çıkan gönderi blokları için de geçerlidir. 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, örneğin kategori veya arşiv sayfaları değişmedikçe, yerinde bir atlama bağlantısı bulunmalıdır.

Erişilebilirliğe giriş: 1. Bölüm

Erişilebilirlik, duymaya devam ettiğiniz, ancak tam olarak anlayamayabileceğiniz bir terimdir. Bu kısmen çünkü kelimenin kendisi biraz kafa karıştırıcı olabilir. Kök kelime, erişim, kavramın şu gibi şeylere bağlı görünmesini sağlar...

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 kodlayıcı olmayanlar için tek yol), bir eklenti kurmaktır. Zor yol, onları temanıza kendiniz kodlamaktır.

Eklenti kullanma

Bağlantıları atlama konusunda önerdiğim iki eklenti var: Joe Dolson'dan WP Erişilebilirlik ve Rian Rietveld'den Genesis Erişilebilirlik. Her iki eklenti de sizin için temel atlama bağlantıları eklemek de dahil olmak üzere çeşitli erişilebilirlik sorunlarını çözer. Genesis Accessible'ın özellikle Genesis Framework kullanılarak oluşturulmuş siteler için olduğunu unutmayın. Bir Genesis siteniz yoksa, WP Erişilebilirliği kullanın.

Kendiniz kodlamak

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 sonra, başvurulan dosyaları nasıl bulacağınızı ve bunları nasıl düzenleyeceğinizi bildiğinizi varsayacağım.

Önce gerçek atlama bağlantılarını yazarak başlayacağız. Bu, şablon dosyalarına kolay 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 örnek için <main> öğesini hedefimiz olarak kullanacağız. Kimliği olmayan bir öğeye doğrudan bağlanamadığımız için, <main> öğemizin bir kimliği olduğundan emin olmamız gerekir. <main> öğeniz büyük olasılıkla header.php içinde bulunur, 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 onu hatırlamanız gerekir. Şimdi, bağlantı atlama 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 açılış <body> etiketinin bulunduğu yere geri dönün. <body> etiketi, klavye ve ekran okuyucu kullanıcıları için :focus olan mutlak ilk şey olması gerektiğinden, atlama bağlantıları için temel yerleşimdir.

<body> etiketinden hemen sonra, tamamladığınız HTML'yi 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 şekilde 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, üstte atlama bağlantılarını göreceksiniz. Biraz CSS ekleme zamanı. Aşağıdaki örneği kullanarak atlama bağlantılarının stili 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, metni right: 100% kullanarak ekranın dışına yerleştirip sağa kaydırarak yapılır right: auto açık :focus .

Uygulanan CSS ile hazırsınız. Atlama bağlantılarınız yerinde, ancak gizli. Bir klavye kullanıcısı veya ekran okuyucu başlatıldığında sayfanızı yüklediğinde :focus , atlama bağlantılarınız onların doğrudan geldikleri içeriğe gitmelerini sağlar.

Sarmalamak

Bağlantıları atla, çok iş gibi görünen ama aslında ö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 eklemek oldu. Teknik olmayan yaklaşım için bir eklenti kurduk. Her iki yöntem de çok uzun sürmez; bu, atlama bağlantılarının WCAG 2.0 (en güncel WCAG standartları) için A düzeyinde bir standart olduğu için not edilmesi önemlidir. Bunları sitenizde bulundurmanız kanunen zorunludur. Kendinizi riske atmayın; atlama bağlantılarınızı bugün ekleyin!