Qode’da WordPress’e güzellik getiriyoruz. Kelimenin tam anlamıyla sloganımız bu. Fakat bu, stili içerikten üstün tuttuğumuz anlamına gelmez. Erişilebilirlik için tasarım önemli bir husustur. İçeriğiniz özellikle engelli insanlara yönelik olsun ya da olmasın, sunduğunuz şeyi takdir edebilecek farklı engelli ziyaretçiler için bir düşünceden kaçınmak asla kötü bir şey olamaz. Bu yazıda, WordPress web sitenizin erişilebilirliğini artırmak için yapabileceğiniz birkaç şeyi tartışacağız. Fakat pirinç meselelere inmeden önce, WordPress’teki erişilebilirlik tasarımı hakkında birkaç söz söyleyelim.

• WordPress Erişilebilirliği Ne Anlama Geliyor?

• Web Sitemin Mevcut Erişilebilirliğini Nasıl Test Edebilirim?

• WordPress’in Temel Yerleşik Erişilebilirlik Özellikleri

• Renk Paletleri

• Erişilebilir Formlar Nasıl Tasarlanır?

• Bir Eklenti Kullanarak WordPress Web Sitenizin Erişilebilirliğini Nasıl Artırırsınız?

WordPress Erişilebilirliği Ne Anlama Geliyor?

Genel olarak web erişilebilirliği, web sitesi tasarımcılarının bilişsel, görsel, işitsel, nörolojik veya diğer engelli kişilerin web sitesini kullanabilmesini sağlamak için adımlar atması anlamına gelir.

Spesifik olarak erişilebilirlik için tasarım yapmak, en azından web sitenizin tüm özelliklerinden yararlanmalarını engelleyebilecek veya hatta en uç durumda içeriğinize erişmelerini engelleyebilecek engelli ziyaretçileri göz önünde bulundurmak anlamına gelir. Bunun özü, erişilebilir tasarımın, farklı özelliklere sahip kişiler için UX-ileri olmak anlamına gelmesidir.

Tasarımdaki en iyi uygulamalar artık erişilebilirliği artırmanıza ve WordPress web sitenizi yardımsız kullanamayan kişiler için kullanımını kolaylaştırmanıza izin veren birkaç teknik içeriyor. Bu durum erişilebilirlik için tasarlamanın yalnızca engelli ziyaretçilerinize fayda sağlayacağı anlamına gelmez. Hatta göz ameliyatı nedeniyle bir kolu kırılmış veya geçici olarak görme kaybı yaşayanlar, bağlantısı çok yavaş olan kişiler veya metinlerini yalnızca sesli biçimde tercih edenler gibi geçici engelleri olan kişilere de fayda sağlayabilir.

Tüm bunlar, erişilebilir tasarımın engelli bir azınlığa hitap etmediği, bunun yerine daha iyi bir genel kullanıcı deneyimi ve hedef kitlede potansiyel bir artış sağladığı anlamına gelir.

Web Sitemin Mevcut Erişilebilirliğini Nasıl Test Edebilirim?

FAE, Achecker veya WAVE gibi çeşitli web tabanlı erişilebilirlik değerlendirme araçlarından birini kullanarak web sayfalarınızı erişilebilirlik açısından test edebilirsiniz. Bunlar arasında WAVE’in en hızlı ve en kullanıcı dostu olduğunu gördük. Raporu almak için web sayfası adresini adres alanına yapıştırmanız ve ok simgesini tıklamanız yeterlidir.

The Guardian’ın uluslararası baskısında yer alan bir makale hakkında bir rapor yayınladık ve simgelerle etiketlendiği için hangi alanların iyileştirilmesi gerektiğini kolayca görebiliriz. Soruna ayrıntılı bir göz atmak için simgeye tıklamanız ve araç ipucunu okumanız yeterlidir. Her sorunu nasıl çözeceğinizi bu şekilde bileceksiniz.

WAVE geliştiricileri, Chrome ve Firefox için, WAVE sunucularına herhangi bir veri göndermeden bir erişilebilirlik raporu döndürmek için kullanabileceğiniz ve mümkün olduğunca güvenli hale getiren uzantılar da sağlamıştır.

WordPress’in Temel Yerleşik Erişilebilirlik Özellikleri

