Divi 5 ile erişilebilirlik özelliklerini test etmek

Erişilebilirlik özellikleri artık Divi 5 ile tam olarak uyumludur, bu da inşaatçının hemen içine ARIA rolleri, etiketler ve diğer ekran okuyucu yardımcılarını eklemek için kodsuz bir yol sunar. Divi 5 ile çalışıyorsanız, iş akışınızı veya tasarımınızı değiştirmeden sitenize erişilebilirlik oluşturmanın en kolay yoludur.

Avrupa Erişilebilirlik Yasası 28 Haziran'da yürürlüğe girer ve Google giderek daha fazla erişilebilirlik uygulamalarını tercih ederek, şimdi öne geçme zamanı. Erişilebilirlik özelliklerinin nasıl çalıştığı ve sitenizin modern erişilebilirlik standartlarını karşılamasına nasıl yardımcı olduğu aşağıda açıklanmıştır!

Divi 5 için erişilebilirlik özellikleri

Erişilebilirlik Özellikleri, Web sayfalarınıza doğrudan Divi Builder'dan herhangi bir kod yazmadan ARIA rolleri, etiketler ve diğer erişilebilirlik yardımcılarını eklemenizi sağlayan bir Divi eklentisidir. ARIA (Erişilebilir Zengin İnternet Uygulamaları) Özellikleri, özellikle Divi 5'te özel düzenler oluştururken, kendi başlarına yeterli bağlam sağlamayan öğelere anlam eklemenize yardımcı olur.

Örneğin, harekete geçirici bir çağrı oluşturmak için bir başlık veya bir düğme modülünü görsel olarak şekillendirmek için bir metin modülü kullanırsanız, ekran okuyucuları rollerini otomatik olarak anlamaz. ARIA rolleri ve etiketleri, her bir öğenin ne olduğunu ve yardımcı teknolojilerin görsel tasarımı değiştirmeden nasıl yorumlaması gerektiğini tanımlamanızı sağlar. Bu, Divi 5 sitenizin hem erişilebilir hem de esnek olmasını sağlar.

Eklentiyi yükledikten sonra, bölümlerinize, satırlarınıza, modüllerinize ve diğer divi öğelerinize otomatik olarak özel giriş alanları ekler. (ARIA alanlarına erişmek için herhangi bir öğeye tıklayın ve gelişmiş sekmesine gidin.)

Şimdi, Rolleri tanımlayabilir, ARIA etiketleri ekleyebilir ve doğrudan Divi Builder'dan her öğe için ekran okuyucu desteğini geliştirebilirsiniz. Erişilebilirlik özellikleri Divi iş akışınıza sorunsuz bir şekilde uyuyor ve yılda sadece 19 $ maliyeti. Size erişilebilir web siteleri oluşturmak için basit ve uygun fiyatlı bir yol sunar.

Erişilebilirlik özellikleri alın

Erişilebilirlik neden artık isteğe bağlı değil

Erişilebilirlik eskiden erteleyebileceğiniz bir şeydi, ama artık değil. Şimdi yasal güvenliğinizi, arama performansınızı ve kullanıcılarınızın güvenini etkiler.

Sitenize erişilemezse, sadece geride değilsiniz - risk altındasınız. İşte nedeni:

• Yasal eylemler yükseliyor: 28 Haziran 2025'ten itibaren Avrupa Erişilebilirlik Yasası uygulanacak. Web siteniz erişilebilir değilse ve AB'deki kişiler kullanırsa, para cezaları veya diğer cezalarla karşılaşabilirsiniz. Yasa, 10'dan fazla çalışanı olan ve yılda 2 milyon € 'dan fazla işletme kazanan çoğu işletme için geçerlidir, ancak daha küçük olanlar da bunu takip etmeye teşvik edilir, çünkü…
• Erişilebilirlik sıralamalarınızı etkileyebilir: Erişilebilirlik bir sıralama faktörü olmasa da, erişilebilir birçok özellik SEO'nuzu dolaylı olarak etkileyebilir. Alt metin, uygun başlık yapıları ve tanımlayıcı etiketler gibi şeyler, sitenizi hem kullanıcıların hem de arama motorlarının anlamasını kolaylaştırır. Sitenizde gezinmek zorsa, arama sonuçlarında sessizce geride kalabilirsiniz.
• Erişilemez siteler kullanıcıları uzaklaştırır: Sitenize erişilemiyorsa, engelli kişiler bunu kullanamaz. Hızlı bir şekilde ayrıldıklarında, motorları arama ve sıralamalarınıza zarar vermek için kötü bir kullanıcı deneyimine işaret edebilir. Net yapı, okunabilir yazı tipleri ve kolay klavye gezinmesi gibi değişiklikler sitenizi herkes için kullanılabilir hale getirir.

