CMS: Erişilebilirlik En İyi Uygulamaları
11 dk.
Bu makalede
- CMS alt metin en iyi uygulamaları
- Dekoratif olmayan görüntüler için
- Dekoratif görüntüler için
- Tıklanabilir düğme işlevi gören görüntüler için
- 'Görüntü' alanlarına bağlı galeriler için
- 'Medya galerisi' alanlarına bağlı galeriler için
- Düğmelere erişilebilir adlar ekleme
- (Yalnızca Studio Editor) 'Daha Fazla Yükle' düğmelerini kullanırken ögeleri ayrı bölümlere ekleme
- (Yalnızca statik sayfalar) Kapsayıcılara 'Sonraki/Önceki öge' düğmeleri ekleme
- Bir kapsayıcıya 'öge sayısı' metni ekleme
- Giriş ögelerini erişilebilir hale getirme
- Sayfalandırma çubuklarını erişilebilir hale getirme
- SSS
Yardımcı teknolojilere ihtiyaç duyanlar dahil olmak üzere tüm ziyaretçilerin sitenizi keşfetmesini sağlamak için CMS (İçerik Yönetim Sistemi) kapsamında erişilebilirlik en iyi uygulamalarını hayata geçirin. Düğmelere erişilebilir adlar ekleme, tüm medya dosyaları için etkili alt metinler kullanma ve ögeleri ARIA özellikleriyle birlikte bölümlere veya kapsayıcılara yerleştirme gibi pratikleri içeren bu uygulamalar sayesinde herkesin içeriğinizde daha kolay gezinmelerini ve etkileşime girmelerini sağlayabilirsiniz.
CMS alt metin en iyi uygulamaları
Görüntülere, videolara ve vektörel çizimlere bağlam sağlamak açısından alt metinler kritik bir önem taşır. Bir alt metin yazarken, yapay zeka araçları veya ekran okuyucular tarafından yorumlanacağını hesaba katarak, ilgili medya ögesinin içeriğini açık ve öz şekilde tanımlayın. Alt metni 125 karakterin altında tutun ve “görüntüsü” gibi ifadelere yer vermekten kaçının. Etkili alt metinler yazma hakkında daha fazla bilgi için Erişilebilirlik: Görüntülerinizi ve Galerilerinizi Hazırlama başlıklı makalemize göz atın.
Her medya ögesi için bir alt metin kaydetmek üzere CMS koleksiyonunuza bir metin alanı eklemenizi öneririz. Koleksiyonunuzun iç düzenini optimize etmek için bu alanı temsil ettiği medya alanının yanına yerleştirin ve “[Görüntü/galeri adı] Alt Metni” gibi anlaşılır bir başlık verin.
Video ögelerinin veri kümesi bağlantı panelindeki alt metin özelliğinin adı Video Açıklaması olarak geçmektedir. Vektörel çizimler veya şekiller için Alt metin şuraya bağlanır seçeneğini kullanın. Bölümlerdeki, şeritlerdeki, sütunlardaki ve (yalnızca Wix Editör için) tekrarlayıcı ögelerindeki arka plan görüntüleri için ise Arka plan alt metni şuraya bağlanır seçeneğini kullanın.
Anlamlı bir mesaj iletmeyen dekoratif amaçlı görüntüler ve medya ögeleri için alt metin girilmemesi daha doğru olur. Alt metin olmayınca ekran okuyucular bu ögeleri atlar ve böylece gereksiz yere dikkat dağıtmaları önlenir.
Dekoratif olmayan görüntüler için
CMS'ye dekoratif olmayan görüntüler eklerken açıklayıcı alt metinler sağlamanız önemlidir. CMS koleksiyonunuza görüntülerin alt metnini temsil eden ayrı bir 'Metin' alanı eklemenizi öneririz. Alt metninizde spesifik ve açıklayıcı bir dil kullanmaya odaklanın. Örneğin, alt metin olarak "bir kadın" yazmak yerine, "bahçeye çiçek eken bir kadın" ifadesini kullanabilirsiniz.
Editörünüzde görüntüyü veri kümesine bağlarken Alt metin buna bağlanır alanına tıklayın ve oluşturduğunuz alt metin alanını seçin. Böylece ekran okuyucuların görüntüyü ve amacını tanımlayabilmesini sağlayarak sitenizin kapsayıcılığını artırabilirsiniz.
Dekoratif görüntüler için
Dekoratif görüntüler genellikle bilgi iletme amacı taşımazlar ve bu nedenle alt metin eklemeniz gerekmez. Görüntüler yalnızca dekoratif amaçlıysa, veri kümesinde alt metni bağlamadan bırakabilirsiniz. Bu durumda ekran okuyucular görüntüyü atlar ve alt metnin gereksiz yere dikkat dağıtmasının önüne geçilmiş olur.
Tıklanabilir düğme işlevi gören görüntüler için
Görüntü bağlantısı bir veri kümesi eylemine (ör. dinamik öge sayfasını açma eylemine) yönlendirme yapıyorsa, alt metin görüntünün yanı sıra ilgili eylemi de açıklamalıdır. Örneğin, görüntüye tıklayan ziyaretçiler bir profil sayfasına yönleniyorsa, “Willis McSmoot hakkında daha fazla bilgi” gibi bir alt metin kullanabilirsiniz.
İfadeleri (expressions) kullanarak dinamik koleksiyon alanı değerleriyle (ör. "Willis McSmoot") sabit bir metni (ör. "hakkında daha fazla bilgi") birleştirerek alt metnin görüntüye göre değişmesini sağlayabilirsiniz. Böylelikle, yardımcı teknolojiler kullanan ziyaretçiler görüntünün verdiği mesajı anlayabilirler.
İfadeleri özel alt metin oluşturmak amacıyla kullanmak için:
- İlgili görüntüyü koleksiyonunuza bağlı veri kümesine bağlayın.
- Görüntü Bağlayın panelinde Alt metin buna bağlanır açılır menüsüne tıklayın ve İfade (expression) seçeneğini seçin.
- İfade (Expression) alanına tıklayın ve ihtiyacınız olan alt metni üreten bir fonksiyon girin. Örneğin, "hakkında daha fazla bilgi" cümlesini bir 'title' (başlık) alanıyla birleştirmek için aşağıdaki fonksiyonu girebilirsiniz:
1CONCAT(title," hakkında daha fazla bilgi")İfadeleri kullanarak farklı alan değerlerini birleştirme hakkında daha fazla bilgi edinin.
'Görüntü' alanlarına bağlı galeriler için
'Görüntü' alanlarına bağlı galerilerde her görüntü için alt metin girilmesi önemlidir. CMS koleksiyonunuzda özellikle görüntülerin alt metinleri için ayrı bir 'Metin' alanı oluşturun. Galeriyi veri kümenize bağlarken Alt metinler şuraya bağlanır bağlanır açılır menüsünü ilgili alt metin alanına bağlayın. Böylece ekran okuyucuların galerideki görüntüleri açıklayabilmesini sağlayarak erişilebilirliği artırabilirsiniz.
Galerileri CMS koleksiyon ögelerine bağlama hakkında daha fazla bilgi edinin .
'Medya galerisi' alanlarına bağlı galeriler için
Dinamik öge sayfasında bir ögeyle ilgili çok sayıda görüntü veya video sergilemenin en etkili yollarından biri 'Medya galerisi' alanına bir galeri bağlamaktır. Koleksiyonunuzdaki her bir ögenin yanındaki 'Medya galerisi' alanına tıklayarak tüm medya dosyaları için alt metinler ekleyin. Bu alana ayrıca her dosya için başlık ve açıklama girerek ekran okuyucuların galerinizdeki görüntüleri ve videoları anlamlandırmalarına yardımcı olabilir ve böylece tüm medya içeriğinizin erişilebilir olmasını sağlayabilirsiniz.
Galerileri 'Medya galerisi' alanlarına bağlama hakkında daha fazla bilgi edinin.
Düğmelere erişilebilir adlar ekleme
CMS'nize bağlı düğmelere erişilebilir adlar ekleyebilirsiniz. Erişilebilir adlar alt metinler gibi çalışır ancak sadece düğmelere özeldir. Düğmenin ne işe yaradığını veya nereye yönlendirme yaptığını açıklayarak ekran okuyuculara yardımcı olurlar. Düğmelere erişilebilir adlar eklemek sitenizin erişilebilirliğini artırır ve tüm ziyaretçilerin içeriğinizde daha kolay gezinmelerini sağlar.
Bir düğmeyi veri kümesine bağlarken, Erişilebilir ad şuraya bağlanır açılır menüsünü kullanarak düğmenin erişilebilir adını koleksiyonunuzdaki bir 'Metin' alanına bağlayın. Bu alan düğmenin ne işe yaradığını veya nereye yönlendirme yaptığını kısa ve öz şekilde tanımlamalıdır.
Örneğin, "Buraya tıklayın" gibi genel bir ad yerine "Hizmetlerimiz hakkında daha fazla bilgi edinin" veya "Başvurunuzu gönderin" gibi alternatifler kullanabilirsiniz.
Gerekirse, ifadeleri kullanarak statik metinleri koleksiyon alanlarınızdaki değerlerle birleştirebilirsiniz. Böylece ekran okuyucular ziyaretçilere düğmelerin içeriğiyle ilgili anlamlı açıklamalar sunabilir. Örneğin, aşağıdaki gibi bir erişilebilir ad oluşturabilirsiniz:
1CONCAT(title, "hakkında daha fazla bilgi")(Yalnızca Studio Editor) 'Daha Fazla Yükle' düğmelerini kullanırken ögeleri ayrı bölümlere ekleme
Studio Editor'da 'Daha Fazla Yükle' düğmesi eklerken, tekrarlayıcının veya galerinin altına yerleştirdiğiniz tüm ögeleri ayrı bir bölüme yerleştirin. Eğer bu ögeleri aynı bölüm içinde ve doğrudan tekrarlayıcının/galerinin altına yerleştirirseniz, 'Daha Fazla Yükle' düğmesine tıklandığında bu ögeler üst üste gelebilir. Bu durum ziyaretçilerin içeriği görmesini ve erişmesini zorlaştırarak kullanıcı deneyimini olumsuz etkileyebilir.
Bu sorunu önlemek için 'Daha Fazla Yükle' düğmesi dahil olmak üzere tekrarlayıcının/galerinin altına yerleştirmek istediğiniz tüm ögelerin ayrı bir bölüme iliştirildiğinden emin olun. Böylece kullanıcılar 'Daha Fazla Yükle' düğmesine tıkladıklarında galeri/tekrarlayıcı herhangi bir üst üste gelme olmadan genişleyerek daha net ve kullanıcı dostu bir deneyim sunar.
'Daha Fazla Yükle' düğmesi ekleme hakkında daha fazla bilgi edinin:
(Yalnızca statik sayfalar) Kapsayıcılara 'Sonraki/Önceki öge' düğmeleri ekleme
Statik sayfalarda ziyaretçilerin CMS'ye bağlı ögelerin içeriğini değiştirmek için tıklayabilecekleri 'Sonraki/Önceki öge' düğmeleri varsa, içerik gösteren tüm ögeleri tek bir kapsayıcıya iliştirin. Ardından, ziyaretçiler düğmelere tıkladığında ekran okuyucuların değişen içeriği duyurabilmesi için bu kapsayıcıya ARIA (Erişilebilir Zengin İnternet Uygulamaları) özellikleri ekleyin.
Kapsayıcıya yalnızca değişen içerik gösteren ögeleri iliştirmeniz gerekir. 'Sonraki/Önceki öge' düğmelerinin iliştirilmesine gerek yoktur.
Wix Editör
Studio Editor
- Editörünüze gidin.
- Bir kapsayıcı ekleyin.
- Sol çubuktaki CMS simgesine
tıklayın. - Koleksiyonlarınız'a tıklayın.
- CMS içeriğini göstermek için kullanmak istediğiniz ögelere tıklayıp kapsayıcıya sürükleyin.
- Henüz yapmadıysanız, kodlamayı etkinleştirin:
- Üst çubuktaki Geliştirici Modu sekmesine tıklayın.
- Geliştirici Modunu Aç'a tıklayın.
- Erişilebilirliğe yönelik geliştirici araçlarını etkinleştirin:
- Editörünüzün üst çubuğundaki Ayarlar sekmesine tıklayın.
- Erişilebilirlik Sihirbazı'nı seçin.
- Sağ panelden Erişilebilirliğe Yönelik Geliştirici Araçları'na tıklayın.
- Editörde gelişmiş erişilebilirlik ayarlarını gösterin geçiş düğmesini etkinleştirin.
- CMS koleksiyonu içeriğini gösteren ögelerin iliştirildiği kapsayıcıya sağ tıklayın.
- Erişilebilirlik'i seçin.
- Öznitelik Ekle'ye tıklayın.
- Özellik açılır menüsüne tıklayın ve aria-live özniteliğini seçin.
- Öznitelik değeri açılır menüsüne tıklayın ve polite değerini seçin.
- Ekle'ye tıklayın.
- Değişiklikleri uygulamaya hazır olduğunuzda sitenizi yayınlayın.
Bir kapsayıcıya 'öge sayısı' metni ekleme
Bir metin ögesinde veri kümesi öge sayısını gösteriyorsanız ve ziyaretçiler bir giriş ögesine tıklayarak öge sayısını değiştirebiliyorsa, metni bir kapsayıcıya iliştirin. Ardından, öge sayısı değiştiğinde ekran okuyucuların duyurabilmesi için kapsayıcının ARIA (Erişilebilir Zengin İnternet Uygulamaları) özelliklerini ayarlayın.
Bu yöntem ziyaretçilerin içerik filtreleyen veya içerik toplayan giriş ögelerine tıklamaları durumunda geçerlidir. Ziyaretçilerin gösterilen öge sayısını değiştirebildiği durumlarda, ekran okuyucuların bu yöndeki bir değişikliği duyurabilmesi için öge sayısını gösteren metni bir kapsayıcıya iliştirmeniz gerekir.
Wix Editör
Studio Editor
- Editörünüze gidin.
- Bir kapsayıcı ekleyin.
- Veri kümesi öge sayısını gösteren metin ögesine tıklayın ve kapsayıcıya sürükleyerek iliştirin. Öge sayısının neyi temsil ettiğini açıklayan başka bir metin ögeniz (ör. "Sonuçlar") varsa, bunu da kapsayıcıya iliştirin.
- Henüz yapmadıysanız, kodlamayı etkinleştirin:
- Üst çubuktaki Geliştirici Modu sekmesine tıklayın.
- Geliştirici Modunu Aç'a tıklayın.
- Erişilebilirliğe yönelik geliştirici araçlarını etkinleştirin:
- Editörünüzün üst çubuğundaki Ayarlar sekmesine tıklayın.
- Erişilebilirlik Sihirbazı'nı seçin.
- Sağ panelden Erişilebilirliğe Yönelik Geliştirici Araçları'na tıklayın.
- Editörde gelişmiş erişilebilirlik ayarlarını gösterin geçiş düğmesini etkinleştirin.
- Metin ögelerinin iliştirildiği kapsayıcıya sağ tıklayın.
- Erişilebilirlik'i seçin.
- İlk özniteliği ekleyin:
- Öznitelik Ekle'ye tıklayın.
- Özellik açılır menüsüne tıklayın ve aria-atomic özniteliğini seçin.
- Öznitelik değeri açılır menüsüne tıklayın ve true değerini seçin.
- Ekle'ye tıklayın.
- İkinci özniteliği ekleyin:
- Öznitelik Ekle'ye tıklayın.
- Özellik açılır menüsüne tıklayın ve aria-live özniteliğini seçin.
- Öznitelik değeri açılır menüsüne tıklayın ve polite değerini seçin.
- Ekle'ye tıklayın.
- Değişiklikleri uygulamaya hazır olduğunuzda sitenizi yayınlayın.
Giriş ögelerini erişilebilir hale getirme
İçerik filtrelemeye ayarlanmış giriş ögelerinde, filtreler varsayılan olarak ziyaretçi seçim yaptığında uygulanır. 'Filtreleri Uygula' düğmesi ekleyerek bu davranışı değiştirebilirsiniz.
Erişilebilirlik açısından bakıldığında, 'Filtreleri Uygula’ düğmesi eklemek daha uygun bir yaklaşımdır. Bu düğmenin olduğu giriş ögelerinde ziyaretçiler düğmeye tıklayana kadar içerik filtrelenmez. Ziyaretçilerin birden fazla filtre ayarlayıp hepsini aynı anda uygulaması daha iyi bir kullanıcı deneyimi sağlar.
Veri kümesi öge sayısını gösterirken:
Ziyaretçiler giriş ögelerine tıklayarak öge sayısını değiştirebiliyorsa, öge sayısını gösteren metni mutlaka bir kapsayıcıya iliştirin. Daha fazla bilgi için yukarıdaki bölüme bakın.
Sayfalandırma çubuklarını erişilebilir hale getirme
Sayfalandırma çubuklarını daha erişilebilir hale getirmek için hem çubuğun kendisine hem de içindeki düğmelere erişilebilir adlar ekleyin. Bu adlar ekranda görünmez, ancak kullanıcıların sayfalarda nasıl gezineceklerini anlamalarına yardımcı olan ekran okuyucular için gereklidir. Örneğin, sayfalandırma çubuğunu "Sayfada gezinme" olarak adlandırabilir, düğmelere ise "Sonraki sayfa" / "Önceki sayfa" veya içeriğinize göre uyarlanmış "Sonraki hikaye" / "Önceki hikaye" gibi net adlar atayabilirsiniz.
İpucu:
Studio Editor'da 'Daha Fazla Yükle' düğmeniz varsa, sayfalandırma çubuğunuzu ve tekrarlayıcının/galerinin altında yer alan diğer her şeyi ayrı bir bölüme yerleştirin.
SSS
Erişilebilirlikle ilgili sıkça sorulan soruların yanıtları için aşağıya tıklayın.
CMS'deki alt metin alanını adlandırırken nelere dikkat etmeliyim?
Tekrarlayıcımda dekoratif olan ve olmayan görüntüler karışık olarak gösteriliyorsa ne olur?
Ziyaretçiler görüntünün üzerine geldiğinde görünen bir araç ipucu metni ekleyebilir miyim?
CMS formumdaki başarı/hata mesajları erişilebilir nitelikte midir?