Erişilebilirlik ve Kapsayıcılık İçin Tasarlama

“Erişilebilirlik tasarım aşamasında çözülür.” Bu, Daniel Na ve ekibinin bir konferansa katılırken tekrar tekrar duydukları bir ifadedir. Erişilebilirlik için tasarlamak , kullanıcılarınızın ihtiyaçlarını kapsayıcı olmak demektir. Buna hedef kullanıcılarınız, hedef demografinizin dışındaki kullanıcılar, engelli kullanıcılar ve hatta farklı kültür ve ülkelerden gelen kullanıcılar dahildir. Bu ihtiyaçları anlamak, onlar için daha iyi ve daha erişilebilir deneyimler yaratmanın anahtarıdır.

Erişilebilirlik için tasarım yaparken en yaygın sorunlardan biri, hangi ihtiyaçlar için tasarım yapmanız gerektiğini bilmektir. Kullanıcıları kasıtlı olarak hariç tutmak için tasarladığımızdan değil, sadece “ne bilmediğimizi bilmiyoruz”. Dolayısıyla, erişilebilirlik söz konusu olduğunda, bilinmesi gereken çok şey var.

Sayısız kullanıcıyı ve ihtiyaçlarını nasıl anlayacağız? Tasarımlarımızda ihtiyaçlarının karşılandığından nasıl emin olabiliriz? Bu soruları yanıtlamak için, bir tasarımı farklı merceklerden inceleyerek eleştirel bir analiz tekniği uygulamanın yararlı olduğunu buldum.

"İyi [erişilebilir] tasarım, [tasarımınıza] birçok farklı perspektiften veya mercekten baktığınızda ortaya çıkar."

— Oyun Tasarımı Sanatı: Mercek Kitabı

Mercek, “bir konunun ele alınabileceği veya incelenebileceği daraltılmış bir filtredir”. Genellikle sanat, edebiyat veya film eserlerini incelemek için kullanılan lensler, bizden dünya görüşümüzü geride bırakmamızı ve bunun yerine dünyaya farklı bir bağlamda bakmamızı ister.

Örneğin, sanata tarihin merceğinden bakmak, “zamanın sosyal, politik, ekonomik, kültürel ve/veya entelektüel iklimini” anlamamızı ister. Bu, dünyanın hangi etkilerinin sanatçıyı etkilediğini ve bunun sanat eserini ve mesajını nasıl şekillendirdiğini daha iyi anlamamızı sağlar.

Erişilebilirlik lensleri, tasarımın farklı yönlerinin kullanıcıların ihtiyaçlarını nasıl etkilediğini anlamak için kullanabileceğimiz bir filtredir. Her lens, tasarım süreci boyunca kendinize sormanız için bir dizi soru sunar. Bu lensleri kullanarak, kullanıcılarınızın ihtiyaçlarını daha kapsayıcı hale getirerek herkes için daha erişilebilir bir kullanıcı deneyimi tasarlamanıza olanak tanırsınız.

Erişilebilirlik Objektifleri şunlardır:

• Animasyon ve Efekt Objektifi
• Ses ve Video Merceği
• Renk Lensi
• Kontrol Merceği
• Yazı Tipi Lensi
• Görüntülerin ve Simgelerin Merceği
• Klavye Lensi
• Düzen Lensi
• Malzeme Dürüstlük Objektifi
• Okunabilirlik Lensi
• Yapı Lensi
• Zaman Objektifi

Her lensin her tasarım için geçerli olmayacağını bilmelisiniz. Bazıları her tasarıma uygulanabilirken, diğerleri daha durumsaldır. Bir tasarımda en iyi sonuç veren, başka bir tasarımda işe yaramayabilir.

Her bir lens tarafından sağlanan sorular, yalnızca hangi sorunların ortaya çıkabileceğini anlamanıza yardımcı olacak bir araçtır. Her zaman olduğu gibi, tasarımınızı kullanıcılar tarafından kullanılabilir ve erişilebilir olduğundan emin olmak için test etmelisiniz.

Animasyon ve Efekt Objektifi

Etkili animasyonlar, bir sayfaya ve markaya hayat vermeye, kullanıcıların odaklanmasına rehberlik etmeye ve bir kullanıcıyı yönlendirmeye yardımcı olabilir. Ancak animasyonlar iki ucu keskin bir kılıçtır. Animasyonları yanlış kullanmak yalnızca kafa karışıklığına neden olmakla veya dikkati dağıtmakla kalmaz, aynı zamanda bazı kullanıcılar için potansiyel olarak ölümcül olabilir.

Hızlı yanıp sönme etkileri (saniyede üç defadan fazla yanıp sönme olarak tanımlanır) veya yüksek yoğunluklu etkiler ve kalıplar, 'ışığa duyarlı epilepsi' olarak bilinen nöbetlere neden olabilir. Fotosensitivite ayrıca baş ağrısına, mide bulantısına ve baş dönmesine neden olabilir. Işığa duyarlı epilepsisi olan kullanıcılar, bir şeyin ne zaman nöbete neden olabileceğini asla bilemeyecekleri için web'i kullanırken çok dikkatli olmalıdırlar.

Paralaks veya hareket efektleri gibi diğer etkiler, bazı kullanıcıların baş dönmesi hissetmesine veya vestibüler hassasiyet nedeniyle baş dönmesi yaşamasına neden olabilir. Vestibüler sistem, bir kişinin dengesini ve hareket hissini kontrol eder. Bu sistem olması gerektiği gibi çalışmadığında baş dönmesi ve mide bulantısına neden olur.

