Birçok kişi, geliştirme iş akışı sürecinde desen stili kılavuzları, bileşen kitaplıkları veya tam tasarım sistemleri kullanarak bileşen odaklı geliştirme kullanır. Bu araçları resmî olarak kullanmamış olsanız bile bir web sitesi, uygulama veya başka bir dijital ürünün büyük bir tasarımını yönetilebilir parçalara ayırmak için benzer bir süreci kullanmanız muhtemeldir.
Fiziksel bir yapı inşa etmek gibi, her parçayı tek tek inşa etmek önemlidir. İlki temel, yapı, duvarlar, pencereler, çatı ve aradaki her şey. Bileşen odaklı geliştirme araçları, bunu web siteleri, uygulamalar ve diğer dijital ürünler için yapmamıza olanak tanır.
Bileşen odaklı geliştirmenin bazı avantajları, öğeleri yönetilebilir parçalara bölmeyi içerir. Böylece, bu yeniden kullanılabilir bileşenlerle daha az geliştirme süresi sağlanır. Tasarımcıların, ön uç ve arka uç geliştiricilerinin ve KG'nin eşzamanlı olarak çalışmasını sağlar. Müşteriler, tasarımcılar, proje yöneticileri ve daha pek çok kişi bunu seviyor. Çünkü bu sayede web sitesi kullanıma sunulduktan sonra derleme sürecini önizleyebilir ve bir yaşam tarzı rehberini referans olarak kullanabilirler.
Ancak kalıplara, bileşenlere ve tasarım sistemlerine erişilebilirliği göz önünde bulundurduğumuzda akıllara bazı sorular geliyor. Erişilebilirlikle ilgili en iyi kalıpların hangileri olduğunu nasıl anlarsınız? Tanınmış bir kalıp/kitaplık mı kullanmanız yoksa yenilerini mi oluşturmanız gerekiyor? 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 düşünüldüğünde bu konuyla ilgili kafanızın karışması kolaydır. Bu modülün amacı, erişilebilirlik için kalıpları, bileşenleri ve tasarım sistemlerini nasıl değerlendireceğiniz konusunda genel bilgiler vermek ve daha erişilebilir seçimler yapmanıza yardımcı olacak bir başlangıç noktasıdır.
Eleştirel düşünün
Erişilebilir bir desen, bileşen veya tasarım sistemi seçmek roket bilimi değildir, ama zaman alır ve eleştirel düşünmeyi gerektirir. Aslında "mükemmel tek bir kalıp" diye bir şey yoktur, ancak potansiyel olarak işe yarayabilecek birçok seçenek olabilir. Önemli olan, durumunuza en uygun seçeneği belirlemeyi öğrenmektir.
Sonraki test modüllerinde modelleri, bileşenleri ve sistemleri erişilebilirlik açısından nasıl değerlendireceğinize dair teknik ve yöntemler hakkında daha fazla bilgi edineceksiniz. Ancak bu aşamadan önce durup kendinize bazı temel sorular sormanız gerekir. Örneğin:
- Tanınmış bir erişilebilir kalıp, bileşen veya tasarım sistemi zaten var mı?
- Hangi tarayıcıları ve yardımcı teknolojileri (AT) destekliyorum?
- Kod/çerçeve sınırlamaları veya dikkate almam gereken başka entegrasyonlar/faktörler/kullanıcı ihtiyaçları var mı?
Geliştirme ortamınıza ve kullanıcı ihtiyaçlarınıza bağlı olarak bunlardan farklı veya başka sorular sorabilirsiniz. Bu soruları erişilebilirlik değerlendirmenizin başlangıç noktası olarak düşünün.
Oluşturulan kaynaklar
Yeni bir şey üretmeden önce gerekli özeni gösterin ve erişilebilir kalıplar, bileşenler ve tasarım sistemleri açısından mevcut olan öğeleri gözden geçirin. Sadece küçük bir araştırmayla, ihtiyaçlarınıza uygun bir çözüm (veya birden fazla) bulduğunuzda şaşırabilirsiniz.
Erişilebilir kalıplar, bileşenler ve tasarım sistemleri için yararlı kaynaklardan bazıları şunlardır:
- Erişilebilir Bileşenler
- Deque Üniversitesi ARIA kitaplığı
- Gov.UK Tasarım Sistemi
- Kapsayıcı Bileşenler
- MagentaA11y
- ABD federal hükümeti için oluşturulmuş U.S. Web Design System (USWDS)
- Smashing Dergisi'ndeki erişilebilir kalıpların listesi
JavaScript çerçeveleri için aşağıdaki kaynaklara ilk andan itibaren erişilebilir veya erişilebilirlik için kolayca özelleştirilebilirler:
- CSS Yeterli Olmadığında: Erişilebilir Bileşenler İçin JavaScript Gereksinimleri
- Tepki
- Angular: Malzeme kitaplığı
- Vue: Vuetensiller
Ancak bu, yeterince vurgulanmamalıdır. Hiçbir zaman kodu kopyalayıp yapıştırarak ortamınıza uyacağını ve kullanıcı ihtiyaçlarınızı otomatik olarak karşılayacağını varsaymamalısınız. Bu, 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 mutlaka test edin!
Tarayıcı ve yardımcı teknoloji (AT) desteği
Geliştirme ortamınıza uygun olabilecek birkaç temel kalıbı, bileşeni veya tam tasarım sistemini araştırdıktan sonra yardımcı teknoloji desteğine geçebilirsiniz. Kalıpları, bileşenleri ve tasarım sistemlerini değerlendirirken odaklanmak isteyeceğiniz başlıca AT türü ekran okuyuculardır.
Ekran okuyucular belirli tarayıcılar göz önünde bulundurularak tasarlanmıştır ve bu tarayıcılarla eşlendiğinde en iyi performansı gösterir. AT testi ile ilgili modülde bu konuyu çok daha ayrıntılı bir şekilde ele alacağız. Ancak kalıp değerlendirme amacıyla, bu kombinasyonların varlığını anlamak ve destek açısından neye ihtiyacınız olduğunu anlamak faydalı olacaktır.
| Ekran okuyucu | OS | Tarayıcı uyumluluğu | Maliyet |
|---|---|---|---|
| Konuşma ile İş Erişimi (JAWS) | Windows | Chrome, Firefox, Edge | Lisans gerekiyor (40 dakikalık ücretsiz bir sürümü var) |
| Görsel Olmayan Masaüstü Erişimi (NVDA) | Windows | Chrome ve Firefox | Ücretsiz (indirmek gerekir) |
| Anlatıcı | Windows | Edge | Ücretsiz (Windows makinelerde yerleşik olarak bulunur) |
| VoiceOver | macOS | Safari | Ücretsiz (macOS makinelerde yerleşik) |
| Katil balina | Linux | Firefox | Ücretsiz (Gnome tabanlı dağıtımlarda yerleşik olarak bulunur) |
| 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 olarak bulunur) |
Tarayıcı desteği genellikle karmaşıktır ve karışıma AT cihazları ve ARIA spesifikasyonlarını eklediğinizde işler daha da karmaşık hale gelir.
Ancak tüm bunlar kötü haberler değildir. Neyse ki HTML5 Erişilebilirliği, Erişilebilirlik Desteği ve WCAG'in Özel Denetim İçin Erişilebilir Geliştirme Kontrol Listesi gibi mükemmel kaynaklar, mevcut tarayıcı ve AT cihaz desteğini, hatta ARIA'yı ne zaman kullanacağınızı daha iyi anlamamıza yardımcı oluyor.
Bu kaynaklar, açık kaynak topluluk testleri dahil olmak üzere kullanılabilecek farklı HTML ve ARIA kalıbı alt öğelerini özetlemektedir. Ayrıca, bazı kalıp örneklerini inceleyebilirsiniz (hem masaüstü hem mobil tarayıcılar/AT cihazları için). Bu nedenle bu kaynaklar kullanmak isteyebileceğiniz kalıplar, bileşenler ve tasarım sistemleri konusunda daha erişilebilir kararlar almanıza yardımcı olabilir.
Dikkat edilmesi gereken diğer noktalar
Erişilebilir birkaç temel kalıp veya bileşen seçip tarayıcı ve AT cihaz desteğini hesaba kattıktan sonra kalıp, bileşen, tasarım sistemi ve geliştirme ortamıyla ilgili 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. İncelemenin ardından, birkaç desen seçeneği hızlı bir şekilde bir veya iki seçeneğe kesilebilir.
Birçok JavaScript çerçevesi, geliştiricilerin seçtikleri hemen her kalıbı kullanmalarına olanak tanır. Bu gibi durumlarda daha az kısıtlamaya sahip olabilir ve en erişilebilir kalıp seçeneğini seçebilirsiniz.
Desen, bileşen veya tasarım sistemi seçerken tartmanız gereken ek hususlar vardır. Örneğin:
- Performans
- Güvenlik
- Arama motoru optimizasyonu
- Dil çeviri desteği
- Üçüncü taraf entegrasyonları
Kalıp seçiminiz kuşkusuz bu faktörlerle alakalıdır. Ancak, içeriği ve kodu oluşturan kişileri de hesaba katmanız gerekir. 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ın üstesinden gelecek kadar sağlam olmalı ve erişilebilirlik bilgisine sahip tüm geliştiricilerinin kullanabileceği bir şekilde oluşturulmalıdır.
Öğrendiklerinizi sınayın
Örüntüler hakkındaki bilginizi test edin
Erişilebilir bileşenler kullanıcılar için her zaman erişilebilir durumda kalıyor mu?