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

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:

JavaScript çerçevelerinde aşağıdaki kaynaklar varsayılan olarak oldukça erişilebilirdir veya erişilebilirlik için özelleştirilebilir:

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?

Evet, bu bileşenleri ek çalışma yapmadan kullanabilirsiniz.
Erişilebilirlik için oluşturulmuş bir kaynağın otomatik olarak çalışma olasılığı diğer kaynaklara kıyasla daha yüksek olsa da bu bileşenlerin kullanıcılarınız için çalıştığından emin olmak amacıyla erişilebilirlik testi yapmanız önemlidir.
Hayır, önce bileşenlerinizi test etmeniz gerekir.
Erişilebilirlik için tasarlanmış bileşenler ve kalıplar bile test edilmelidir. Mevcut diğer bileşenlerle birlikte erişilemez olabilir.