"Dahili jiroskopunuzun düzgün çalışmadığı bir dünya hayal edin. Sarhoş olmaya çok benzer, her şey kendiliğinden hareket ediyor gibi görünüyor, ayaklarınız hiçbir zaman altınızda sabit görünmüyor ve duyularınız vücudunuzdan daha hızlı veya daha yavaş hareket ediyor.

— Vestibüler Bozukluklara Astar

Sürekli animasyonlar veya hareketler, özellikle konsantre olmakta zorluk çeken kullanıcılar için dikkati dağıtabilir. Gözlerimiz harekete doğru çekildiğinden GIF'ler özellikle sorunludur ve sürekli güncellenen veya hareket eden herhangi bir şey tarafından dikkatimizin dağılmasını kolaylaştırır.

Bu, animasyonun kötü olduğu ve onu kullanmamanız gerektiği anlamına gelmez. Bunun yerine, animasyonu neden kullandığınızı ve nasıl daha güvenli animasyonlar tasarlayacağınızı anlamalısınız. Genel olarak konuşursak, küçük mesafeleri kapsayan, diğer hareketli nesnelerin (kaydırma dahil) yönüne ve hızına uyan ve nispeten ekran boyutuna göre küçük olan animasyonlar tasarlamaya çalışmalısınız.

Ayrıca, kullanıcı için deneyimi sağlamak için kontroller veya seçenekler sağlamalısınız. Örneğin, Slack, hem genel bir ayar olarak hem de görüntü bazında animasyonlu görüntüleri veya emojileri gizlemenize olanak tanır.

Animasyon ve Efekt Lensini kullanmak için kendinize şu soruları sorun:

• Nöbete neden olabilecek herhangi bir etki var mı?
• Hareket kullanımıyla baş dönmesine veya baş dönmesine neden olabilecek herhangi bir animasyon veya efekt var mı?
• Sürekli hareket ederek, yanıp sönerek veya otomatik olarak güncellenerek dikkati dağıtabilecek animasyonlar var mı?
• Herhangi bir animasyon veya efekti durdurmak, duraklatmak, gizlemek veya sıklığını değiştirmek için kontroller veya seçenekler sağlamak mümkün müdür?

Ses ve Video Lensi

Otomatik oynatılan videolar ve ses oldukça can sıkıcı olabilir. Yalnızca kullanıcının konsantrasyonunu bozmakla kalmaz, aynı zamanda kullanıcıyı rahatsız edici medyayı bulmaya ve onu susturmaya veya durdurmaya zorlar. Genel bir kural olarak, medyayı otomatik olarak oynatmayın.

“Otomatik oynatmayı idareli kullanın. Otomatik oynatma güçlü bir etkileşim aracı olabilir, ancak istenmeyen ses oynatılırsa veya istenmeyen video oynatmanın sonucu olarak gereksiz kaynak kullanımı (örn. veri, pil) algılarsa kullanıcıları rahatsız edebilir.”

— Google Otomatik Oynatma yönergeleri

Şimdi muhtemelen, "Peki ya videoyu arka planda otomatik olarak oynatıp sessize alırsam?" diye soruyorsunuzdur. Videoları arka plan olarak kullanmak günümüzün web tasarımında büyüyen bir trend olsa da, arka plan videoları GIF'ler ve sürekli hareket eden animasyonlarla aynı sorunlardan muzdariptir: dikkat dağıtıcı olabilirler. Bu nedenle, videoyu duraklatmak veya devre dışı bırakmak için kontroller veya seçenekler sağlamalısınız.

Kontrollerin yanı sıra, kullanıcıların içeriği kendileri için en iyi şekilde tüketebilmeleri için videoların dökümleri ve/veya altyazıları olmalıdır. Görme engelli veya videoyu izlemek yerine okumayı tercih eden kullanıcıların deşifre, videoyu dinleyemeyen veya dinlemek istemeyen kullanıcıların ise alt yazıya ihtiyacı vardır.

Ses ve Video Merceğini kullanmak için kendinize şu soruları sorun:

• Otomatik oynatarak can sıkıcı olabilecek herhangi bir ses veya video var mı?
• Otomatik oynatılan ses veya videoları durdurmak, duraklatmak veya gizlemek için kontroller sağlamak mümkün müdür?
• Videoların transkriptleri ve/veya altyazıları var mı?

Renk Lensi

Tasarımda renk önemli bir rol oynar. Renkler duyguları, hisleri ve fikirleri çağrıştırır. Renkler ayrıca bir markanın mesajını ve algısını güçlendirmeye yardımcı olabilir. Yine de, bir kullanıcı onları göremediğinde veya farklı şekilde algıladığında renklerin gücü kaybolur.

Renk körlüğü kabaca 12 erkekten 1'ini ve 200 kadından 1'ini etkiler. Deuteranopia (kırmızı-yeşil renk körlüğü), erkeklerin yaklaşık %6'sını etkileyen renk körlüğünün en yaygın şeklidir. Kırmızı-yeşil renk körlüğü olan kullanıcılar genellikle kırmızıları, yeşilleri ve portakalları sarımsı olarak algılar.

Uluslararası kullanıcılar için renk anlamı da sorunludur. Renkler farklı ülkelerde ve kültürlerde farklı anlamlar ifade eder. Batı kültürlerinde kırmızı, genellikle olumsuz eğilimleri ve yeşil olumlu eğilimleri temsil etmek için kullanılır, ancak Doğu ve Asya kültürlerinde bunun tersi doğrudur.

