WordPress Sitenizde Erişilebilirlik Nasıl İyileştirilir?

WordPress sitenizde erişilebilirliği geliştirmek mi istiyorsunuz?

Bir web sitesi oluştururken, erişilebilirlik genellikle ihmal edilir ve bu da kötü bir kullanıcı deneyimi (UX) yaratabilir. İdeal olarak, WordPress sitenizin kullanıcı dostu olmasını ve ihtiyaçları ne olursa olsun tüm bireyleri kapsamasını istersiniz.

Bu makalede, WordPress web sitenizin erişilebilirliğini nasıl geliştireceğinizi göstereceğiz.

Erişilebilirlik WordPress Sitem İçin Neden Önemli?

Web tasarımında erişilebilirlik, bir web sitesinin engelli kişiler tarafından daha kolay kullanılmasını sağlamak için kullanılan teknikleri ifade eder. Bazı ziyaretçiler web’de gezinmek için görme engelli kişiler için ekran okuyucular ve fare kullanamayan kişiler için klavye navigasyonu gibi yardımcı teknolojiler kullanır.

Web sitelerini daha erişilebilir hale getirmek için uzmanlar tarafından önerilen bazı yaygın en iyi uygulamalar vardır. Bunlar, sitelerin yeteneklerinden bağımsız olarak herkes için daha kapsayıcı ve kullanıcı dostu olmasına yardımcı olur.

Erişilebilirliğe öncelik vererek, daha fazla kişi WordPress web sitenizde gezinebilir ve içeriğinizi keşfedebilir. Çevrimiçi bir mağaza işletiyorsanız, kullanıcıları müşteriye dönüştürme şansınızı da artıracaksınız.

Erişilebilirlik, arama motoru optimizasyonu (SEO) için de önemlidir. Google, kullanıcı dostu olan web sitelerine değer verir. Web sitenizi mobil cihazlar için daha duyarlı hale getirmenin yanı sıra, sıralamaları iyileştirmek için web tasarımınızda kapsayıcılığa da öncelik verebilirsiniz.

Ayrıca, bir işletme web sitesi sahibiyseniz ve sitenizin ön yüzüne erişilemiyorsa, yasal sonuçlarla karşılaşabilirsiniz.

Engelli Amerikalılar Yasası (ADA), bir sitenin erişilebilirlik kurallarına uymaması halinde tüketicilerin şikayette bulunabileceğini belirtmektedir. Dahası, itibarınız zedelenebilir ve bu da mali kayıplara neden olabilir.

WordPress Web Sitemi Nasıl Daha Erişilebilir Hale Getirir?

WordPress, kullanıcıların WordPress web sitelerini erişilebilir hale getirmelerine yardımcı olmak için çeşitli yerleşik işlevlere sahiptir. Örneğin, varsayılan olarak, görsellere alternatif metin (alt metin) ve başlık özellikleri ekleyebilirsiniz, böylece ekran okuyucular görme engelli kullanıcılar için bunları yüksek sesle okuyabilir.

WordPress ayrıca WordPress’teki tüm yeni ve güncellenmiş kodların erişilebilirlik kodlama standartlarına uymasını zorunlu hale getirmiştir. Bu, WordPress geliştiricilerinin tema ve eklenti oluştururken erişilebilirlik için en iyi uygulamalara uymalarını sağlamak içindir.

Bunun dışında WordPress, widget eklemek için erişilebilirlik modu gibi engelli kullanıcıların kendi web sitelerini oluşturmalarını kolaylaştıran özellikler içerir.

Daha fazla bilgi için WordPress Core Yap sayfasındaki Erişilebilirlik etiketini takip etmenizi öneririz.

Tüm bunlar göz önünde bulundurulduğunda, WordPress kutudan çıktığı haliyle tamamen erişilebilir değildir. Bir web sitesi sahibi olarak, sitenizin erişilebilirlik standartlarını karşılamasına yardımcı olmak için ekstra adımlar atmanız önemlidir.

