Kalıplar, bileşenler ve tasarım sistemleri

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:

JavaScript çerçeveleri için aşağıdaki kaynaklara ilk andan itibaren erişilebilir veya erişilebilirlik için kolayca özelleştirilebilirler:

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?

Hayır, önce bileşenlerinizi test etmeniz gerekir.
Evet, bu bileşenleri ek çalışma yapmadan kullanabilirsiniz.