Ulaşılabilirlik

Bootstrap'ın erişilebilir içerik oluşturmaya yönelik özelliklerine ve sınırlamalarına kısa bir genel bakış.

Bu sayfada

Bootstrap, kullanımı kolay bir hazır stiller, düzen araçları ve etkileşimli bileşenler çerçevesi sağlayarak geliştiricilerin görsel olarak çekici, işlevsel açıdan zengin ve kullanıma hazır web siteleri ve uygulamalar oluşturmasına olanak tanır.

Genel bakış ve sınırlamalar

Bootstrap ile oluşturulan herhangi bir projenin genel erişilebilirliği, büyük ölçüde yazarın işaretlemesine, ek stiline ve içerdikleri komut dosyasına bağlıdır. Ancak bunların doğru bir şekilde uygulanması şartıyla, Bootstrap ile WCAG 2.1 (A/AA/AAA), Bölüm 508 ve benzer erişilebilirlik standartları ve gerekliliklerini karşılayan web siteleri ve uygulamalar oluşturmak tamamen mümkün olmalıdır.

yapısal işaretleme

Bootstrap'in stili ve düzeni, çok çeşitli biçimlendirme yapılarına uygulanabilir. Bu belge, geliştiricilere Bootstrap'in kullanımını göstermek ve olası erişilebilirlik sorunlarının ele alınabileceği yollar da dahil olmak üzere uygun semantik işaretlemeyi göstermek için en iyi uygulama örneklerini sağlamayı amaçlamaktadır.

Etkileşimli bileşenler

Bootstrap'in kalıcı iletişim kutuları, açılır menüler ve özel araç ipuçları gibi etkileşimli bileşenleri, dokunma, fare ve klavye kullanıcıları için çalışmak üzere tasarlanmıştır. İlgili WAI - ARIA rolleri ve niteliklerinin kullanılması yoluyla, bu bileşenler yardımcı teknolojiler (ekran okuyucular gibi) kullanılarak da anlaşılabilir ve çalıştırılabilir olmalıdır.

Bootstrap bileşenleri bilerek oldukça genel olacak şekilde tasarlandığından, yazarların bileşenlerinin kesin yapısını ve işlevselliğini daha doğru bir şekilde iletmek için JavaScript davranışının yanı sıra daha fazla ARIA rolleri ve nitelikleri eklemesi gerekebilir . Bu genellikle belgelerde belirtilir.

Renk kontrastı

Şu anda Bootstrap'in varsayılan paletini oluşturan bazı renk kombinasyonları (çerçeve boyunca düğme varyasyonları, uyarı varyasyonları, form doğrulama göstergeleri gibi şeyler için kullanılır) yetersiz renk kontrastına neden olabilir (önerilen WCAG 2.1 metin rengi kontrast oranı olan 4.5:1'in altında). ve WCAG 2.1 metin dışı renk kontrast oranı 3:1 ), özellikle açık renkli bir arka plana karşı kullanıldığında. Yazarların, kendi özel renk kullanımlarını test etmeleri ve gerektiğinde, yeterli renk kontrast oranları sağlamak için bu varsayılan renkleri manuel olarak değiştirmeleri/genişletmeleri önerilir.

Görsel olarak gizlenmesi gereken, ancak ekran okuyucular gibi yardımcı teknolojiler tarafından erişilebilir kalması gereken içerik, .visually-hiddensınıf kullanılarak şekillendirilebilir. Bu, ek görsel bilgilerin veya ipuçlarının (renk kullanımıyla ifade edilen anlam gibi) görsel olmayan kullanıcılara da iletilmesi gereken durumlarda faydalı olabilir.

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

Geleneksel "atlama" bağlantıları gibi görsel olarak gizlenmiş etkileşimli kontroller için .visually-hidden-focusablesınıfı kullanın. Bu, odaklanıldığında kontrolün görünür olmasını sağlayacaktır (görebilen klavye kullanıcıları için). Dikkat, önceki sürümlerdeki eşdeğer .sr-onlyve sınıflarla karşılaştırıldığında, Bootstrap 5'ler bağımsız bir sınıftır ve sınıfla birlikte kullanılmamalıdır..sr-only-focusable.visually-hidden-focusable.visually-hidden

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

Azaltılmış hareket

Bootstrap, prefers-reduced-motionmedya özelliği için destek içerir . Kullanıcının azaltılmış hareket tercihini belirlemesine izin veren tarayıcılarda/ortamlarda, Bootstrap'teki çoğu CSS geçiş efekti (örneğin, kalıcı bir iletişim kutusu açıldığında veya kapatıldığında veya karusellerde kayan animasyon) devre dışı bırakılır ve anlamlı animasyonlar ( döndürücüler gibi) yavaşlayacaktır.

Destekleyen tarayıcılarda prefers-reduced-motionve kullanıcının azaltılmış hareketi tercih edeceğini açıkça belirtmediği durumlarda (yani, burada prefers-reduced-motion: no-preference), Bootstrap özelliği kullanarak düzgün kaydırma sağlar scroll-behavior.