WordPress web sitenizin erişilebilirliğini iyileştirmek için bu kılavuzu birkaç kolay ipucuna ayırdık. Belirli bir bölüme gitmek için bu hızlı bağlantıları kullanabilirsiniz:

1. Web İçeriği Erişilebilirlik Yönergelerine (WCAG) Aşina Olun

Her şeyden önce, Web İçeriği Erişilebilirlik Yönergelerini (WCAG) okumanızı öneririz. Bunlar, kullanıcıların web sitelerini daha erişilebilir hale getirmeleri için W3C Web Erişilebilirlik Girişimi (WAI) tarafından ortaya konan standartlardır.

Yeni başlayanlar için WCAG 2.1 ve WCAG 2.2 güncellemelerine göz atabilirsiniz. Her iki belge de okumak için çok uzun görünüyorsa, bunun yerine bu hızlı referansı yer imlerine eklemekten çekinmeyin.

2. Erişilebilirliğe Hazır Bir WordPress Teması Kullanın

Erişilebilirliğe hazır temalar, WordPress tema inceleme ekibinin belirlediği minimum erişilebilirlik standartlarını karşılamıştır.

Erişilebilir bir WordPress teması kullanmak, web sitenizin otomatik olarak tüm erişilebilirlik gereksinimlerine uyacağı anlamına gelmez, çünkü yine de kendi başınıza bazı ince ayarlar yapmanız gerekir. Ancak, web sitenizi daha erişilebilir hale getirmek için size bir başlangıç sağlayabilir.

En azından, erişilebilirliğe hazır bir tema şu özelliklere sahip olacaktır:

• Yalnızca klavye kullanılarak gezilebilen menüler.
• İçeriği görme engelli kullanıcılar için okunabilir kılan iyi renk kontrastı.
• Yardımcı teknolojilerin bir web sayfasının içeriğini ve yapısını anlamasına yardımcı olan anlamsal olarak doğru HTML.

İşleri bir adım öteye taşımak istiyorsanız, temada ARIA öznitelikleri olup olmadığını da kontrol etmek isteyebilirsiniz. Bu nitelikler, yardımcı teknolojiler için bir web sitesinde gezinmeyi daha da kolaylaştırmak için temanızın HTML’sini tamamlayan ekstra bilgiler gibidir.

Erişilebilirliğe hazır bir tema aramanın en kolay yolu WordPress panonuzdaki Görünüm ” Temalar bölümüne gitmektir. Ardından, ‘Yeni Tema Ekle’ye tıklayın.

Buradan, ‘Özellik Filtresi’ni seçin ve ‘Erişilebilirlik Hazır’ı seçin.

İhtiyaçlarınıza tam olarak uyan temayı bulmak için daha fazla filtre eklemekten çekinmeyin.

Şimdi, aşağı kaydırın ve ‘Filtreleri Uygula’ya tıklayın.

Daha sonra ekranda erişilebilirliğe hazır bazı temalar göreceksiniz.

Daha fazla tema önerisi için uzmanlarımızın seçtiği en iyi WordPress temalarına göz atın.

3. Bir WordPress Erişilebilirlik Eklentisi Yükleyin

Bir WordPress erişilebilirlik eklentisi, engelli ziyaretçilerin web sitenizde gezinmesi için yardımcı özellikler ekler.

Önerdiğimiz bir WordPress erişilebilirlik eklentisi WP Accessibility‘dir. Bu eklentinin yapabileceği şeylerden bazıları şunlardır:

• Erişilebilirlik araç çubuğu ekleme
• Temanızın erişilebilirliğe hazır olup olmadığını algılama
• Web sitenizdeki erişilebilirlik özelliklerinin nasıl kullanıldığını takip ederek bunları değerlendirebilirsiniz

Öncelikle eklentiyi WordPress’e yüklemeniz ve etkinleştirmeniz gerekir.

Etkinleştirmenin ardından, eklentiyi yapılandırmak için Ayarlar ” WP Erişilebilirlik bölümüne gitmeniz gerekir.

Ayarlar sayfasının her bir bölümüne bir göz atalım.

Atlama Bağlantıları Ekle

Eklenti ayarlarının ilk bölümünde, web sitenizde atlama bağlantılarını kullanabilirsiniz ve bu ayar varsayılan olarak etkindir. Atlama bağlantısı, kullanıcıların doğrudan bir yazının veya sayfanın içerik bölümüne atlamasına olanak tanır.

Bu, ekran okuyucu kullanan kişiler için son derece yararlı bir özelliktir. Atlama bağlantısı olmadan, içerik kısmına ulaşmadan önce navigasyon menüleriniz de dahil olmak üzere web sitenizde görüntülenen her şeyi dinlemeleri gerekecektir.

Temanız zaten atlama bağlantıları kullanıyorsa, bunu onaylayan bir bildirim görürsünüz.

Erişilebilirlik Araç Çubuğu

WP Erişilebilirlik eklentisi bir erişilebilirlik araç çubuğu ile birlikte gelir.

Etkinleştirdiğinizde, eklenti web sitenize kullanıcıların yazı tiplerini yeniden boyutlandırabileceği veya sitenizi yüksek kontrastlı renk modunda görüntüleyebileceği bir araç çubuğu ekleyecektir.

Bu, kullanıcılarınızın sayfayı okumayı kolaylaştırmak için ihtiyaç duydukları seçenekleri seçmelerini sağlar.

Araç çubuğunu etkinleştirmek için ‘Yazı tipi boyutu’ ve ‘Kontrast’ onay kutularını işaretlemeniz yeterlidir.

Araç çubuğunun yazı tipi boyutunu ve yerleşimini kontrol edebileceğiniz ayarlar da vardır.

Bu ayarlarda değişiklik yaparsanız, ayarlarınızı kaydetmek için ‘Araç Çubuğu Ayarlarını Güncelle’ düğmesine tıkladığınızdan emin olun.

Test web sitemizde araç çubuğu bu şekilde görünüyor.

Erişilebilirlik Düzeltmeleri

WP Accessibility, sitenizdeki olası sorunları çözebilecek çeşitli erişilebilirlik düzeltmeleri de sağlar. Her seçeneği gözden geçirebilir ve ihtiyacınız olup olmadığını görebilirsiniz.

Önerilen bazı ayarlar varsayılan olarak işaretlenecektir. Bu seçenekler bağlantıların yeni pencerelerde açılmasını önler, boş bir arama gönderimi yaptığınızda bir hata görüntüler ve klavyede gezinmeyi kolaylaştırmak için gerekli olmayan yerlerde tabindex HTML niteliğini kaldırır.

Bu özelliklerden bazılarını zaten etkinleştirmiş olan erişilebilirlik dostu bir tema kullanıyorsanız, bölümün üst kısmında bunu onaylayan bir mesaj göreceksiniz.

Değişikliklerinizi kaydetmek için ‘Çeşitli Ayarları Güncelle’ düğmesine tıklamayı unutmayın.

Erişilebilirlik Özellikleri

Eklenti ayrıca içeriğinizi daha erişilebilir hale getirmenize yardımcı olacak birkaç seçenek sunar.

İlk ayar grubu, ekran okuyucu kullananlar için görüntülerin kullanımını kolaylaştırır.

Gönderilerinizin ve sayfalarınızın üst kısmında özetleri görüntüleme seçenekleri de vardır. Bu, ekran okuyucuları olan kişilerin makalenin tamamını dinlemeye karar vermeden önce içeriğin bir özetini duymalarını sağlar.

Bu seçeneklerden herhangi birini değiştirirseniz, lütfen ‘Erişilebilirlik Özelliklerini Güncelle’ düğmesine tıklamayı unutmayın.

Test ve Yönetici Deneyimi

Daha sonra, WordPress yönetici alanınızın erişilebilirliğini artırmanıza ve test etmenize yardımcı olacak bazı ayarlar bulacaksınız.

Bu bölüm daha tekniktir, bu nedenle kutuları işaretlemeden önce eklentinin belgelerine başvurduğunuzdan emin olun.

Değişikliklerinizi kaydetmek için ‘Erişilebilirlik Araçlarını Güncelle’ düğmesine tıkladığınızdan emin olun.

Başlık Niteliklerini Kaldır

Bu bölüm, etiket bulutlarından başlık niteliğini kaldırmanıza olanak tanır.

Başlık niteliği bazı erişilebilirlik uzmanları tarafından işe yaramaz olarak kabul edilir. Çoğu ekran okuyucu genellikle başlık niteliğini görmezden gelir ve bunun yerine bağlantı metnini okur.

Bu ayar varsayılan olarak etkindir, ancak değiştirirseniz ‘Başlık Özellikleri Ayarlarını Güncelle’ düğmesine tıkladığınızdan emin olun.

4. Web Sitenizin Renk Kontrastını Kontrol Edin

Renk kontrastı, metin rengi ile arka plan rengi arasındaki fark anlamına gelir. Bu, web sitesi erişilebilirliğinin çok önemli bir parçasıdır çünkü web sitesi içeriğinizin görme bozukluğu ve renk körlüğü olan kişiler için ne kadar okunabilir olduğunu etkileyebilir.

Web erişilebilirlik standartlarını karşılamak için, normal metnin en az 4,5’e 1 gibi yüksek bir kontrasta sahip olması gerekir. Bu, metnin arka plandan 4,5 kat daha parlak olması gerektiği anlamına gelir.

Daha büyük metinler için gereksinim biraz daha azdır, 3’e 1. Bu, biraz daha düşük kontrastın kabul edilebilir olduğu anlamına gelir. Aynı kural grafikler ve form giriş kenarlıkları gibi kullanıcı arayüzü öğeleri için de geçerlidir.

WP Erişilebilirlik eklentisi, kullanabileceğiniz yerleşik bir renk kontrastı denetleyicisine sahiptir.

Eklenti ayarlarında, Renk Kontrast Test Cihazı bölümüne gidin ve bir ön plan rengi (metniniz için kullanacağınız renk) ve arka plan rengini seçin.

Ardından, ‘Renk Kontrastını Kontrol Et’e tıklayın.

Eklenti daha sonra renklerin kontrast testini geçip geçmediğini size söyleyecektir.

İşte sonuç böyle görünüyor:

Alternatif olarak, ücretsiz WebAIM Kontrast Denetleyicisini kullanabilirsiniz. Önceki araçta olduğu gibi, yalnızca bir ön plan rengi ve bir arka plan rengi seçmeniz gerekecektir.

Bu araç sadece renk kontrastınızı test etmekle kalmaz, aynı zamanda renklerin normal ve büyük metinlerin yanı sıra grafik nesneler ve kullanıcı arayüzü bileşenleri olarak nasıl görünebileceğini de gösterir.

Daha fazla ayrıntı için WordPress web siteniz için mükemmel renk düzenini nasıl seçeceğinize ilişkin kılavuzumuza göz atabilirsiniz.

5. Görsellere Alternatif Metin Ekleme

Arama motorları için yararlı olmasının yanı sıra, alt metin, ekran okuyucuların görme engelli bireylere görüntüleri tanımlamasına yardımcı olur.

Daha önce, WordPress’in alt metin eklemek için yerleşik bir özelliğe sahip olduğundan bahsetmiştik. İşlem oldukça kolaydır ve kurulumla ilgili her şeyi aşağıdaki kılavuzlarda okuyabilirsiniz:

• Yeni Başlayanlar İçin Görsel SEO Rehberi – Görselleri Arama Motorları İçin Optimize Edin
• WordPress’te Resim Alt Metni ve Resim Başlığı – Aradaki Fark Nedir?

6. Tüm Form Alanlarına Etiket Ekleme

Web sitenizde formlar varsa, her form öğesi için uygun etiketleri kullandığınızdan emin olmak isteyeceksiniz. Buna form alanları, düğmeler, menüler vb. dahildir.

WCAG, yardımcı araçların her bir öğeyi tanımlamasını ve kullanıcılara bu öğeler hakkında bilgi aktarmasını kolaylaştırmak için tüm form öğelerine etiket eklenmesini önermektedir.