WordPress geliştiricileri, tüm yeni kodlar için erişilebilirlik standartları ve kodlayıcılar için kod örnekleri içeren bir en iyi uygulamalar el kitabı oluşturdu. Fakat web sitenizi daha erişilebilir kılmak için nasıl kod yazacağınızı bilmenize gerek yok.

Başlıklar

Örneğin iyi bir başlık yapısı, ekran okuyucu gibi yazılımlar kullanan kişiler için çok önemlidir. Metni büyük ve kalın yapmak, ekran okuyucunun metnin bir başlık olduğunu anlamasını sağlamaz. Gutenberg’de bir Başlık bloğu, Elementor’da bir Başlık öğesi veya aşağıdaki gibi başlık etiketleri kullanın:

Klasik düzenleyicide. Başlık 1, ana sayfa Başlığıdır ve başka hiçbir şey için kullanılmamalıdır.

Metnin iç yapısı, seviye atlamadan 2’den 6’ya kadar başlıklar kullanılarak alt bölümlere ayrılmalıdır. Hatta başlıklara bağlantılar gibi herhangi bir ek işlevsellik eklemekten kaçınmalısınız. Tersine, başlıkları yalnızca estetik amaçlı kullanmamalısınız. Yazı tipi boyutu ve stili bunun içindir. İyi bir başlık yapısı, yalnızca ekran okuyucuları olan kullanıcılara yardımcı olmakla kalmaz, aynı zamanda daha iyi bir SEO puanı anlamına gelir.

Bağlantılar

Bağlantı oluştururken, bağlantının ne olduğu ve ne olmadığı bağlamından açıkça anlaşıldığından emin olmalısınız. Bir bağlantı başka bir metinle çevrelenmişse, en iyi uygulamalar altının çizilmesi ve farklı bir renkte olması gerektiği anlamına gelir.

Görsellere Alt Nitelikleri Ekleme

Görüntülere alt nitelikleri eklemek, onları ekran okuyucu yazılımlar için “okunabilir” hale getirir ve bunu yapmak çok kolaydır. Tek yapmanız gereken medya kitaplığınızdaki herhangi bir resme erişmek.

Sağ taraftaki menüde Alt metin kutusunu bulacaksınız. Bizim durumumuzda tamamen dekoratif amaçlı bir manzara fotoğrafı olan ve basit bir açıklamadan başka bir şey gerektirmeyen görüntünün anlamlı bir tanımını girin.

Bir web sitesi okuyucusu kullanan bir kişi artık resmin metinsel açıklamasına sahip olacaktır. Medya dosyalarınızın bu işlevi gözden kaçırmamanız gereken bir şeydir – SEO puanınızı etkileyebilir. Daha fazla bilgi edinmek istiyorsanız, alternatif metin ve resim başlıklarına yönelik kapsamlı bir rehberimiz var.

Renk Paletleri

Bazı renk paletleri, zayıf görme, renk körlüğü ve benzeri rahatsızlıklardan muzdarip kullanıcılar için sorun yaratabilir. Genel olarak konuşursak, ne kadar fazla kontrast o kadar iyidir. Fakat çok fazla kontrast hassas gözleri olan kişiler için sorunlara neden olabilir. Bu yalnızca metin ve arka plan için değil, aynı zamanda öğeler (düğmeler, simgeler, menüler ve diğerleri gibi) ve üzerine gelme efektleri için de geçerlidir. WordPress’te metin renklerini değiştirme hakkında daha fazla bilgi için kapsamlı kılavuzumuza göz atın.

Önerilen arka plan:ön plan parlaklık kontrast oranı normal metin için 4,5:1 veya büyük metin için 3:1’dir. WebAIM kontrast denetleyicisi gibi kontrast oranlarınızı kontrol etmek için kullanabileceğiniz çok sayıda araç vardır. Kapsamlı bir araç olan WAVE, web sitenizin tasarımındaki zıtlık sorunlarını da vurgulayacaktır.

Erişilebilir Formlar Nasıl Tasarlanır?

Formlar, web etkileşiminin önemli bir parçasıdır. Onları daha erişilebilir hale getirmek için yapabileceğiniz birkaç şey var.

İlk olarak iyi etiketleme önemlidir. Tüm alanlarınızı doğru ve net bir şekilde etiketleyin. İkinci olarak ziyaretçilerinizin formlara girmesi gereken metin örnekleri olan yer tutucu metni kullanın. Örneğin bir URL bekliyorsanız yer tutucu olarak www.yourwebsite.com gibi bir şey kullanın. Son olarak bir formun nasıl doldurulacağına ilişkin eksiksiz bir talimat seti, görme engelliler için çok yardımcı olabilir.