Renkler ve anlamları kültürel farklılıklar veya renk körlüğü nedeniyle kaybolabileceğinden, her zaman renk olmayan bir tanımlayıcı eklemelisiniz. Simgeler veya metin açıklamaları gibi tanımlayıcılar, desenler renkleri ayırt etmek için iyi çalışırken kültürel farklılıklar arasında köprü kurmaya yardımcı olabilir.

Aşırı doygun renkler, yüksek kontrastlı renkler ve hatta sadece sarı renk, özellikle otizm spektrumundaki bazı kullanıcılar için rahatsız edici ve rahatsız edici olabilir. Kullanıcıların rahat etmesine yardımcı olmak için bu tür renklerin yüksek konsantrasyonlarından kaçınmak en iyisidir.

Ön plan ve arka plan renkleri arasındaki zayıf kontrast, az gören, düşük kaliteli bir monitör kullanan veya doğrudan güneş ışığı alan kullanıcıların görmesini zorlaştırır. Klavye kullanan kullanıcılar için kullanılan tüm metinler, simgeler ve odak göstergeleri, arka plan rengine göre minimum 4,5:1 kontrast oranını karşılamalıdır.

Ayrıca tasarımınızın ve renklerinizin Windows Yüksek Karşıtlık modunun farklı ayarlarında iyi çalıştığından emin olmalısınız. Yaygın bir tuzak, metnin belirli yüksek karşıtlık modu arka planlarında görünmez hale gelmesidir.

Renk Lensini kullanmak için kendinize şu soruları sorun:

• Tasarımdan renk çıkarılsaydı, hangi anlam kaybolurdu?
• Renk kullanmadan nasıl anlam sağlayabilirim?
• Kullanıcıların aşırı uyarılmasına veya rahatsız olmasına neden olabilecek aşırı doygun veya yüksek kontrastlı renkler var mı?
• Tüm metinlerin, simgelerin ve odak göstergelerinin ön plan ve arka plan rengi 4,5:1 kontrast oranı yönergelerini karşılıyor mu?

Kontrol Lensi

'Etkileşimli içerik' olarak da adlandırılan kontroller, düğmeler, bağlantılar, girişler veya bir olay dinleyicisine sahip herhangi bir HTML öğesi gibi kullanıcının etkileşimde bulunabileceği herhangi bir UI öğesidir. Çok küçük veya birbirine çok yakın kontroller, kullanıcılar için birçok soruna neden olabilir.

Titreme sorunu yaşayanlar veya yaşa bağlı olarak el becerisinde azalma olan kullanıcılar gibi bir işaretçiyle kesinlik sağlayamayan kullanıcılar için küçük kontrollere tıklamak zordur. Örneğin, onay kutularının ve radyo düğmelerinin varsayılan boyutu, daha yaşlı kullanıcılar için sorun oluşturabilir. Bunun yerine tıklanabilecek bir etiket sağlanmış olsa bile, tüm kullanıcılar bunu yapabileceklerini bilmiyor.

Birbirine çok yakın olan kontroller, dokunmatik ekran kullanıcıları için sorunlara neden olabilir. Parmaklar büyük ve kesin olması zor. Yanlış kontrole yanlışlıkla dokunmak, özellikle bu kontrol sizi uzaklaştırıyorsa veya bağlamınızı kaybetmenize neden oluyorsa, hayal kırıklığına neden olabilir.

Başka bir denetimin içine yerleştirilmiş denetimler de dokunma hatalarına katkıda bulunabilir. Yalnızca HTML spesifikasyonunda izin verilmemekle kalmaz, aynı zamanda istediğinizin yerine yanlışlıkla üst denetimi seçmeyi de kolaylaştırır.

Kullanıcılara bir denetimi doğru bir şekilde seçmeleri için yeterli alan sağlamak için, bir denetim için önerilen minimum boyut 34 x 34 cihazdan bağımsız pikseldir, ancak Google en az 48 x 48 piksel önerirken, WCAG özelliği en az 44 x 44 piksel önerir. Bu boyut, kontrolün sahip olduğu tüm dolguları da içerir. Bu nedenle, bir kontrol görsel olarak 24'e 24 piksel olabilir, ancak her tarafta ek 10 piksel dolgu ile onu 44'e 44 piksele çıkarır.

Dokunma hatalarını azaltmak için kontrollerin birbirinden yeterince uzağa yerleştirilmesi de önerilir. Microsoft, en az 8 piksel boşluk bırakılmasını önerirken, Google, denetimlerin en az 32 piksel aralıklı olmasını önerir.

Kontroller ayrıca görünür bir metin etiketine sahip olmalıdır. Ekran okuyucular, kontrolün ne yaptığını bilmek için metin etiketine ihtiyaç duymakla kalmaz, aynı zamanda metin etiketlerinin tüm kullanıcıların bir kontrol amacını daha iyi anlamasına yardımcı olduğu gösterilmiştir. Bu özellikle form girişleri ve simgeler için önemlidir.

Lens of Controls'ü kullanmak için kendinize şu soruları sorun:

• Herhangi birinin dokunması için yeterince büyük olmayan kontroller var mı?
• Yanlış olana dokunmayı kolaylaştıracak kadar birbirine çok yakın kontroller var mı?
• Başka bir kontrol veya tıklanabilir bölge içinde herhangi bir kontrol var mı?
• Tüm kontrollerin görünür bir metin etiketi var mı?

Yazı Tipi Lensi

Web'in ilk zamanlarında yazı tipi boyutu 9 ile 14 piksel arasında olan web sayfaları tasarlıyorduk. Bu, o zamanlar monitörlerin nispeten bilinen bir ekran boyutuna sahip olduğu için gayet iyi sonuç verdi. Tarayıcı penceresinin sabit olduğunu, değiştirilemeyecek bir şey olduğunu düşünerek tasarladık.

