Pembe Tasarımda Erişilebilirlik

Ürünler oluştururken, erişilebilirlik sonradan akla gelebilir. Anlaşılır bir şekilde, ürünlerimizi hızlı bir şekilde göndermek ve kullanıcılarımıza değer katmak istiyoruz. Uç durumlar için erişilebilirliğin gerekli olduğunu düşünebilir ve bu nedenle buna öncelik vermeyebiliriz. Dünya Sağlık Örgütü'nün (WHO) küresel nüfusun %16'sının bir tür engelliliğe sahip olduğunu tahmin ettiğini hatırlatmak iyi olur (Aralık 2022).
Kullanıcı tabanınızın bu kadar önemli bir bölümünü göz ardı etmek, iyi bir kullanıcı deneyimi oluşturmaz.
Erişilebilir ürünler yaratmak herkesin sorumluluğundadır. Tasarımcılar, geliştiriciler, içerik yazarları ve ürünlerin oluşturulmasında yer alan diğer kişiler, üzerlerine düşeni yapmalı ve herkes için daha iyi bir deneyim elde etmek için çaba göstermelidir.

Yüksek düzeyde erişilebilirliği sürdürmek her zaman kolay değildir, ancak bir tasarım sistemi ile kesinlikle daha kolaydır. Appwrite'ın tamamen açık kaynaklı UI kitaplığı olan Pink Design'da oluşturduğumuz bileşenlerin erişilebilirlik düzeyi AA'dır. Bu, çoğu ürün için önerilen erişilebilirlik düzeyidir.

Ürünlerimizin yüksek erişilebilirlik düzeyini koruması için aşağıdakileri yaptık:

Yüksek renk kontrastı kullanın

Erişilebilirlik denildiğinde akla gelen ilk şey renk kontrastı olabilir. Metin ve arka plan arasındaki kontrast eksikliği, bazı kişilerin metni okuyamayacağı veya zorlukla okuyacağı anlamına gelebilir. Benzer şekilde, yüksek parlaklığa sahip parlak renkler başkaları tarafından okunamaz. W3C, AA uygunluk düzeyi için metin ve arka plan arasında 4,5'e 1 kontrast oranı önerir.

Renge güvenmemek

"Renk körlüğü" terimi genellikle belirli renkleri tanıma ve ayırt etmede güçlük çeken insanları tanımlamak için kullanılır, ancak renk körlüğü, yani herhangi bir rengi görememe, son derece nadir görülür. Birleşik Krallık Ulusal Sağlık Servisi'ne (NHS) göre , kırmızı-yeşil renk körlüğü 12 erkekten 1'ini ve 200 kadından 1'ini etkiliyor. Bu renk körlüğü olan kişiler kırmızı, turuncu, sarı, kahverengi ve yeşilleri ayırt etmekte zorluk çekebilirler. Ayrıca morun tonlarını ayırt etmekte zorlanabilirler ve kırmızıyı siyahla karıştırabilirler.
Benzer şekilde “mavi-sarı” renk görme bozukluğu olan kişiler de mavi, yeşil ve sarıyı ayırt etmekte zorlanabilirler.

Pink Design'da dört sistem rengi kullanıyoruz — kırmızı, turuncu, yeşil ve mavi. Bu renklerin her biri Appwrite konsolundaki bir durumu temsil eder — kırmızı bir hata veya tehlikeyi, turuncu bir uyarıyı, yeşil başarıyı ve mavi bilgiyi belirtir. Kullanıcılarımızın bu renkleri görürken karşılaşabilecekleri zorlukları bildiğimizden, kritik bilgilerin anlaşılır olması için renge güvenmiyoruz.

Klavye gezintisine izin ver

İnce motor kontrol kısıtlamaları olan veya engelli elleri veya kolları olan kişiler fare kullanamaz. Pink Design'da etkileşimli öğeler için farklı durumlar sağlıyoruz. Focus, hover, active gibi durumları tasarlayarak, tüm etkileşimli öğelerde bir klavye ile gezinme olanağı sağlıyoruz. Bu sadece erişilebilir bir deneyim değil, aynı zamanda Appwrite'ın geliştirici topluluğu da dahil olmak üzere klavyeyle gezinmeyi tercih eden tüm kullanıcılar için daha iyi bir deneyim.

Geliştirme yoluyla da erişilebilirliği artırmak mümkündür. Mühendislik ekibimizle işbirliği içinde, aşağıdakileri Pink Design'a dahil etmeye karar verdik:

REM'de yazı tipi boyutunu tanımlayın

Tarayıcıların, kullanıcıların tarayıcı ayarı aracılığıyla değiştirebileceği varsayılan bir yazı tipi boyutu vardır. Piksel, tarayıcı ayarlarını göz ardı eden sabit boyutlar ve boşluklar için mutlak bir birimdir. Bu, piksel kullanıyorsak ve bir kullanıcı (görme bozukluğu olan veya olmayan) tarayıcı ayarlarında yazı tipi boyutunu değiştirirse, ayarlarının ürünümüzü etkilemeyeceği anlamına gelir. Bununla birlikte, kullanıcı yakınlaştırırsa pikseller herhangi bir soruna neden olmaz, ancak kullanıcıların tercihleri ​​hakkında hiçbir varsayımda bulunmayız. Bu nedenle, göreceli bir birim olan REM'de yazı tipi boyutunu tanımlamaya karar verdik.

Kullanıcıların hareketi azaltmasına izin ver

Hiç şüphe yok ki animasyonlar her ürüne güzel bir ektir, ancak animasyonlar aynı zamanda insanların dikkatini dağıtabilir. Bazı durumlarda animasyonlar baş dönmesine, baş dönmesine veya sara nöbetlerine neden olabilir. Harekete duyarlı kullanıcılar, işletim sistemi ayarlarında hareketi azaltmayı seçebilir. Bu durumda onlar için animasyonu atlamalıyız. Pink Design'da, açılış sayfasında kitaplığın işlevselliğini göstermek için büyük bir animasyon oluşturmaya karar verdik. Animasyon 10 saniye uzunluğundadır ve sayfada gördüğünüz ilk şeydir. Sayfa yüklenir yüklenmez hemen başlar ancak işletim sisteminde “reduce motion” etkinleştirilmişse animasyon sona atlar.

Appwrite'da erişilebilirlik kesinlikle bir ekip çalışmasıdır. Hepimiz ürünlerimizdeki erişilebilir deneyimi sürdürmek ve geliştirmek için çalışıyoruz ve bu her zaman aklımızda. Erişilebilir bileşenleri kullanmak, erişilebilirlik düzeyimizi geliştirmemize yardımcı olur, ancak birçok engel türü olduğunu unutmamak önemlidir. Görme, hareket etme ve bilişsel engelleri olan kullanıcıların deneyimini geliştirmek için çalıştık ve daha da geliştirmek için çalışmaya devam edeceğiz.

Henüz yapmadıysanız projelerinizde veya Appwrite'a katkıda bulunurken Pink Design'ı kullanmak için Pink Design GitHub Deposuna göz atın veya Başlangıç ​​Kılavuzumuza göz atın .