Bir Eklenti Kullanarak WordPress Web Sitenizin Erişilebilirliğini Nasıl Artırırsınız?

WordPress web sitelerinin erişilebilirlikle ilgili bazı yaygın sorunlarını çözmenize yardımcı olacak bir dizi aracın olması şaşırtıcı değildir. Potansiyel olarak en kullanışlı bulduğumuz eklenti WP Erişilebilirlik. Sizi bazı önemli özelliklerine yönlendireceğiz.

Eklentiyi kurup etkinleştirdikten sonra yapılandırmanız gerekir. Kontrol panelinizdeki Yüklü Eklentiler ekranından Erişilebilirlik Ayarlarına gidin.

Web sitenizi web sitesi okuyucuları için daha erişilebilir hale getirmek için atlama bağlantıları ekleyebilirsiniz. Atlama bağlantıları, okuyucuların önce tüm menüleri ve başlık verilerini okumak yerine içeriğe odaklanmasını sağlar. Atlama bağlantılarını yapılandırmak biraz kod bilgisi gerektirir, bu nedenle burada ayrıntılara girmeyeceğiz. Kullanıcılarınıza, gereksiz içeriği atlamak ve doğrudan konunun özüne gitmek için kullanabilecekleri bir düğme sağlar. Bağlantının ziyaretçinizi götürmesini istediğiniz yere bir kimlik özelliği atamanız yeterlidir.

Daha sonra Erişilebilirlik Araç Çubuğu Ayarları var. Yazı tipi boyutu ayarlama ve kontrast değiştirme özelliğine sahip Erişilebilirlik Ekle araç çubuğunu işaretlerseniz, kullanıcınız ekranının yan tarafında bir araç çubuğu görecektir.

Bu durum web sitenizin yüksek kontrastlı bir sürümünü görüntülemek için kullanabilirler…

…veya ana yazı tipini büyütmek için.

Araç çubuğu ayarlarının ayrıntılarına girmeyeceğiz. Fakat ziyaretçileriniz için etkinleştirmeden önce test etmek isteyebileceğiniz birkaç seçenek var.

Daha sonra Çeşitli Ayarlar bölümünüz var.

Bunların her biri arasında ayrı ayrı dolaşabilir ve hangilerinin web siteniz için en iyi sonucu verdiğini görebilirsiniz. Örneğin web siteniz bir RTL (sağdan sola) metin dili kullanıyor olabilir – eklenti ve web sitesi okuyucusunun bunu bilmesi gerekir. Resimlerinizin daha uzun açıklamaları olmasını isteyebilirsiniz ve bunun için de bir seçenek var.

Bu onay kutularından üçü varsayılan olarak işaretlidir: bağlantılar hedef özelliği taşımaz, arama alanı bir dize içermediğinde web sitesi bir arama hatası verir ve tabindex odaklanılabilir öğelerden kaldırılır.

Daha sonra Başlık Niteliklerini Kaldır bölümüne sahipsiniz. Bu durum web sitesi okuyucusuna düzendeki bazı öğelerin başlık olmadığını söylemeye yarar. Bunu gözden geçirmenizi ve ihtiyaç duymayan her şeyden başlık özelliğini kaldırmanızı öneririz.

Hatta kullanışlı bir kontrast kontrol aracınız var. Kullandığınız renkleri seçin veya onaltılık kodlarını uygun alanlara yapıştırın ve kontrast oranlarınızın ihtiyacınız olan şey olup olmadığını kontrol edin.

Konu Özeti

Gösterdiğimiz gibi, web sitenizi daha erişilebilir hale getirmek için yapabileceğiniz pek çok şey var. Erişilebilir tasarımı yalnızca bir azınlığı barındırıyormuş gibi düşünme tuzağından kaçının – aslında yaptığınız tek şey, potansiyel olarak büyük getiriler elde etmek için yalnızca biraz daha fazla zaman ve çaba harcayarak daha geniş bir ziyaretçi yelpazesine hitap etmektir. Bu tekniklerden bazılarının SEO puanınızı önemli ölçüde artırabileceğinden bahsetmiyorum bile. Neden bundan faydalanmak istemiyorsun?