Erişilebilirliğin yalnızca büyük işletmeler için önemli olduğunu varsaymak kolaydır, ancak daha küçük bir marka olsanız bile sizi görmezden gelmek yine de size zarar verebilir.

Divi 5'te erişilebilirlik özelliklerini ayarlama

Bu bölüm, Divi 5 web sitenizdeki erişilebilirlik özelliklerine araçlar yükleyerek ve erişerek size yürür.

Eklentiyi yükleme

Erişilebilirlik özellikleri satın aldıktan sonra, eklentinin zip dosyasını alırsınız. WordPress'in eklentilerine yükleyin> Eklenti Ekle> Eklentiyi Yükle.

Şimdi, zip dosyasını ekleyin ve şimdi yükleyin.

Son olarak, etkinleştirin .

Etkinleştirildikten sonra, her öğenin gelişmiş sekmesine eklenen ekstra ARIA alanlarını fark edeceksiniz.

Artık bu erişilebilirlik özelliklerini sayfanızdaki her öğeye doğrudan Divi Builder'dan kolayca ekleyebilirsiniz. Bunu bir dakika içinde ele alacağız. Bundan önce, erişilebilirlik özellikleri kontrol panelinde mevcut olan tüm seçenekleri hızlı bir şekilde gözden geçirelim.

Erişilebilirlik Özellikleri İzlenecek Yollar

Eklenti Divi sitenizde etkin olduğunda, WordPress kenar çubuğunuza Erişilebilirlik sekmesi eklenir. Dört sekme olan gösterge tablonuza erişmek için üzerine tıklayın : yönetici, modüller, öğeler ve ürünler.

Her sekmenin seçeneklerini gözden geçirelim:

Yönetici sekmesi

Bu sekme, aboneliğinizi yönetme (desteği etkinleştiren) , eklenti durumunu kontrol etme, kaldırma hakkındaki verileri silip silmeyeceğini ve tüm ayarları varsayılan olarak sıfırlama gibi hesap düzeyinde denetimler sağlar.

Modüller sekmesi

Divi modüllerinizde hangi ARIA özniteliklerini etkinleştireceğine karar vermenizi sağlar. Gelişmiş sekmesinde yalnızca seçilen seçenekler alan olarak görünür. Hepsini açık tutmak isteyebilirsiniz.

Her modülün erişilebilirlik özelliklerine ihtiyacı yoktur. Örneğin, ekran okuyucuları için anlamlı içerik eklemedikleri için, bölücüler, animasyonlu simgeler veya resim galerileri gibi dekoratif öğeleri güvenle atlayabilirsiniz.

Bir modülü hariç tutmak için, uyumluluk bölümüne modül sümüğünü (ET_PB_Image gibi) girin. Bu, eklentiye ARIA alanları eklerken atlamasını ve yalnızca gerçekten erişilebilirlik desteğine ihtiyaç duyan modüllere odaklanmasını söyler.

Elementler sekmesi

Web sitenizin bazı bölümleri Divi modülleri ile oluşturulmamıştır. Temanızdan, diğer eklentilerden veya düz HTML'den gelebilirler. Elementler sekmesi, CSS seçicilerini kullanarak sitenizin bu bölümlerine ARIA öznitelikleri eklemenizi sağlar. Divi Builder'ın içinde oluşturulmayan menüler, simgeler, düğmeler ve form alanları gibi küresel öğeleri dahil etmek isteyebilirsiniz.

• Aria Main: Ekran okuyucularına menüleri veya kenar çubuklarını atlayabilmeleri için ana içeriğinizin nereden başladığını söyler.
• Aria Hidden: Dekoratif unsurları gizler, böylece yardımcı teknoloji onları yüksek sesle okumaz.
• ARIA Link: Bağlantılar olarak gerçek bağlantılar olmayan tıklanabilir öğeleri işaretler. Bu, ekran okuyucuların bunları doğru tanımlamasına yardımcı olur.
• ARIA düğmesi: Düğmeler gibi hareket eden simgeleri veya stilli metin bağlantılarına düğme rolleri ekler.
• ARIA Gerekli: HTML bunu söylemese bile, gerektiği gibi özel form alanlarını işaretler.
• Sekme Dizin: Sadece klavyeye sahip gezinme için yararlı olan sekme anahtarını kullanarak önemli öğeleri ulaşılabilir hale getirir.

Her ayar, CSS seçicilerini kullanarak bu rolleri eklemenizi veya kaldırmanızı sağlar. Nereden başlayacağınızdan emin değilseniz, Aria Main ve Aria düğmesi ilk seçimlerdir, genellikle kaçırılır ve kurulumu kolaydır.

