Birçok kişi, geliştirme iş akışı sürecinde kalıp stil kılavuzları, bileşen kitaplıkları veya tam tasarım sistemleri kullanarak bileşene dayalı geliştirmeyi kullanır. Bu araçları resmi olarak kullanmamış olsanız bile bir web sitesi, uygulama veya başka bir dijital ürün için büyük bir tasarımı yönetilebilir parçalara ayırmak üzere benzer bir işlem kullanıyor olabilirsiniz.
Fiziksel bir yapı inşa ederken olduğu gibi, her seferinde bir parçayı 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 avantajlarından biri, öğeleri yönetilebilir parçalara ayırmaktır. Bu sayede, yeniden kullanılabilir bileşenler için daha az geliştirme süresi gerekir. Tasarımcıların, ön uç ve arka uç geliştiricilerin ve QA'nın aynı anda çalışmasına olanak tanır. Müşteriler, tasarımcılar, proje yöneticileri ve daha pek çok kişi, oluşturma sürecini önizleyebildiği ve web sitesi yayınlandıktan sonra referans olarak canlı stil kılavuzundan yararlanabildiği 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 en iyi kalıpları nasıl anlarsınız? Mevcut 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?
Çok sayıda seçenek arasından seçim yaparken kalıplar, bileşenler ve tasarım sistemleri konusunda kafanızın karışması kolaydır. Bu modül, kalıpları, bileşenleri ve tasarım sistemlerini erişilebilirlik açısından nasıl değerlendireceğiniz hakkında genel bilgi vermeyi ve daha erişilebilir seçimler yapmanıza yardımcı olacak bir başlangıç noktası sunmayı amaçlamaktadır.
Eleştirel düşünün
Erişilebilir bir desen, bileşen veya tasarım sistemi seçmek çok zor bir iş değildir ancak zaman ve eleştirel düşünme gerektirir. Aslında "tek bir mükemmel model" diye bir şey yoktur ancak işe yarayabilecek birçok seçenek olabilir. Burada, benzersiz durumunuz için en iyi seçeneği seçmeyi öğrenmeniz gerekir.
Sonraki test modüllerinde, kalıpları, bileşenleri ve tasarım sistemlerini erişilebilirlik açısından değerlendirmeyle ilgili teknikler ve yöntemler hakkında daha fazla bilgi edineceksiniz. Bu noktaya gelmeden önce kendinize şu gibi temel sorular sormanız gerekir:
- Halihazırda erişilebilir bir 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ırlaması var mı? Dikkate almam 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 sorulardan farklı veya daha fazla soru sorabilirsiniz. Erişilebilirlik değerlendirmenizde başlangıç noktası olarak bu soruları göz önünde bulundurun.
Kurulu kaynaklar
Yepyeni bir şey oluşturmadan önce gereken incelemeleri yapın ve erişilebilir kalıplar, bileşenler ve tasarım sistemleri açısından mevcut olanları inceleyin. Biraz araştırma yaparak ihtiyaçlarınıza uygun bir çözüm (veya birden fazla çözüm) bulabilirsiniz.
Erişilebilir kalıplar, bileşenler ve tasarım sistemleri için bazı mükemmel kaynaklar şunlardır:
- 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'daki erişilebilir kalıpların listesi
JavaScript çerçevelerinde aşağıdaki kaynaklar varsayılan olarak oldukça erişilebilirdir veya erişilebilirlik için özelleştirilebilir:
- CSS Yeterli Olmadığında: Erişilebilir Bileşenler İçin JavaScript Şartları
- Tepki ver
- Angular: Materyal kitaplığı
- Vue: Vuetensils
Ancak, ne kadar vurgulasak azdır; hiçbir zaman kodu kopyalayıp yapıştırıp ortamınıza uygun olacağını ve kullanıcı ihtiyaçlarını otomatik olarak karşılayacağını varsaymayın. 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 görülmelidir. Her şeyi test ettiğinizden emin olun.
Tarayıcılar ve yardımcı teknoloji (AT) desteği
Geliştirme ortamınız için uygun olabilecek birkaç temel kalıp, bileşen veya tam bir tasarım sistemi araştırdıktan sonra yardımcı teknoloji desteğine geçebilirsiniz. Kalıpları, bileşenleri ve tasarım sistemlerini değerlendirirken odaklanmanız gereken önemli AT türlerinden biri ekran okuyuculardır.
Ekran okuyucular belirli tarayıcılar göz önünde bulundurularak tasarlanmıştır ve bu tarayıcılarla birlikte kullanıldığında en iyi performansı gösterir. AT testi modülünde bu konuyu çok daha ayrıntılı bir şekilde ele alacağız. Ancak kalıp değerlendirmesi amacıyla, bu kombinasyonların var olduğunu anlamak, destek açısından neye ihtiyacınız olduğunu bilmenizi sağlar.
| Ekran okuyucu | OS | Tarayıcı uyumluluğu | Maliyet |
|---|---|---|---|
| İşe Sesle Erişim (JAWS) | Windows | Chrome, Firefox, Edge | Lisans gereklidir (40 dakikalık ücretsiz bir sürümü mevcuttur) |
| Görsel Olmayan Masaüstü Erişimi (NVDA) | Windows | Chrome ve Firefox | Ücretsiz (indirme gerekir) |
| Anlatıcı | Windows | Edge | Ücretsiz (Windows makinelerine yerleşik) |
| VoiceOver | macOS | Safari | Ücretsiz (macOS makinelere yerleşik) |
| Orca | Linux | Firefox | Ücretsiz (Gnome tabanlı dağıtımlara yerleştirilmiştir) |
| TalkBack | Android | Chrome ve Firefox | Ücretsiz (Android OS'in belirli sürümlerine yerleşik) |
| VoiceOver | iOS | Safari | Ücretsiz (iOS cihazlara yerleşik) |
Tarayıcı desteği genellikle karmaşıktır ve AT cihazları ile ARIA özelliklerini de eklediğinizde işler daha da karmaşık hale gelir.
Ancak kötü bir haberimiz de var. Neyse ki HTML5 Erişilebilirlik, Erişilebilirlik Desteği ve WCAG'nin Özel Denetleyici Erişilebilir Geliştirme Kontrol Listesi gibi mükemmel kaynaklar, mevcut tarayıcı ve AT cihaz desteğini ve hatta ARIA'nın ne zaman kullanılacağını daha iyi anlamamıza yardımcı oluyor.
Bu kaynaklarda, açık kaynak topluluğu testleri dahil olmak üzere kullanılabilen farklı HTML ve ARIA desen 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 kolay karar vermenize yardımcı olabilir.
Dikkat edilmesi gereken diğer noktalar
Erişilebilir birkaç temel kalıp veya bileşen seçtikten ve tarayıcı ile AT cihaz desteğini hesaba kattıktan sonra kalıp, bileşen, tasarım sistemi ve geliştirme ortamı hakkında daha spesifik bağlamsal sorulara geçebilirsiniz.
Örneğin, bir yönetim sisteminde (İYS) çalışıyorsanız veya eski kodunuz varsa kullanabileceğiniz kalıplarla ilgili bazı sınırlamalar olabilir. İnceleme sonucunda, birkaç desen seçeneği hızlıca bir veya iki seçenekle sınırlandırılabilir.
Birçok JavaScript çerçevesi, geliştiricilerin istedikleri neredeyse tüm kalıpları kullanmalarına olanak tanır. Bu gibi durumlarda daha az kısıtlamanız olabilir ve en erişilebilir desen seçeneğini belirleyebilirsiniz.
Bir desen, bileşen veya tasarım sistemi seçerken dikkate almanız gereken başka hususlar da vardır. Örneğin:
- Performans
- Güvenlik
- Arama motoru optimizasyonu
- Dil çevirisi desteği
- Üçüncü taraf entegrasyonları
Bu faktörler, desen seçiminizi etkileyecektir ancak içeriği ve kodu oluşturan kişileri de göz önünde bulundurmanız gerekir. Seçtiğiniz kalıp, düzenleyici tarafından oluşturulan veya kullanıcı tarafından oluşturulan içeriklerle ilgili olası tüm sınırlamaları ele alacak kadar güçlü olmalı ve tüm erişilebilirlik bilgisine sahip geliştiricilerin kullanabileceği şekilde oluşturulmalıdır.
Öğrendiklerinizi test etme
Desenlerle ilgili bilginizi test edin
Erişilebilir bileşenler kullanıcılar için her zaman erişilebilir mi?