Ayrıca, net ve açıklayıcı etiketler eklemek iyi bir web tasarım uygulamasıdır. Kullanıcıların her bir form alanının ne işe yaradığını anlamalarına yardımcı olarak, kullanıcı hatalarının ortaya çıkma olasılığı azalır ve daha fazla kişi formlarını gönderebilir.

Harika formları nasıl oluşturacağınızdan emin değilseniz, WPForms‘a göz atmanızı öneririz. Erişilebilirlik için iyileştirme de dahil olmak üzere formları tam ihtiyaçlarınıza göre özelleştirmeyi çok kolay hale getiren en iyi WordPress form oluşturucusudur.

WPForms hakkında daha fazla bilgiyi WPForms incelememizde okuyabilirsiniz. Ayrıca, WordPress’te nasıl form oluşturulacağına ilişkin bu kılavuzlara da göz atın:

• WordPress’te İletişim Formu Nasıl Oluşturulur (Adım Adım)
• WordPress’te Rezervasyon Formu Nasıl Oluşturulur
• WordPress’te Özel Kullanıcı Kayıt Formu Nasıl Oluşturulur?

7. İçeriğinizde Uygun Başlık Etiketleri Kullanın

Başlık etiketleri, bir web sayfasının başlıklarını veya alt başlıklarını işaretleyebilen HTML etiketleridir. Bu şekilde, içeriğiniz çok daha düzenli ve takip edilmesi daha kolay olur.

Bu etiketler ayrıca ekran okuyucular gibi araçların görme engelli kullanıcılar için gezilebilir bir taslak oluşturmasına yardımcı olur. Bu sayede bölümler arasında geçiş yapabilecek ve içeriğinizin genel yapısını anlayabileceklerdir.

Başlık etiketlerinden nasıl yararlanacağınızdan emin değilseniz, WordPress‘te başlık etiketlerinin nasıl doğru şekilde kullanılacağına ilişkin kılavuzumuzu okuyabilirsiniz.

8. Açıklayıcı Bağlantı Metni Kullanın

Bağlantı veya link metni temel olarak bir linkteki tıklanabilir kelimeler veya ifadelerdir. Genellikle hangi metnin bağlantılı olduğunu anlayabilirsiniz çünkü farklı bir renkte olacaktır.

Genellikle blog yazarları ziyaretçileri bir sayfaya yönlendirmek için ‘buraya tıklayın’ veya ‘daha fazlasını okuyun’ bağlantı metnini kullanırlar.

Bu erişilebilirlik açısından iyi bir uygulama değildir çünkü bağlantının nereye gittiği hakkında herhangi bir bilgi vermez. Bu da yardımcı teknolojileri kullanan kişilerin bağlantının amacını anlamasını zorlaştırır.

Bu nedenle bunun yerine açıklayıcı bağlantı metni kullanmak en iyisidir. Bu, bağlantıya tıkladığınızda içeriğin ne hakkında olduğunu açıklayan kelimeler kullanmak anlamına gelir.

Örneğin, şu cümlede en iyi WordPress barındırma hakkında bir makaleye bağlantı eklemek istediğinizi varsayalım: ‘Piyasadaki en iyi WordPress barındırma hizmetleri hakkında bilgi edinmek için bu kılavuzu izleyin’.

Bağlantıyı ‘Bu kılavuzu takip edin’ cümlesine veya bu cümlenin herhangi bir yerine eklemek yerine, ‘en iyi WordPress barındırma hizmetleri‘ne eklemelisiniz. Bu şekilde, kullanıcı bağlantılı içerikte ne bulacağına dair genel bir bakış elde eder

Bağlantılar ve bağlantı metni hakkında daha fazla bilgi için WordPress’te bağlantı oluşturmaya yeni başlayanlar için hazırladığımız kılavuza bakın.

9. Video ve Ses İçeriğine Altyazı veya Transkript Ekleme

İşitme engelli kullanıcılar için en büyük zorluklardan biri videolarda ve seslerde konuşulan içeriği anlayamamaktır. Bu nedenle birçok video içerik oluşturucusu ve podcast yayıncısı altyazı veya transkript ekler.

