Evrensel Web Tasarımı: WİEK Uyumluluğu Rehberi

Aşağıdaki makale size yardımcı olacaktır:Evrensel Web Tasarımı: WİEK Uyumluluğu Rehberi

Web için Evrensel Tasarım

Erişilebilirlik, web tasarımı ve geliştirmenin son derece önemli ancak genellikle gözden kaçan bir bileşenidir. Birçok şirket, müşteri sorunlarını giderene veya potansiyel olarak maliyetli bir davayla karşı karşıya kalana kadar Evrensel Web Tasarımının önemi hakkında düşünmez. Bu hızlı başlangıç ​​kılavuzunu, şirketlerin uyumluluk ihtiyaçlarını anlamalarına yardımcı olmak için bir araya getirdim. basit yönergeler bunların nasıl gerçekleştirileceğine dair.

Evrensel Web Tasarım Nedir?

Evrensel Web Tasarımı, bilgi ve iletişim teknolojisinin (ICT) engelliliğine bakılmaksızın tüm insanlar tarafından mümkün olan en geniş ölçüde erişilebilir, anlaşılır ve kullanılabilir olmasını sağlamayı amaçlamaktadır. World Wide Web ve erişilebilirliği için birincil uluslararası standartlar, World Wide Web Konsorsiyumu tarafından belirlenir. (W3C)Web İçeriği Erişilebilirlik Yönergelerini (WCAG 2.0 & 2.1).

Amerika Birleşik Devletleri’nde, 1973 tarihli Rehabilitasyon Yasası’nın 508. Bölümü erişilebilirlik gereksinimlerini kapsar. bu Bölüm 508 yönergeleri WCAG’ye başvurun ve uyumluluk için içindeki belirli teknikleri zorunlu kılın.

Kimlerin WCAG ile uyumlu olması gerekir?

Tüm kuruluşlar, Federal ve Eyalet kurumları ve eğitim kurumları WCAG’ı takip etmelidir. Birleşik Devletlerde, federal kurumlar ve yüklenicileri WCAG 2.0 (A & AA) ile uyumlu olmaları gerekir. Diğer birçok ülke ve uluslararası kuruluş da WCAG 2.0 veya 2.1 ile uyumluluk gerektirir.

Uyumluluk Düzeyleri

Web İçeriği Erişilebilirlik Yönergeleri (WCAG), üç uyumluluk düzeyine ayrılmıştır:

  • A – minimum uygunluk seviyesi
  • AA – gereken tipik uygunluk düzeyi (A gerekliliklerini içerir)
  • AAA – en yüksek uyumluluk düzeyi (A ve AA gerekliliklerini içerir)

WCAG Uyumluluğuna Başlarken

Birçoğumuz, seçimlerimizin sonuçlarını fark etmeden kötü uyum alışkanlıkları geliştirdik. Birincisi, tasarım açısından tatsız bulduğum için geçmişte :focus göstergesindeki taslağı gizlemekten suçlu oldum. Tasarımcıların ve geliştiricilerin benzer hatalar yapmasını önlemeye yardımcı olmak için aşağıdaki tavsiye listesini bir araya getirdim.

Tavsiye Edilen:  Web Sitenizin Görünürlüğünü Artıracak 8 Kanıtlanmış Teknik

Evrensel Web Tasarımı ve Geliştirme Yönergeleri

  • her zaman var alternatif metin görsel öğeler için
  • İçeriği uygun şekilde anlamlı bir sırayla yönlendirin başlık etiketleri her bölüm için
  • Eklerken CSS yerine HTML kullanın vurgu metne (örn. )
  • Geçerli kullan otomatik tamamlama özellikleri giriş alanlarındaki etikete karşılık gelen
  • Bir şeyi belirtmek için altı çizili veya simge gibi görsel öğeler kullanın. bağlantı veya 3:1 veya daha büyük bir kontrast değişikliği kullanın
  • Alt çizgi veya yıldız işareti gibi görsel öğeler kullanın belirtmek için hata
  • bir biçimde Kullanın metin kontrastı
  • AA standartlarını karşılamak için en az 4,5:1 oran Kullanın metin kontrastı
  • AAA standartlarını karşılamak için mümkün olduğunda 7:1 veya daha fazla oran Tüm metnin olabileceğinden emin olun
  • %200’e kadar yakınlaştırılmış için em birimlerini, adlandırılmış yazı tipi boyutlarını veya yüzdeleri kullanın.
  • yazı tipi boyutları Web sitenizin tüm öğelerini yapın
  • duyarlı Emin olmak Görsel öğeler
  • AA standartlarını karşılamak için en az 3:1 kontrast oranına sahip olmak Web sitenizin üzerinden gezinilebildiğinden emin olun tuş takımı
  • sadece Kullanıcılara seçenekler sunun Duraklat
  • kaydırma veya otomatik içerik Birden fazla yol sağlayın gezinmek
  • mümkün olduğunda her web sayfasına Kullanıcının ne olduğunu göstermek için teknikler kullanın. mevcut konum
    • web sitenizde örneğin:
    • Galeta unu
    • Site Haritası
    • Gezinmede görsel ipuçları
  • Üst sayfaları belirtmek için başlıklar Belirtin dil

HTML’de öznitelik (ör. )

Yaygın WCAG Uyum Hataları

  • Geliştirme süreciniz sırasında evrensel tasarımı korumak için bu yaygın hatalardan kaçının:oluşturmak için CSS kullanın “başlıklar.
  • ” Her zaman HTML etiketlerini kullanın (örn.

    ) eklemek için CSS kullanın

  • dekoratif olmayan görseller :before veya :after için kullanın
  • dekoratif olmayan içerik kilit oryantasyon
  • dikey veya yatay görünüme belirtmek için yalnızca rengi kullanın bağlantı
  • veya bir formdaki bir hatayı göstermek için metnin şu adreste görüntülendiğinde okunamaz hale gelmesine izin ver:%200
    • :
    • Taşmayı mutlak öğelerde gizli olarak ayarlamaktan kaçının
    • Sınırlı yükseklik özelliklerine sahip ve kaydırma içermeyen açılır pencereler veya modeller oluşturmaktan kaçının
  • Paragraflara yükseklik özellikleri eklemekten kaçının kullanmak metin için resimler
  • (logo veya tamamen dekoratif olmadığı sürece) görseli kapatmak için CSS kullanın odak
  • gösterge (ör. :odak {anahat: hiçbiri}) ayarlamak zaman sınırları
  • kullanıcı etkileşimi üzerine herhangi bir şey ekle yanıp söner

herhangi bir saniye periyodunda üç defadan fazla WCAG ile Nasıl Tanışılır (Hızlı Referans) Belgesini Görüntüleyin

daha fazla bilgi için. eğer kullanıyorsanızvideo ,ses ,pdf’ler , mimik (kaydırma, yakınlaştırmak için çimdikleme vb.)w3.org

. Uygunsuzluktan hangi engellerin etkilenebileceğini bilmeniz mi gerekiyor?

Yararlı bir tablo için buraya tıklayın.

Evrensel Tasarım ve Uyumluluk için Araçlar: