Bootstrap erişilebilirlik: visually-hidden, kontrast ve ARIA

Bootstrap neyi sağlar, neyi size bırakır?

Belgeler erişilebilirlik sayfasına bir sınır çizerek başlar: Bootstrap ile yapılmış bir projenin genel erişilebilirliği büyük ölçüde yazarın işaretlemesine, ek stillerine ve betiklerine bağlıdır. Bunlar doğru uygulandığında WCAG 2.1 (A, AA, AAA düzeyleri), Section 508 ve benzeri standartları karşılayan siteler kurmak mümkün olmalıdır. Yani Bootstrap'i kullanmak bir standarda uyum garantisi değildir; doğru kullanmak bu uyumu mümkün kılar.

Yapısal işaretleme tarafında Bootstrap'in stilleri çok farklı HTML yapılarına uygulanabilir. Belgelerdeki örnekler hem Bootstrap'in kullanımını hem de uygun semantik işaretlemeyi göstermeyi amaçlar. Etkileşimli bileşenler, yani modal pencereler, açılır menüler ve tooltip'ler, dokunmatik ekran, fare ve klavye kullanıcıları için tasarlanmıştır ve ilgili WAI-ARIA rolleri ile öznitelikleri sayesinde ekran okuyucularla da anlaşılabilir olmalıdır. Ancak bileşenler bilerek genel tutulduğu için, bileşeninizin gerçek işlevini doğru anlatmak üzere ek ARIA öznitelikleri ve JavaScript davranışı eklemeniz gerekebilir. Belgeler bunu genellikle ilgili bileşen sayfasında belirtir; aşağıdaki tabloda bu notları topladık.

visually-hidden: gözden gizli, ekran okuyucuya açık

Bazı bilgiler ekranda gereksiz kalabalık yaratır ama görmeyen kullanıcı için gereklidir. Belgelerin örneği bunu iyi anlatır: bir uyarının tehlikeli olduğu yalnızca kırmızı renkle anlatılıyorsa ekran okuyucu kullanıcısı bunu öğrenemez. Çözüm, metnin başına .visually-hidden ile gizlenmiş bir "Tehlike:" sözcüğü eklemektir.

<p class="text-danger">
  <span class="visually-hidden">Tehlike: </span>
  Bu işlem geri alınamaz.
</p>
<button type="button" class="btn btn-primary">
  Bildirimler <span class="badge bg-light text-dark">4</span>
  <span class="visually-hidden">okunmamış bildirim</span>
</button>

Bootstrap 5.0.2 derlenmiş CSS dosyasında bu sınıf şöyle tanımlıdır:

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

Kural öğeyi display: none ile kaldırmaz; onu 1 piksellik, kırpılmış ve taşması gizlenmiş bir kutuya sıkıştırır. Bu fark önemlidir: belgelere göre .invisible sınıfı öğeyi hem görsel olarak hem de yardımcı teknoloji ve ekran okuyucu kullanıcılarından gizler. Ekranda görünmeyip yine de okunması gereken içerik için bu yüzden d-none ve invisible sınıfları değil, .visually-hidden doğru araçtır; görünürlük sınıfları içeriği herkesten saklamak istediğinizde kullanılır. Her değerin !important taşıması, sınıfın başka kurallar tarafından ezilmemesini sağlar. Badge örneğindeki ek metin de belgelerin rozetler için önerdiği yöntemdir: bağlam açık değilse "4" sayısı ekran okuyucuda anlamsız bir rakam olarak kalır.

visually-hidden-focusable ve atlama bağlantısı

Klavyeyle gezinen kullanıcılar her sayfada menünün tüm bağlantılarından geçmek zorunda kalmasın diye sayfanın en başına "ana içeriğe geç" bağlantısı konur. Bu bağlantı normalde görünmez, Tab tuşuyla odaklandığında belirir. Bootstrap bunun için .visually-hidden-focusable sınıfını sunar. Yukarıdaki kurala dikkat edin: sınıf yalnızca öğe odakta değilken ve içinde odaklanmış bir öğe yokken gizler, odaklanınca kural eşleşmez ve öğe normal görünümüne döner.

<a class="visually-hidden-focusable" href="#icerik">Ana içeriğe geç</a>
<div class="visually-hidden-focusable">
  Hızlı erişim: <a href="#arama">Arama</a> ya da <a href="#iletisim">İletişim</a>
</div>
<nav aria-label="Ana menü">
  <a href="#">Anasayfa</a>
</nav>
<main id="icerik">
  <h1>Sayfa başlığı</h1>
</main>

İkinci örnek belgelerdeki kapsayıcı kullanımını gösterir: :focus-within sayesinde sınıfı bir kapsayıcıya verdiğinizde, içindeki herhangi bir bağlantı odaklandığında kapsayıcının tamamı görünür olur. Belgelerin özellikle uyardığı bir nokta var: önceki sürümlerdeki .sr-only-focusable sınıfından farklı olarak Bootstrap 5'in .visually-hidden-focusable sınıfı tek başına kullanılır ve .visually-hidden ile birlikte yazılmamalıdır. İkisini birlikte yazarsanız .visually-hidden kuralı odakta da geçerli kalır ve bağlantı hiç görünmez.

v5'te bu sınıfların adı değişti: .sr-only artık .visually-hidden, .sr-only-focusable artık .visually-hidden-focusable; Sass mixin'leri de visually-hidden() ve visually-hidden-focusable() adını aldı. Belgelere göre iki sınıf Sass'ta mixin olarak da kullanılabilir, böylece kendi sınıfınıza aynı davranışı verebilirsiniz. Eski adlar için Bootstrap 4'ten 5'e geçiş yazısına bakın.

Renk kontrastı ve renkle anlam aktarmak

Belgeler varsayılan paletle ilgili açık bir uyarı içerir: buton, uyarı ve form doğrulama göstergeleri gibi yerlerde kullanılan bazı renk kombinasyonları, özellikle açık zeminde, WCAG 2.1'in metin için önerdiği 4.5:1 ve metin dışı öğeler için önerdiği 3:1 kontrast oranının altında kalabilir. Belgeler bu yüzden kendi renk kullanımınızı test etmenizi ve gerekirse varsayılan renkleri elle değiştirip genişletmenizi önerir. Tema renklerini Sass ile değiştirmek theme colors yazısının konusu.

Renkle ilgili ikinci kural birçok bileşen sayfasında tekrar eder: alert, badge, buton, kart, liste grubu, tablo ve renk yardımcıları sayfalarında aynı not bulunur. Renk yalnızca görsel bir işarettir ve ekran okuyucu kullanıcılarına aktarılmaz. Rengin taşıdığı bilgi ya görünür metinden açıkça anlaşılmalı ya da .visually-hidden ile gizlenmiş ek metin gibi başka bir yolla verilmelidir. Örneğin kırmızı bir .alert-danger kutusunda "Hata" sözcüğü görünür olarak yazıyorsa ek bir şey gerekmez.

Azaltılmış hareket: prefers-reduced-motion

Bootstrap, kullanıcının tarayıcı ya da işletim sistemi düzeyinde azaltılmış hareket tercihini belirtmesine imkân veren prefers-reduced-motion medya özelliğini destekler. Belgelere göre bu tercihi destekleyen ortamlarda Bootstrap'teki CSS geçişlerinin çoğu kapatılır; örneğin modal açılıp kapanırken ya da carousel kayarken. Spinner gibi anlam taşıyan animasyonlar ise kapatılmaz, yavaşlatılır. Derlenmiş CSS bunu doğrular: spinner'ların normal animasyon süresi 0.75s iken @media (prefers-reduced-motion: reduce) bloğunda animation-duration: 1.5s olur. Form alanlarının, switch'lerin ve floating label'ların geçişleri de aynı sorguyla transition: none alır.

Ters yönde de bir davranış var: tercihi destekleyen ve kullanıcının azaltılmış hareket istemediği (no-preference) tarayıcılarda Bootstrap scroll-behavior özelliğiyle yumuşak kaydırmayı açar; derlenmiş dosyada bu, :root için scroll-behavior: smooth kuralıdır. Kendi Sass derlemenizde bu medya sorgularının üretimini $enable-reduced-motion değişkeni yönetir ve varsayılan olarak açıktır (Sass seçenekleri). Medya sorgularının sözdizimi için CSS media query yazısına bakabilirsiniz.

Formlarda erişilebilir ad

Formlar erişilebilirlik hatalarının en sık görüldüğü yerdir. Belgelerin kuralı açık: her form kontrolünün amacını yardımcı teknolojilere aktaran uygun bir erişilebilir adı olmalı. En basit yol bir <label> öğesidir; butonlarda ise <button> içine yeterince açıklayıcı metin yazmaktır. Görünür etiket koyamadığınız durumlar için belgeler şu yolları sayar:

• .visually-hidden ile gizlenmiş bir <label>,
• etiket görevi görebilecek mevcut bir öğeyi aria-labelledby ile göstermek,
• bir title özniteliği vermek,
• adı doğrudan aria-label ile belirlemek.

Bunların hiçbiri yoksa yardımcı teknolojiler input ve textarea öğelerinde son çare olarak placeholder metnine başvurabilir. Ancak belgeler, görsel olarak gizli içeriğin, aria-label değerinin ve alan dolunca kaybolan placeholder'ın yardımcı teknoloji kullanıcılarına yarasa da görünür etiket olmamasının bazı kullanıcılar için sorun olabileceğini hatırlatır; hem erişilebilirlik hem kullanılabilirlik için en iyisi bir tür görünür etikettir. Alanın altındaki yardım metni aria-describedby ile bağlanmalı, istemci tarafı doğrulama stillerinin ise şu an erişilebilir olmadığını unutmamalısınız (form doğrulama).

<form class="row g-2 align-items-center">
  <div class="col-auto">
    <label for="siteArama" class="visually-hidden">Sitede ara</label>
    <input type="search" class="form-control" id="siteArama" placeholder="Ara...">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Ara</button>
  </div>
</form>

Bileşenlerde ARIA: belgelerin notları

