Tek bir rezervasyon, farklı kullanım yolları: erişilebilirliğin günlük hayattaki faydası

Algılamayı, kullanmayı ve anlamayı birlikte tasarlayın

Arayüz sözcük, konum, renk ve davranış aracılığıyla iletişim kurar. İyi erişilebilirlik bu anlamı farklı sunum biçimlerine taşır. İlgili kontrolle ilişkilendirilmiş görünür alan etiketi, ekran okuyucuya da yararlı bir ad verir. Mantıklı başlık yapısı görsel olarak sayfayı taramayı kolaylaştırırken yardımcı teknolojiyle konular arasında geçiş yapmayı da destekler. Bu ilişkiler içeriği anlaşılır kılar.

WCAG erişilebilirliği algılanabilir, kullanılabilir, anlaşılabilir ve sağlam içerik ilkeleriyle düzenler. Bunları tasarım sorularına çevirin: bilgi kişiye nasıl ulaşıyor, kontroller nasıl kullanılıyor, yolculuk kendini nasıl açıklıyor, tarayıcılar yapıyı nasıl tutarlı yorumluyor? Soruları gerçek bir işe uygulamak, ekibe her bileşeni geliştirmek için somut bir yol verir.

Her kontrole eylemi destekleyen bir ad verin

Atölye formumuz ad, e-posta ve oturum tarihi istiyor. Görünür etiket, yazı yazarken de alanın kimliğini korur. Etiketi kodda da ilişkilendirin: for değeri giriş alanının id değeriyle eşleşebilir. Tarayıcı bu ilişkiyi yardımcı teknolojiye aktarabilir; etiket de alanı seçmek için daha geniş bir yüzey sağlar.

“Atölye tarihi seç” ve “Rezervasyonu onayla” gibi amacı anlatan sözcükler kullanın. HTML’in yerleşik düğme ve bağlantıları tanıdık tarayıcı davranışları ve klavye etkileşimi için güçlü bir temel sunar. Geliştirici araçlarında hesaplanan erişilebilir adı inceleyin, bileşeni ekran okuyucuyla deneyin. Görünen ve okunan adların tutarlılığı, farklı kullanım yollarında aynı işlemi tanımayı kolaylaştırır.

Sayfa içinde izlenebilir bir yol oluşturun

Tab ve Shift+Tab ile rezervasyonda ilerleyin, takvimi açıp oturum seçin. Görünür odak işareti mevcut konumu gösterir; mantıklı sıra ilgili kontrolleri birbirine bağlar. Tasarım sisteminde odağa da diğer görsel durumlar gibi belirgin bir görünüm verin. Kalıcı menü ve bildirimleri, etkin kontrol rahatça görülecek biçimde yerleştirin.

Modal pencere bir seçim için odaklı bir alan sunar. Açıldığında odağı içeri alın, öngörülebilir klavye kontrolleri ve anlaşılır kapatma eylemi sağlayın. Ardından odağı yararlı bir yere, çoğunlukla pencereyi açan kontrole döndürün. Bu devamlılık, büyük yolculuk içinde kişinin yerini korumasına yardımcı olur. Yapı ve davranışın birlikte nasıl çalıştığını gerçek bileşen üzerinde inceleyin.

Anlamı yapı ve alternatiflerle taşıyın

Başlıklar yararlı bir içerik taslağı oluşturur. Seviyeleri içerik hiyerarşisine göre seçin, görünümü stillerle düzenleyin. Ziyaretçi böylece konuyu hem gözle tarayarak hem başlıklar arasında gezinerek bulabilir. Telaffuzu desteklemek için sayfa dilini belirtin; her sayfaya amacını anlatan ayırt edici bir başlık verin.

Görsel alternatifi görselin bağlamdaki rolünü aktarır. Atölye şeması oturma düzenini veya dahil olan malzemeleri açıklayabilir. Yalnız süsleme amacı taşıyan görselde boş alt, dikkati yararlı bilgi üzerinde tutar. Bağlantı görselinde hedefi veya eylemi anlatın. Karmaşık grafiğe ana çıkarım ve yakında açıklama ya da veri tablosu ekleyerek aynı içeriği anlamanın farklı yollarını sunun.

Farklı görüntüleme koşullarında rahat okumayı destekleyin

Metin ve arka planda kolay ayırt edilen eşleşmeler seçin. WCAG AA kapsamında sıradan metinde genel olarak en az 4,5:1, tanıma uyan büyük metinde 3:1 kontrast kullanılır; belirlenmiş istisnalar bulunur. Fotoğraf üstü yazıları, odak ve geri bildirim durumlarını da gerçek görüntülenen renklerle inceleyin. Uygun eşleşmeleri tasarım sistemine kaydetmek tekrar kullanımı kolaylaştırır.

Daha büyük metni ve dar ekranı deneyin. Yeniden akış, çoğu içeriğin 320 CSS piksele denk genişlikte tek okuma yönüyle yerleşmesini sağlar; doğası gereği iki boyutlu içerik için tanımlı istisnalar vardır. Düzen uyarlanırken menü, açıklamalar ve eylemleri erişilebilir tutun. Medya için ayrılan alan ve özenle yerleştirilen katmanlar küçük ekranlarda ve farklı ışıkta rahat okumayı destekler.

Her tasarım kararını ziyaretçi faydasına bağlayın

Form geri bildirimi başlangıç açıklamaları kadar yardımcı olabilir. “ad@example.com biçiminde bir e-posta girin” gibi somut bir ifadeyle sonraki adımı anlatın. Tamamlanan girişleri koruyun, yönlendirmeyi kolay bulunur kılın. Açık bir onay, bundan sonra ne olacağını söyleyerek yolculuğu tamamlar. Bu örüntüleri ortak bileşene uygulayın; tüm formlar yararlansın.

Erişilebilir örüntüleri günlük işin parçası yapın

Rezervasyonu klavyeyle tamamlayın, adları ve başlıkları ekran okuyucuyla keşfedin; yakınlaştırma, yeniden akış ve kontrastı inceleyin. Açıklamaları, seçim durumlarını, ilerleme mesajlarını ve son onayı dahil edin. Otomatik kontroller HTML hakkında tekrarlanabilir gözlemler sunar; görev üzerinden inceleme ve ilgili erişim ihtiyaçlarına sahip kişilerin geri bildirimleri deneyimi geliştirmeye yardımcı olur.

Sayfayı, bileşeni ve amaçlanan davranışı kaydedin; ekip incelemeyi tekrarlayabilsin. Güncelleme sonrasında bileşenin kullanıldığı başka bir sayfaya da bakın. Başarılı etiket, odak ve geri bildirim örüntülerini tasarım sisteminde saklayın. İyi tasarlanmış bir alanı yirmi sayfada kullanmak, erişilebilirliği sitenin ortak yeteneğine dönüştürür ve yeni özelliklere güçlü bir başlangıç sağlar.

Sitelemetry ile öğrendiklerinizi uygulayın

Sitelemetry sayfa HTML’inde etiket, görsel alternatifi, belge yapısı ve seçilmiş kontrast koşulları gibi erişilebilirlik işaretlerini inceler. Bu gözlemler, iyi uygulamaların kendi sayfalarınızda nasıl yer aldığını keşfetmeyi ve geliştirilecek bileşenleri seçmeyi kolaylaştırır. İncelemeyi bu rehberdeki klavye ve ekran okuyucu yolculuğuyla birleştirin; tasarım geliştikçe ilgili kontrolleri tekrarlayın.