Günümüz teknolojisi 20 yıl öncesine göre çok farklı. Günümüzde tarayıcılar, küçük bir saatten büyük bir 4K ekrana kadar her boyuttaki cihazda kullanılabilir. Artık sitelerimizi tasarlamak için sabit yazı tipi boyutlarını kullanamıyoruz. Yazı tipi boyutları, tasarımın kendisi kadar duyarlı olmalıdır.

Yalnızca yazı tipi boyutları duyarlı olmamalı, aynı zamanda tasarım, kullanıcıların yazı tipi boyutunu, satır yüksekliğini veya harf aralığını rahat bir okuma düzeyine göre özelleştirmesine izin verecek kadar esnek olmalıdır. Birçok kullanıcı, daha iyi bir okuma deneyimine sahip olmalarına yardımcı olan özel CSS'yi kullanır.

Yazı tipinin kendisi okunması kolay olmalıdır. Bir yazı tipinin diğerinden daha okunabilir olup olmadığını merak ediyor olabilirsiniz. İşin aslı, yazı tipinin okunabilirlik üzerinde gerçekten bir fark yaratmamasıdır. Bunun yerine, yazı tipinin okunabilirliğinde önemli bir rol oynayan yazı tipi stilidir.

Dekoratif veya bitişik eğik yazı tipi stillerini okumak birçok kullanıcı için daha zordur, ancak özellikle disleksi olan kullanıcılar için sorunludur. Küçük yazı tipi boyutları, italik metin ve tüm büyük harfli metinler de kullanıcılar için zordur. Genel olarak, daha büyük metin, daha kısa satır uzunlukları, daha uzun satır yükseklikleri ve artan harf aralığı, tüm kullanıcıların daha iyi bir okuma deneyimi yaşamasına yardımcı olabilir.

Yazı Tipi Lensini kullanmak için kendinize şu soruları sorun:

• Tasarım, yazı tipinin kullanıcı tarafından rahat bir okuma düzeyine değiştirilebilmesi için yeterince esnek mi?
• Yazı tipi stilini okumak kolay mı?

Görüntülerin ve Simgelerin Objektifi

“Bir resim bin kelimeye bedeldir” derler. Yine de, göremediğiniz bir resim dilsizdir, değil mi?

Görüntüler, belirli bir anlam veya duygu iletmek için bir tasarımda kullanılabilir. Diğer zamanlarda karmaşık fikirleri basitleştirmek için kullanılabilirler. Görsel için durum ne olursa olsun, ekran okuyucu kullanan bir kullanıcıya görselin ne anlama geldiğinin söylenmesi gerekir.

Tasarımcı olarak görüntünün taşıdığı anlamı veya bilgiyi en iyi siz anlarsınız. Bu nedenle, daha sonra dışarıda bırakılmaması veya yanlış yorumlanmaması için tasarıma bu bilgilerle açıklama eklemelisiniz. Bu, görüntünün alternatif metnini oluşturmak için kullanılacaktır.

Bir görüntüyü nasıl tanımladığınız tamamen bağlama veya bilgiyi açıklayan ne kadar metinsel bilginin halihazırda mevcut olduğuna bağlıdır. Ayrıca görüntünün sadece dekorasyon amaçlı olup olmadığına, anlam ifade edip etmediğine veya metin içerip içermediğine de bağlıdır.

“Resmin neye benzediğini neredeyse hiç tarif etmiyorsunuz, bunun yerine resmin içerdiği bilgileri açıklıyorsunuz.”

— Uyumlu Alternatif Metin İçin Beş Altın Kural

Bir görüntüyü nasıl tanımlayacağınızı bilmek zor olabileceğinden, karar verirken yardımcı olacak kullanışlı bir karar ağacı vardır. Genel olarak konuşursak, görüntü dekoratif ise veya görüntünün bilgisini zaten açıklayan çevreleyen metin varsa, daha fazla bilgiye gerek yoktur. Aksi takdirde, resmin bilgilerini açıklamanız gerekir. Resim metin içeriyorsa, açıklamadaki metni de tekrarlayın.

Açıklamalar kısa olmalıdır. İkiden fazla cümle kullanmamanız önerilir, ancak mümkün olduğunda kısa bir cümle hedefleyin. Bu, kullanıcıların uzun bir açıklamayı dinlemek zorunda kalmadan görüntüyü hızlı bir şekilde anlamalarını sağlar.

Örnek olarak, bu görüntüyü bir ekran okuyucu için tanımlayacak olsanız ne söylerdiniz?

Resmin kendisini değil, resmin bilgisini tanımladığımız için, onu tanımlayan başka bir çevre bağlamı olmadığından açıklama Vincent van Gogh'un Yıldızlı Gece olabilir. Resmin tarzının veya resmin nasıl göründüğünün bir açıklamasını koymamanız gerekir.

Görselin bilgisi, karmaşık bir grafik gibi uzun bir açıklama gerektiriyorsa, bu açıklamayı alternatif metne koymamalısınız. Bunun yerine, alternatif metin için yine de kısa bir açıklama kullanmalı ve ardından uzun açıklamayı başlık veya farklı bir sayfaya bağlantı olarak sağlamalısınız.

Bu şekilde, kullanıcılar yine de en önemli bilgileri hızlı bir şekilde alabilirler, ancak isterlerse daha fazla ayrıntıya girme olanağına sahip olurlar. Resim bir grafiğe aitse, resimdeki metin için yaptığınız gibi grafiğin verilerini tekrarlamalısınız.

