Birçok kişi, geliştirme iş akışı sürecinde desen stil kılavuzları, bileşen kitaplıkları veya tam tasarım sistemleri kullanarak bileşen odaklı geliştirme yöntemini kullanır. Bu araçları resmi olarak kullanmamış olsanız bile, web sitesi, uygulama veya diğer dijital ürünler için büyük bir tasarımı yönetilebilir parçalara ayırmak üzere benzer bir süreç kullanıyor olabilirsiniz.
Fiziksel bir yapı inşa etmek gibi, her seferinde bir parça inşa etmeniz önemlidir. Öncelikle temel, yapı, duvarlar, pencereler, çatı ve aradaki her şey. Bileşen odaklı geliştirme araçları, web siteleri, uygulamalar ve diğer dijital ürünler için bunu yapmamıza olanak tanır.
Bileşen odaklı geliştirmenin bazı avantajları arasında, öğeleri yönetilebilir parçalara ayırarak yeniden kullanılabilir bileşenlerle geliştirme süresini kısaltmak yer alır. Tasarımcılar, ön uç ve arka uç geliştiriciler ile kalite kontrol uzmanlarının aynı anda çalışmasına olanak tanır. Müşteriler, tasarımcılar ve proje yöneticileri gibi kullanıcılar da web sitesi yayına alındıktan sonra derleme işlemini önizleyebildikleri ve canlı stil kılavuzunu referans olarak kullanabildikleri için bu özelliği beğeniyor.
Ancak erişilebilirliği göz önünde bulundurarak kalıplara, bileşenlere ve tasarım sistemlerine baktığımızda bazı sorular ortaya çıkıyor. Erişilebilirlik açısından hangi kalıpların en iyi olduğunu nasıl anlarsınız? Yerleşik bir kalıp veya kitaplık mı kullanmalısınız yoksa yenilerini mi oluşturmalısınız? Bu kalıpların kullanıcılarınıza gerçekten yardımcı olup olmayacağını nasıl anlarsınız?
Mevcut seçeneklerin çokluğu nedeniyle desenler, bileşenler ve tasarım sistemleri konusunda kafanız karışabilir. Bu modül, erişilebilirlik için kalıpları, bileşenleri ve tasarım sistemlerini nasıl değerlendireceğiniz hakkında genel bilgiler vermeyi ve daha erişilebilir seçimler yapmanıza yardımcı olacak bir başlangıç noktası sunmayı amaçlar.
Eleştirel düşünün
Erişilebilir bir desen, bileşen veya tasarım sistemi seçmek zor bir iş olmasa da zaman ve eleştirel düşünme gerektirir. Aslında "tek bir mükemmel desen" yoktur ancak işe yarayabilecek birçok seçenek olabilir. Burada amaç, benzersiz durumunuz için en iyi seçeneği belirlemeyi öğrenmektir.
Sonraki test modüllerinde, erişilebilirlik için desenleri, bileşenleri ve tasarım sistemlerini değerlendirme teknikleri ve yöntemleri hakkında daha fazla bilgi edineceksiniz. Bu noktaya gelmeden önce kendinize şu gibi temel soruları sormanız gerekir:
- Yerleşik bir erişilebilir kalıp, bileşen veya tasarım sistemi var mı?
- Hangi tarayıcıları ve yardımcı teknolojileri (AT) destekliyorum?
- Kod veya çerçeve sınırlamaları var mı? Göz önünde bulundurmam gereken başka entegrasyonlar, faktörler veya kullanıcı ihtiyaçları var mı?
Geliştirme ortamınıza ve kullanıcı ihtiyaçlarınıza bağlı olarak bu soruların dışında ek veya farklı sorularınız olabilir. Erişilebilirlik değerlendirmenize başlarken bu soruları başlangıç noktası olarak göz önünde bulundurun.
Yerleşik kaynaklar
Sıfırdan bir şey oluşturmadan önce gerekli özeni gösterin ve erişilebilir kalıplar, bileşenler ve tasarım sistemleri açısından mevcut olanları inceleyin. Kısa bir araştırma yaparak ihtiyaçlarınıza uygun bir veya birden fazla çözüm bulabilirsiniz.
Erişilebilir kalıplar, bileşenler ve tasarım sistemleri için bazı harika kaynaklar:
- Erişilebilir Bileşenler
- Deque University ARIA kitaplığı
- Gov.UK Design System
- Kapsayıcı Bileşenler
- MagentaA11y
- ABD federal hükümeti için oluşturulan ABD Web Tasarımı Sistemi (USWDS)
- Smashing Magazine'den erişilebilir desenlerin listesi
JavaScript çerçeveleri için aşağıdaki kaynaklara varsayılan olarak oldukça kolay erişilebilir veya erişilebilirlik için özelleştirilebilir:
- CSS Yeterli Olmadığında: Erişilebilir Bileşenler İçin JavaScript Koşulları
- Tepki verme
- Angular: Material kitaplığı
- Vue: Vuetensils
Ancak, yeterince vurgulanamayacak bir nokta olarak, kodu asla kopyalayıp yapıştırmamalı ve ortamınıza uyacağını ve kullanıcı ihtiyaçlarınızı otomatik olarak karşılayacağını varsaymamalısınız. Bu durum, tamamen erişilebilir olarak etiketlenmiş olsa bile tüm kalıplar, bileşenler ve tasarım sistemleri için geçerlidir.
Tüm kaynaklar başlangıç noktası olarak değerlendirilmelidir. Her şeyi test ettiğinizden emin olun.
Tarayıcılar ve yardımcı teknoloji (AT) desteği
Geliştirme ortamınızda işe yarayabilecek birkaç temel kalıbı, bileşeni veya tam tasarım sistemini araştırdıktan sonra yardımcı teknoloji desteğine geçebilirsiniz. Desenleri, bileşenleri ve tasarım sistemlerini değerlendirirken odaklanmanız gereken önemli bir yardımcı teknoloji türü ekran okuyuculardır.
Ekran okuyucular belirli tarayıcılar düşünülerek geliştirilmiştir ve bu tarayıcılarla birlikte kullanıldığında en iyi şekilde çalışır. Bu konuyu AT testi modülünde çok daha ayrıntılı olarak ele alacağız. Ancak kalıp değerlendirmesi amacıyla, bu kombinasyonların varlığını anlamak, destek açısından neye ihtiyacınız olduğunu bilmeniz açısından faydalıdır.
| Ekran okuyucu | OS | Tarayıcı uyumluluğu | Maliyet |
|---|---|---|---|
| Job Access with Speech (JAWS) | Windows | Chrome, Firefox, Edge | Lisans gereklidir (40 dakikalık ücretsiz sürümü mevcuttur) |
| Non-Visual Desktop Access (NVDA) | Windows | Chrome ve Firefox | Ücretsiz (indirme gerektirir) |
| Anlatıcı | Windows | Edge | Ücretsiz (Windows makinelerine yerleştirilmiştir) |
| VoiceOver | macOS | Safari | Ücretsiz (macOS makinelerine yerleştirilmiştir) |
| Orca | Linux | Firefox | Ücretsiz (Gnome tabanlı dağıtımlara yerleştirilmiştir) |
| TalkBack | Android | Chrome ve Firefox | Ücretsiz (Android OS'nin belirli sürümlerinde yerleşik olarak bulunur) |
| VoiceOver | iOS | Safari | Ücretsiz (iOS cihazlarda yerleşik) |
Tarayıcı desteği genellikle karmaşıktır. İşler, AT cihazlarını ve ARIA özelliklerini de eklediğinizde daha da zorlaşır.
Ancak bu durumun iyi yanları da var. Neyse ki HTML5 Accessibility, Accessibility Support ve WCAG'nin Custom Control Accessible Development Checklist gibi harika kaynaklar, mevcut tarayıcı ve AT cihaz desteğini daha iyi anlamamıza ve ARIA'yı ne zaman kullanmamız gerektiğine yardımcı oluyor.
Bu kaynaklarda, açık kaynak topluluk testleri de dahil olmak üzere kullanılabilen farklı HTML ve ARIA kalıbı alt öğeleri açıklanmaktadır. Masaüstü, mobil tarayıcılar ve AT cihazları için bazı kalıp örneklerini de inceleyebilirsiniz. Bu nedenle, bu kaynaklar kullanmak isteyebileceğiniz kalıplar, bileşenler ve tasarım sistemleri hakkında daha erişilebilir bir karar vermenize yardımcı olabilir.
Dikkat edilmesi gereken diğer noktalar
Birkaç erişilebilir temel kalıp veya bileşen seçip tarayıcı ve AT cihaz desteğini göz önünde bulundurduktan sonra kalıp, bileşen, tasarım sistemi ve geliştirme ortamıyla ilgili daha spesifik bağlamsal sorulara geçebilirsiniz.
Örneğin, bir içerik yönetim sisteminde (İYS) çalışıyorsanız veya eski kodunuz varsa kullanabileceğiniz desenlerle ilgili bazı sınırlamalar olabilir. İnceleme sonucunda, birkaç desen seçeneği hızlıca bir veya iki seçeneğe indirilebilir.
Birçok JavaScript çerçevesi, geliştiricilerin istedikleri deseni kullanmasına olanak tanır. Bu gibi durumlarda daha az kısıtlamayla karşılaşabilir ve en erişilebilir desen seçeneğini belirleyebilirsiniz.
Desen, bileşen veya tasarım sistemi seçerken dikkate alınması gereken başka noktalar da vardır. Örneğin:
- Performans
- Güvenlik
- Arama motoru optimizasyonu
- Dil çevirisi desteği
- Üçüncü taraf entegrasyonları
Bu faktörler, desen seçiminizi şüphesiz etkileyecektir ancak içeriği ve kodu oluşturan kişileri de göz önünde bulundurmalısınız. Seçtiğiniz kalıp, editör tarafından oluşturulan veya kullanıcı tarafından oluşturulan içeriklerle ilgili olası sınırlamaları kaldıracak kadar sağlam olmalı ve her düzeyde erişilebilirlik bilgisine sahip geliştiricilerin kullanabileceği şekilde oluşturulmalıdır.