Ürünler sekmesinde aynı yaratıcıdan diğer ürünler bulunur.

Divi 5 içinde erişilebilirlik özelliklerini kullanma

Kurulumdan sonra gerçek çalışma inşaatçının içinde gerçekleşir. Her Aria alanının bir amacı vardır. Ne yaptığına, ne zaman kullanacağına ve gerçek düzenlerde erişilebilirliğe nasıl yardımcı olduğuna bakalım.

1. ARIA rolü olan öğelere rol atayın

ARIA rolü alanı, kodda belirgin olmayabilecek bir öğeye bir amaç atamanızı sağlar. Örneğin, harekete geçirici bir çağrı oluşturmak için bir bulanıklık modülü kullandıysanız, ekran okuyucuları bunu otomatik olarak bir düğme olarak tanımaz. Ses komutları veya klavye kısayollarıyla gezinen kullanıcılar için işlevini netleştirmek için rol düğmesini kendinize atamanız gerekir.

Aşağıdaki bu durumda olduğu gibi, bu bulanıklık bir düğme içerir.

ARIA rolü eklemek için seçeneğe geçin ve şu değerleri atayın:

• Widget rolleri olarak ARIA Rol Türü (Bu, düğmeler ve kaydırıcılar gibi etkileşimli öğelerin yaşadığı kategoridir.)
• Düğme olarak Aria Rol Değeri
• ARIA Rol Seçici AS .ET_PB_BUTTON (Divi'nin düğme modülleri için kullandığı sınıftır.)

2. ARIA etiketli ekran okuyucuları için net etiket ekleyin

ARIA rolü yardımcı teknolojilere bir unsurun ne olduğunu söylerken, Aria etiketi ne yaptığını açıklıyor. Bu, özellikle bir öğenin bir simge, özel tarz bir düğme veya etkileşimli görünmek için tasarlanmış ancak yüksek sesle söylemediği herhangi bir şey gibi görünür bir metin olmadığında kullanışlıdır. Aynı örneği kullanarak parçalayalım.

Rolü zaten ekledik, ancak düğme metni “Şimdi bağış yapın” diyor. Bu görsel kullanıcılar için iyidir, ancak ekran okuyucuları kullanan kişilerin daha fazla bağlama ihtiyacı olabilir, çünkü düğme birden çok kez görünür.

Bu düğmeye bir etiket atamak için, ARIA etiketine geçin ve kısa bir etiket ekleyin.

Şimdi, düğme yine de ekranda “Şimdi bağış yapın” diyecektir, ancak ekran okuyucuları, kullanıcıların düğmenin tam olarak ne yaptığını ve nereye götürdüğünü anlamalarına yardımcı olmak için tam etiketi okuyacaktır.

3. ARIA Tanımı ile Ekstra Bağlam Sağlayın

ARIA Açıklama, ekran okuyucularına bir eleman hakkında bir etiketin açıklayabileceğinden daha fazla ayrıntı verir. Bir etiket bir şeyin ne olduğunu söylerken, bir açıklama neden önemli olduğunu açıklar.

Örneğin, bir sayfada, her biri kıyı temizliği, deniz eğitimi veya habitat restorasyonu gibi farklı bir neden altına yerleştirilen birden fazla "Şimdi Bağışla" düğmeniz olduğunu varsayalım. Bir ekran okuyucu kullanıcısı doğrudan düğmeye girebilir ve yakındaki içeriği kaçırabilir. Aria açıklaması burada yardımcı olur.

İlk kartı alalım: kıyı temizliği. Daha fazla bağlam eklemek için, Aria Açıklama metni olarak “Bu bağış okyanus temizliğini ve vahşi yaşam korumasını destekler” gibi bir açıklama ekleyebilirsiniz.

Diğer düğmeler için de aynısını yapın, böylece hepsi “şimdi bağış” derler, ekran okuyucuları her biri için farklı açıklamalar duyuracaklar. Bu, kullanıcılara ekranda gördüklerini değiştirmeden tam bağlamı verir.

4. Dekoratif öğeleri ekran okuyucularından gizle

Aria Hidden, bir simge veya arka plan görüntüsü gibi görsel olarak bir şey göstermek istediğinizde yararlıdır, ancak ekran okuyucularının duyurmasını istemez. Bu, deneyimi yardımcı teknolojiye dayanan kullanıcılar için daha odaklanmış tutar.

Örneğin, martıların fotoğrafı gibi bir kampanyanın önizleme resmini alın. Tasarımı destekler, ancak başlık veya açıklamada bulunanların ötesine yeni bir bilgi eklemez. Burada, ekran okuyucularından gizlemek için Hidden'i kullanabilirsiniz.

5. ARIA detayları ile ek bilgilere bağlantı

ARIA detayları, bir öğeyi diğerine bağlamanızı sağlar, bu da ekstra bilgi verir. Örneğin, bir düğmeyi, düğmenin ne hakkında olduğunu açıklayan yakındaki bir paragrafa bağlayabilirsiniz. Yararlı teknolojilerin, tıklanan öğenin doğrudan bir parçası olmayan daha fazla bağlam okumasını istediğinizde kullanışlıdır.

Deniz Eğitimi bölümünü ele alalım. Paragraf metninin “Şimdi Bağışla” düğmesini tanımlamasını istediğinizi varsayalım. ARIA ayrıntılarını kullanarak düğmeyi paragrafa bağlayabilirsiniz.

İlk olarak, paragrafa benzersiz bir kimlik ekleyin. Açıklamayı içeren metin modülüne tıklayın ve Gelişmiş> CSS Kimliği ve Sınıflarına gidin. Benzersiz kimliğinizi CSS kimlik alanına girin. Deniz-edu'ya girelim.

Artık bu metin modülünün ekran okuyucuların referans verebileceği bir kimliğe sahip.

Ardından, ARIA ayrıntıları özniteliğini düğmeye ekleriz. Düğme modülüne tıklayın ve Gelişmiş> ARIA ayrıntılarına gidin. Kimlik alanına deniz-edu girin.

Bu, yardımcı teknolojilere, düğmenin paragraftaki daha fazla bilgiye “Marine-EDU” kimliğiyle bağlandığını söyler. Aynı düğme metnini farklı yerlerde kullandığınızda da yararlıdır, ancak her biri farklı bir şey ifade eder.

ARIA etiketi, ARIA Description ve Aria ayrıntılarının ekstra bağlam eklediğini fark etmiş olabilirsiniz, bu nedenle ekran okuyucularını karıştırabileceği için bunları aynı öğede birlikte kullanmamak en iyisidir. Zaten sayfada bir şey açıklıyorsanız, yeni bir etiket veya açıklama yazmak yerine bu metne bağlanmak için ARIA ayrıntılarını kullanmayı düşünün.

Erişilebilirlik özelliklerinin, doğrudan Divi Builder'dan ARIA rolleri, etiketler ve diğer temel erişilebilirlik özelliklerini eklemeyi nasıl kolaylaştırdığını gördünüz. Kodlamadan web sitenizi erişilebilir hale getirir.

Erişilebilirlik özellikleri alın

Divi 5 için Ek Divi-Modüllerin Erişilebilirlik Araçları

Erişilebilirlik özellikleri, erişilebilirliğin teknik tarafını ele alır. Ayrıca, daha eksiksiz, kapsayıcı bir çözüm sunmak için klavye gezinmesi ve görsel kontroller gibi ekstra özellikler sunan eklentiler (erişilebilirlik paketinde) ile birlikte gelir.

1. Erişilebilirlik kenar çubuğu

Erişilebilirlik kenar çubuğu, kullanıcıların tarama deneyimlerini özelleştirmelerini sağlayan bir kayan araç çubuğu ekler. Mobilite bozuklukları olan ziyaretçiler yazı tipi boyutlarını ayarlayabilir, yüksek kontrastlı moda geçebilir, gri tonlamayı etkinleştirebilir ve bir klavye kullanarak gezinebilir. Ayrıca sitenizin tasarımına uyacak şekilde özelleştirebilirsiniz.

2. Erişilebilirlik ayarları

Erişilebilirlik ayarları, kullanıcıların sitenizde daha kolay gezinmesine yardımcı olan pratik özellikler ekler. Bunlar arasında daha iyi gezinme için atlama bağlantıları, klavye kullanıcılarının nerede olduklarını görmelerine yardımcı olmak için odak ana hatları ve sitenizin düzenini değiştirmeden kullanılabilirliği artıran diğer ince geliştirmeler bulunur.

Erişilebilirlik paketine göz atın

Divi 5 web sitenizi bugün erişilebilir hale getirin

Erişilebilirlik özellikleri, divi sitenizi daha kapsayıcı hale getirmenin kolay ve görsel bir yolunu sunar. Kodlama yok, geçici çözüm yok - doğrudan oluşturucuya inşa edilmiş doğru araçlar.

Divi 5 ile tamamen uyumludur, aktif olarak desteklenen ve şimdi 28 Haziran'a kadar% 50 indirim. Teklif çalıştığı sürece, kenar çubuğu ve ayarlar da dahil olmak üzere tam erişilebilirlik paketini yılda sadece 36 $ karşılığında alabilirsiniz. Sitenizi herkes için daha iyi hale getirmeye hazırsanız, bu başlamanın en basit yoludur.

Erişilebilirlik Paketi% 50 İndirim Alın