Tasarladığınız platform, kullanıcıların resim yüklemesine izin veriyorsa, kullanıcının resimle birlikte alternatif metni girmesi için bir yol sağlamalısınız. Örneğin Twitter, kullanıcılarının bir tweet'e resim yüklediklerinde alternatif metin yazmasına izin verir.

Görüntülerin ve Simgelerin Merceğini kullanmak için kendinize şu soruları sorun:

• Herhangi bir resim, görüntülenemediğinde kaybolacak bilgiler içeriyor mu?
• Bilgileri görsel olmayan bir şekilde nasıl sağlayabilirim?
• Görüntü kullanıcı tarafından kontrol ediliyorsa, alt metin açıklamasını girmeleri için bir yol sağlamak mümkün müdür?

Klavye Lensi

Klavye erişilebilirliği, erişilebilir bir tasarımın en önemli yönlerinden biridir, ancak aynı zamanda en çok gözden kaçanlardan biridir.

Bir kullanıcının fare yerine klavye kullanmasının birçok nedeni vardır. Ekran okuyucu kullanan kullanıcılar, sayfayı okumak için klavyeyi kullanır. Titreme yaşayan bir kullanıcı klavye kullanabilir çünkü fareden daha iyi doğruluk sağlar. Uzman kullanıcılar bile daha hızlı ve daha verimli olduğu için bir klavye kullanır.

Klavye kullanan bir kullanıcı, sırayla her denetime gitmek için genellikle sekme tuşunu kullanır. Sekme sırası için mantıksal bir sıra, kullanıcıların bir sonraki tuşa basıldığında onları nereye götüreceğini bilmelerine büyük ölçüde yardımcı olur. Batı kültürlerinde bu genellikle soldan sağa, yukarıdan aşağıya anlamına gelir. Beklenmeyen sekme siparişleri, kullanıcıların kaybolmasına ve odağın nereye gittiğini çılgınca taramak zorunda kalmasına neden olur.

Sıralı sekme sırası ayrıca, istediklerinden önceki tüm kontroller arasında gezinmeleri gerektiği anlamına gelir. Bu kontrol onlarca veya yüzlerce tuş vuruşu uzaktaysa, kullanıcı için gerçek bir acı noktası olabilir.

En önemli kullanıcı akışlarını sekme sırasının en üstüne yaklaştırarak, kullanıcılarımızın daha verimli ve etkili olmasına yardımcı olabiliriz. Ancak, bunu yapmak her zaman mümkün ve pratik değildir. Bu durumlarda, belirli bir akışa veya içeriğe hızlı bir şekilde atlamak için bir yol sağlamak, yine de verimli olmalarını sağlayabilir. Bu nedenle "içeriğe geç" bağlantıları yararlıdır.

Buna güzel bir örnek, kullanıcıların sitenin belirli bölümlerine atlamasına olanak tanıyan bir klavye gezinme menüsü sağlayan Facebook'tur. Bu, bir kullanıcının sayfa ve istedikleri içerikle etkileşim kurma yeteneğini büyük ölçüde hızlandırır.

Bir tasarımda gezinirken odak stilleri her zaman görünür olmalıdır, aksi takdirde kullanıcı kolayca kaybolabilir. Beklenmedik bir sekme sırası gibi, iyi odak göstergelerinin olmaması, kullanıcıların o anda neye odaklanıldığını bilmemesine ve sayfayı taramak zorunda kalmasına neden olur.

Varsayılan odak göstergesinin görünümünü değiştirmek bazen kullanıcıların deneyimini iyileştirebilir. İyi bir odak göstergesi, odağı (Lens of Color) belirtmek için yalnızca renge dayanmaz ve kullanıcının onu kolayca bulmasını sağlayacak kadar belirgin olmalıdır. Örneğin, benzer şekilde renkli bir mavi düğmenin etrafındaki mavi bir odak halkası, odaklandığını anlamak için görsel olarak farklı olmayabilir.

Bu lens klavye erişilebilirliğine odaklansa da, bir kullanıcının bir web sitesiyle fare olmadan etkileşimde bulunabileceği herhangi bir şekilde geçerli olduğunu unutmamak önemlidir. Ağız çubukları, geçiş erişim düğmeleri, yudum ve nefes düğmeleri ve göz izleme yazılımı gibi cihazların tümü, sayfanın klavyeyle erişilebilir olmasını gerektirir.

Klavye erişilebilirliğini geliştirerek, çok çeşitli kullanıcıların sitenize daha iyi erişmesine izin verirsiniz.

Klavye Lensini kullanmak için kendinize şu soruları sorun:

• Tasarım için en anlamlı klavye gezinme sırası hangisidir?
• Bir klavye kullanıcısı istediklerine mümkün olan en hızlı şekilde nasıl ulaşabilir?
• Odak göstergesi her zaman görünür ve görsel olarak farklı mı?

Düzen Lensi

Düzen, bir sitenin kullanılabilirliğine büyük ölçüde katkıda bulunur. Bulması kolay içerikle takip edilmesi kolay bir düzene sahip olmak, kullanıcılarınız için tüm farkı yaratır. Bir düzen, kullanıcı için anlamlı ve mantıklı bir sıraya sahip olmalıdır.

CSS Grid'in ortaya çıkmasıyla birlikte, mevcut alana dayalı olarak düzeni daha anlamlı olacak şekilde değiştirebilmek her zamankinden daha kolay. Ancak görsel düzeni değiştirmek, sayfanın yapısal düzenine güvenen kullanıcılar için sorun yaratır.