Aşağıdaki tablo bileşen sayfalarındaki erişilebilirlik notlarını özetler. Bazılarını Bootstrap'in JavaScript kodu kendisi ekler, bazılarını sizin yazmanız gerekir; tablodaki "kim ekler" sütunu bu ayrımı gösterir.

Tablodaki bazı notların ayrıntısı önemli. Collapse için belgeler, tetikleyici başlangıçta kapalıysa aria-expanded="false", .show ile açık başlıyorsa "true" yazmanızı ister; sonrasında eklenti bu değeri kendisi günceller. Bootstrap'in collapse uygulaması WAI-ARIA akordeon desenindeki isteğe bağlı klavye etkileşimlerini kapsamaz. Toast için canlı bölgenin toast oluşturulmadan önce sayfada bulunması gerekir; ikisini aynı anda üretip eklerseniz genellikle duyurulmaz. Form hataları gibi süreç için önemli bilgiler toast yerine alert ile verilmelidir. Tooltip ve popover yalnızca geleneksel olarak klavyeyle odaklanabilen etkileşimli öğelere, yani bağlantılara ve form kontrollerine eklenmeli ve tek tetikleyici olarak fareyle üzerine gelme kullanılmamalıdır. Bileşen ayrıntıları accordion ve collapse, toast, tooltip ve popover ve modal yazılarında.

Dropdown notu da ayrıca açıklanmayı hak ediyor. WAI-ARIA standardı gerçek bir role="menu" bileşeni tanımlar, ama bu uygulama benzeri, eylem tetikleyen menüler içindir ve içinde yalnızca menü öğeleri bulunabilir. Bootstrap'in açılır menüleri ise içine arama alanı ya da giriş formu bile konabilecek kadar genel tasarlandığı için bu rolleri ne bekler ne de kendisi ekler. Gerçek bir ARIA menüsü kuruyorsanız gereken öznitelikleri siz yazarsınız; Bootstrap yine de öğeler arasında ok tuşlarıyla gezinmeyi ve ESC ile kapatmayı destekler.

<div class="spinner-border" role="status">
  <span class="visually-hidden">Yükleniyor...</span>
</div>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Anasayfa</a></li>
    <li class="breadcrumb-item active" aria-current="page">Ayarlar</li>
  </ol>
</nav>
<div class="btn-group" role="group" aria-label="Metin hizalama">
  <button type="button" class="btn btn-outline-secondary">Sola</button>
  <button type="button" class="btn btn-outline-secondary">Ortaya</button>
</div>

Sık yapılan hatalar

• visually-hidden-focusable ile visually-hidden'ı birlikte yazmak: Atlama bağlantısı odakta da gizli kalır.
• Okunması gereken metni invisible ile gizlemek: Belgelere göre .invisible içeriği ekran okuyuculardan da saklar; yalnızca gözden gizlenecek metin için .visually-hidden kullanın.
• Anlamı yalnızca renkle vermek: Kırmızı ya da yeşil tek başına bilgi taşımaz; görünür veya gizli bir metin ekleyin.
• Varsayılan renklerin kontrastına güvenmek: Belgeler bazı kombinasyonların önerilen oranların altında kalabileceğini söyler; kendi renklerinizi test edin.
• Etiketsiz alan: Placeholder ad yerine geçmez; en azından gizli bir etiket ya da aria-label verin.
• role="dialog" eklemeye çalışmak: Modal ve offcanvas için bunu Bootstrap'in JavaScript'i ekler; sizin göreviniz aria-labelledby yazmaktır.
• Görsel sekmelere tab rolleri vermek: Belgelere göre .nav-tabs ile biçimlenmiş sıradan bir gezinme çubuğu role="tablist" almamalıdır; bu roller yalnızca dinamik sekmeli arayüzler içindir.

Sık Sorulan Sorular

Bootstrap 5 sr-only yerine ne kullanılır?

.visually-hidden. Odaklanınca görünmesi gereken öğeler için .sr-only-focusable yerine tek başına .visually-hidden-focusable kullanılır.

Bootstrap kullanan bir site otomatik olarak WCAG uyumlu mu?

Hayır. Belgelere göre erişilebilirlik büyük ölçüde sizin işaretlemenize, stillerinize ve betiklerinize bağlıdır; doğru uygulandığında WCAG 2.1 gibi standartları karşılamak mümkün olmalıdır.

Animasyonları tamamen kapatabilir miyim?

Kullanıcı azaltılmış hareket tercih ettiğinde Bootstrap geçişlerin çoğunu zaten kapatır. Kendi derlemenizde $enable-reduced-motion değişkeni bu medya sorgularının üretilip üretilmeyeceğini belirler; bileşen bazında seçenekler ilgili bileşen sayfalarında anlatılır.

Hangi araçlarla test etmeliyim?

Belgelerin erişilebilirlik sayfası ek kaynaklar arasında WCAG 2.1 metnini, The A11Y Project'i, MDN erişilebilirlik belgelerini ve Color Contrast Analyser, Microsoft Accessibility Insights, Deque Axe gibi test araçlarını listeler.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · ARIA nedir · Form control · Form doğrulama · Sass seçenekleri · HTML öğrenme rehberi