WPBeginner olarak, sitenizi yavaşlatabileceği için kendi web sitenize video yüklemenizi kesinlikle önermiyoruz. Bunun yerine, her ikisi de altyazı eklemek için yerleşik araçlara sahip olan YouTube veya Vimeo gibi hizmetleri kullanmak en iyisidir.

Ses içeriğine gelince, konuşmayı kolayca metne dönüştürmek için bir transkripsiyon hizmeti kullanmayı düşünebilirsiniz. Bu şekilde, sesli içeriğinizin yazılı bir versiyonunu manuel olarak oluşturmanıza gerek kalmayacaktır.

Daha fazla bilgi için en iyi transkripsiyon hizmetleri listemize göz atın.

10. Kullanılabilirlik ve Erişilebilirlik Testi Yapın

Bu kılavuzdaki tüm ipuçlarını uyguladıysanız, son adım WordPress web sitenizde kullanılabilirlik ve erişilebilirlik testi yapmaktır.

Bu test, kalan sorunları belirlemenize ve web sitenizi kullanıcı dostu ve herkes için erişilebilir hale getirmenize yardımcı olabilir.

WebAIM, ücretsiz olarak kullanabileceğiniz bir Web Erişilebilirlik Değerlendirme Aracına (WAVE) sahiptir.

Web sitenizin alan adını yazmanız yeterlidir; araç erişilebilirlikle ilgili sorunları sizin için belirleyecektir.

Ayrıca bir erişilebilirlik tarayıcısı da kullanabilirsiniz. Equalize Digital tarafından sunulan Accessibility Checker‘a göz atmanızı öneririz. Ayrıca web sitenizdeki sınırsız gönderi ve sayfayı taramak için ücretsiz bir eklenti sürümü ile birlikte gelir.

Eklentiyi kurduktan sonra, sayfanızın veya yazınızın blok editörüne gidebilirsiniz. Meta kutu bölümüne ilerlerseniz, erişilebilirlik sorunlarınızı tanımlayan bir Erişilebilirlik Denetleyicisi bulacaksınız.

Bir başka seçenek de, web sitenizin iyi bir kullanıcı deneyimine sahip olup olmadığını kontrol etmek anlamına gelen bir UX denetimi gerçekleştirmektir. Daha fazla bilgi için UX denetimi kılavuzumuza göz atmanız yeterli.

Son olarak, kullanıcılarınızdan geri bildirim istemenizi öneririz. Testler size sonuç getirebilir ancak sitenizin erişilebilirlik özelliklerini kullanan gerçek ziyaretçilerden geri bildirim almak çok daha doğru bilgiler sağlayabilir.

UserFeedback bu iş için en iyi eklentidir. Kullanıcılarınızın görüş ve düşüncelerini toplamak için anketler oluşturmanızı sağlar. Web sitesi tasarımı geri bildirimi için şablonlar da vardır, böylece anketi sıfırdan oluşturmanız gerekmez.

Daha fazla bilgi için WordPress’te web sitesi tasarımı geri bildirimi alma hakkındaki kılavuzumuza bakın.

WordPress Erişilebilirliği Hakkında Uzman Kılavuzları

Artık sitenizde erişilebilirliği nasıl geliştireceğinizi bildiğinize göre, WordPress erişilebilirlik sorunlarıyla ilgili diğer bazı kılavuzları görmek isteyebilirsiniz:

• Erişilebilirlik Modunda WordPress Widget’ları Nasıl Eklenir?
• WordPress Siteniz İçin Mükemmel Bir Renk Şeması Nasıl Seçilir?
• Erişilebilirlik için WordPress’te Yazı Tipi Yeniden Boyutlandırma Nasıl Eklenir
• WordPress’te Görsellere Kolayca Başlık Özniteliği Ekleme
• WordPress’te Metin Nasıl Vurgulanır (Başlangıç Kılavuzu)
• WordPress’te Resim Alt Metni ve Resim Başlığı – Aradaki Fark Nedir?

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.