Yapısal düzen, ekran okuyucular ve klavye kullanan kullanıcılar tarafından kullanılan düzendir. Görsel düzen değiştiğinde ancak alttaki yapısal düzen değişmediğinde, sekme sırası artık mantıklı olmadığı için bu kullanıcıların kafası karışabilir. Görsel düzeni değiştirmeniz gerekiyorsa, bunu yapısal düzeni değiştirerek yapmalısınız, böylece klavye kullanan kullanıcılar sıralı ve mantıksal bir sekme düzenini sürdürür.

Düzen, telefonda rahatça görüntülenebilmesi için yeniden boyutlandırılabilir ve yatay kaydırma çubukları olmadan minimum 320 piksele kadar esnek olmalıdır. Düzen ayrıca, daha iyi bir okuma deneyimi için yazı tipi boyutunu büyütmesi gereken kullanıcılar için %400'e yakınlaştırılabilecek kadar esnek olmalıdır (yatay kaydırma çubukları da yoktur).

İlgili içerik birbirine yakın olduğunda ekran büyüteci kullanan kullanıcılar yararlanır. Bir ekran büyüteci, kullanıcıya tüm düzenin yalnızca küçük bir görünümünü sağlar, bu nedenle ilgili ancak çok uzakta olan veya etkileşimin gerçekleştiği yerden çok uzakta değişen içeriğin bulunması zordur ve fark edilmeyebilir.

Lens of Layout'u kullanmak için kendinize şu soruları sorun:

• Düzenin anlamlı ve mantıklı bir sırası var mı?
• Küçük bir ekranda görüntülendiğinde veya %400'e yakınlaştırıldığında düzene ne olmalı?
• İlgili veya kullanıcı etkileşimi nedeniyle değişen içerik birbirine çok yakın mı?

Malzeme Dürüstlük Objektifi

Malzeme dürüstlüğü, bir malzemenin kendisine karşı dürüst olması ve başka bir malzemenin yerine kullanılmaması gerektiğini ifade eden bir mimari tasarım değeridir. Bu, betonun beton gibi görünmesi ve tuğla gibi görünmek için boyanmaması veya şekillendirilmemesi gerektiği anlamına gelir.

Malzeme dürüstlüğü, her malzemenin benzersiz özelliklerini ve özelliklerini değerlendirir ve kutlar. Malzeme dürüstlüğünü takip eden bir mimar, her malzemenin ne zaman kullanılması gerektiğini ve kendini lekelemeden nasıl kullanılacağını bilir.

Ancak maddi dürüstlük zor ve hızlı bir kural değildir. Bir süreklilik üzerinde yer alır. Tüm değerler gibi, onları anladığınızda onları kırmanıza izin verilir. Söylendiği gibi, bunlar “gerçek kurallardan daha çok “yönergeler” olarak adlandırdığınız şeydir.”

Web tasarımına uygulandığında, malzeme dürüstlüğü, bir öğenin veya bileşenin, başka bir öğe veya bileşenmiş gibi görünmemesi, davranmaması veya işlev görmemesi gerektiği anlamına gelir. Bunu yapmak kullanıcıyı aldatabilir ve kafa karışıklığına neden olabilir. Bunun yaygın bir örneği, bağlantılara benzeyen düğmeler veya düğmelere benzeyen bağlantılardır.

Bağlantılar ve düğmeler farklı davranışlara ve olanaklara sahiptir. Enter tuşuyla bir bağlantı etkinleştirilir, genellikle sizi farklı bir sayfaya götürür ve sağ tıklamada özel bir bağlam menüsü vardır. Düğmeler, öncelikle geçerli sayfadaki etkileşimleri tetiklemek için kullanılan boşluk tuşuyla etkinleştirilir ve böyle bir bağlam menüsü yoktur.

Bir bağlantı bir düğme gibi görünecek şekilde veya tam tersi şekilde tasarlandığında, göründüğü gibi davranmadığı ve çalışmadığı için kullanıcının kafası karışabilir. "Düğme" kullanıcıyı beklenmedik bir şekilde uzaklaştırırsa, işlem sırasında veri kaybettikleri takdirde hüsrana uğrayabilirler.

“İlk bakışta her şey yolunda görünüyor, ancak incelemeye dayanamayacak. Böyle bir web sitesi, çeşitli tarayıcılarda gerçek kullanımla stres testi yapılır yapılmaz, cephe çöküyor.”

— Esnek Web Tasarımı

Bunun en sorunlu hale geldiği yer, bir bağlantı ve düğmenin aynı stilde olduğu ve yan yana yerleştirildiği zamandır. İkisi arasında ayrım yapacak hiçbir şey olmadığı için, bir kullanıcı, olmayacağını düşündüğü zaman yanlışlıkla gezinebilir.

Bir bileşen beklenenden farklı davrandığında, klavye veya ekran okuyucu kullanan kullanıcılar için kolayca sorunlara yol açabilir. Bir otomatik tamamlama menüsünden daha fazlası olan bir otomatik tamamlama menüsü böyle bir örnektir.

Otomatik tamamlama, bir kullanıcının yazdığı kelimenin geri kalanını önermek veya tahmin etmek için kullanılır. Otomatik tamamlama menüsü, kullanıcının tüm seçenekler gösterilemediğinde geniş bir seçenekler listesinden seçim yapmasına olanak tanır.

Bir otomatik tamamlama menüsü tipik olarak bir giriş alanına eklenir ve odağı giriş alanının içinde tutarak yukarı ve aşağı ok tuşlarıyla gezinilir. Bir kullanıcı listeden bir seçenek seçtiğinde, bu seçenek giriş alanındaki metni geçersiz kılar. Otomatik tamamlama menüleri, yalnızca metin listeleri anlamına gelir.

Sorun, bir otomatik tamamlama menüsü daha fazla davranış kazanmaya başladığında ortaya çıkar. Listeden yalnızca bir seçenek belirlemekle kalmaz, aynı zamanda düzenleyebilir, silebilir, hatta bölümleri genişletebilir veya daraltabilirsiniz. Otomatik tamamlama menüsü artık yalnızca seçilebilir metinlerden oluşan basit bir liste değildir.

Eklenen davranışlar artık bir seçeneği belirlemek için yukarı ve aşağı okları kullanabileceğiniz anlamına gelmiyor. Artık her seçeneğin birden fazla eylemi vardır, bu nedenle kullanıcının yalnızca bir boyut yerine iki boyutu geçebilmesi gerekir. Bu, klavye kullanan bir kullanıcının bileşenin nasıl çalıştırılacağı konusunda kafasının karışabileceği anlamına gelir.

Bu davranış değişikliğinden en çok ekran okuyucular etkileniyor çünkü bunu anlamalarına yardımcı olacak kolay bir yol yok. Menüye, standart olmayan araçlar kullanılarak bir ekran okuyucunun erişebilmesini sağlamak için çok çalışmak gerekecektir. Bu nedenle, onlar için ortalamanın altında veya erişilemez bir deneyime neden olabilir.

Bu sorunlardan kaçınmak için kullanıcıya ve tasarıma karşı dürüst olmak en iyisidir. İki farklı davranışı (otomatik tamamlama menüsü ve düzenleme ve silme işlevi) birleştirmek yerine, bunları iki ayrı davranış olarak bırakın. Bir kullanıcının adını otomatik olarak tamamlamak için bir otomatik tamamlama menüsü kullanın ve kullanıcıları düzenlemek ve silmek için farklı bir bileşene veya sayfaya sahip olun.

Maddi Dürüstlük Objektifini kullanmak için kendinize şu soruları sorun:

• Tasarım kullanıcıya karşı dürüst mü?
• Başka bir öğe gibi davranan, görünen veya işlev gören herhangi bir öğe var mı?
• Farklı davranışları tek bir bileşende birleştiren herhangi bir bileşen var mı? Bunu yapmak, bileşeni maddi olarak sahtekâr yapar mı?

Okunabilirlik Objektifi

Hiç bir kitabı sadece birkaç paragraf veya sayfa almak için aldınız mı ve metni okumak çok zor olduğu için vazgeçmek istediniz mi? İçeriği okumak zor, zihinsel olarak yorucu ve yorucu.

Cümle uzunluğu, paragraf uzunluğu ve dilin karmaşıklığı, metnin ne kadar okunabilir olduğuna katkıda bulunur. Karmaşık dil, özellikle bilişsel engelli veya dilde akıcı olmayan kullanıcılar için sorun oluşturabilir.

Sade ve sade bir dil kullanmanın yanı sıra her paragrafın tek bir fikre odaklanmasını sağlamalısınız. Tek bir fikri olan bir paragrafı hatırlamak ve sindirmek daha kolaydır. Aynı şey daha az kelime içeren bir cümle için de geçerlidir.

İçeriğin okunabilirliğine katkıda bulunan diğer bir faktör de satırın uzunluğudur. İdeal satır uzunluğunun genellikle 45 ile 75 karakter arasında olduğu belirtilir. Çok uzun bir satır, kullanıcıların odağını kaybetmesine ve bir sonraki satıra doğru bir şekilde geçmelerini zorlaştırırken, çok kısa bir satır, kullanıcıların çok sık atlamalarına ve gözlerde yorgunluğa neden olur.

“Bir sonraki satıra atlarken bilinçaltı zihin enerjilenir. Her yeni satırın başında okuyucu odaklanır, ancak bu odak, satır boyunca yavaş yavaş aşınır.

— Tipografi: Tasarım El Kitabı

Ayrıca okuyucuya zihinsel molalar vermek ve farklı öğrenme stillerini desteklemek için içeriği başlıklar, listeler veya resimlerle ayırmalısınız. Bilgileri mantıksal olarak gruplamak ve özetlemek için başlıkları kullanın. Başlıklar, bağlantılar, kontroller ve etiketler, kullanıcıların anlama yeteneğini geliştirmek için açık ve açıklayıcı olmalıdır.

Okunabilirlik Objektifini kullanmak için kendinize şu soruları sorun:

• Dili sade ve basit mi?
• Her paragraf tek bir fikre mi odaklanıyor?
• Uzun paragraflar veya uzun kesintisiz metin blokları var mı?
• Tüm başlıklar, bağlantılar, kontroller ve etiketler açık ve açıklayıcı mı?

Yapı Lensi

Lens of Layout'ta belirtildiği gibi, yapısal düzen, ekran okuyucular ve klavye kullanan kullanıcılar tarafından kullanılan şeydir. Lens of Layout görsel yerleşime odaklanırken, Lens of Structure yapısal yerleşime veya tasarımın altında yatan HTML ve anlambilimine odaklanır.

Bir tasarımcı olarak tasarımlarınızın yapısal düzenini yazamazsınız. Bu, tasarımınızın nihayetinde nasıl yapılandırılacağını düşünmekten sizi alıkoymamalıdır. Aksi takdirde, tasarımınız bir ekran okuyucu için erişilemez bir deneyime neden olabilir.

Örneğin, tek elemeli turnuva grubu için bir tasarım alın.

Bu tasarımın ekran okuyucu kullanan bir kullanıcı tarafından erişilebilir olup olmadığını nasıl anlarsınız? Yapıyı ve anlambilimi anlamadan, yapamazsınız. Halihazırda, tasarım muhtemelen ekran okuyucu kullanan bir kullanıcı için erişilemez bir deneyimle sonuçlanacaktır.

Bunun nedenini anlamak için öncelikle bir ekran okuyucunun bir sayfayı ve içeriğini sırayla okuduğunu anlamamız gerekir. Bu, turnuvanın ilk sütunundaki her ismin okunacağı, ardından ikinci sütundaki tüm isimlerin, ardından üçüncü ve sonuncunun okunacağı anlamına gelir.

"George, Fred, Linus, Lucy, Jack, Jill, Fred, Ginger, George, Lucy, Jack, Ginger, George, Ginger, Ginger."

Tüm sahip olduğunuz, görünüşte rastgele isimlerden oluşan bir liste olsaydı, turnuvanın sonuçlarını nasıl yorumlardınız? Turnuvayı kimin kazandığını söyleyebilir misiniz? Ya da 6. maçı kim kazandı?

Üzerinde çalışacak başka bir şey olmadığından, ekran okuyucu kullanan bir kullanıcının sonuçlar konusunda kafası muhtemelen biraz karışacaktır. Görsel tasarımı anlayabilmek için yapısal tasarımda kullanıcıya daha fazla bilgi vermeliyiz.

Bu, bir tasarımcı olarak, ekran okuyucunun bir sayfadaki HTML öğeleriyle nasıl etkileşime girdiğini bilmeniz gerektiği anlamına gelir, böylece onların deneyimini nasıl geliştireceğinizi bilirsiniz.

• Landmark Öğeleri (üstbilgi, gezinme, ana ve altbilgi)
  Allow a screen reader to jump to important sections in the design.
• Headings ( h1 → h6 )
  Allow a screen reader to scan the page and get a high level overview. Screen readers can also jump to any heading.
• Lists ( ul and ol )
  Group related items together, and allow a screen reader to easily jump from one item to another.
• Buttons
  Trigger interactions on the current page.
• Links
  Navigate or retrieve information.
• Form labels
  Tell screen readers what each form input is.

Knowing this, how might we provide more meaning to a user using a screen reader?

To start, we could group each column of the tournament into rounds and use headings to label each round. This way, a screen reader would understand when a new round takes place.

Next, we could help the user understand which players are playing against each other each game. We can again use headings to label each game, allowing them to find any game they might be interested in.

By just adding headings, the content would read as follows:

“__Round 1, Game 1__, George, Fred, __Game 2__, Linus, Lucy, __Game 3__, Jack, Jill, __Game 4__, Fred, Ginger, __Round 2, Game 5__, George, Lucy, __Game 6__, Jack, Ginger, __Round 3__, __Game 7__, George, Ginger, __Winner__, Ginger.”

This is already a lot more understandable than before.

The information still doesn't answer who won a game though. To know that, you'd have to understand which game a winner plays next to see who won the previous game. For example, you'd have to know that the winner of game four plays in game six to know who advanced from game four.

We can further enhance the experience by informing the user who won each game so they don't have to go hunting for it. Putting the text “(winner)” after the person who won the round would suffice.

We should also further group the games and rounds together using lists. Lists provide the structural semantics of the design, essentially informing the user of the connected nodes from the visual design.

If we translate this back into a visual design, the result could look as follows:

Since the headings and winner text are redundant in the visual design, you could hide them just from visual users so the end visual result looks just like the first design.

“If the end result is visually the same as where we started, why did we go through all this?” You may ask.

The reason is that you should always annotate your design with all the necessary structural design requirements needed for a better screen reader experience. This way, the person who implements the design knows to add them. If you had just handed the first design to the implementer, it would more than likely end up inaccessible.

To use the Lens of Structure , ask yourself these questions:

• Can I outline a rough HTML structure of my design?
• How can I structure the design to better help a screen reader understand the content or find the content they want?
• How can I help the person who will implement the design understand the intended structure?

Lens Of Time

Periodically in a design you may need to limit the amount of time a user can spend on a task. Sometimes it may be for security reasons, such as a session timeout. Other times it could be due to a non-functional requirement, such as a time constrained test.

Whatever the reason, you should understand that some users may need more time in order finish the task. Some users might need more time to understand the content, others might not be able to perform the task quickly, and a lot of the time they could just have been interrupted.

“The designer should assume that people will be interrupted during their activities”

— The Design of Everyday Things

Users who need more time to perform an action should be able to adjust or remove a time limit when possible. For example, with a session timeout you could alert the user when their session is about to expire and allow them to extend it.

To use the Lens of Time , ask yourself this question:

• Is it possible to provide controls to adjust or remove time limits?

Bringing It All Together

So now that you've learned about the different lenses of accessibility through which you can view your design, what do you do with them?

The lenses can be used at any point in the design process, even after the design has been shipped to your users. Just start with a few of them at hand, and one at a time carefully analyze the design through a lens.

Ask yourself the questions and see if anything should be adjusted to better meet the needs of a user. As you slowly make changes, bring in other lenses and repeat the process.

By looking through your design one lens at a time, you'll be able to refine the experience to better meet users' needs. As you are more inclusive to the needs of your users, you will create a more accessible design for all your users.

Using lenses and insightful questions to examine principles of accessibility was heavily influenced by Jesse Schell and his book “The Art of Game Design: A Book of Lenses.”