Web Erişilebilirliği (WCAG) Kontrol Listesi: Web sitenizin herkes için çalışmasını sağlayın.

Web siteniz 'kapıyı kapalı' mı, milyonlarca müşteri koyuyor mu? Herkesin bilmesi gereken kontrol listesi web erişilebilirliğini (WCAG) açın.
Hayal edin ... büyük bir pazarlama bütçeniz var. Çekin Web sitesi güzel tasarlanmıştır. Ancak ürünleriniz "satın almak isteyen" bir grup insan var ama olamaz ... parası olmadığı için değil, web siteniz onun için "kullandığından"
Bu insan grubu ekran okuyucuları kullanılarak görsel olarak bozulabilir, ancak web sitenizin bir açıklaması yoktur. Ya da ellerin titremeye başladığı yaşlı olabilir, küçük düğmenizi veya hatta geçici kolları olan bir kişiyi kolayca kullanamıyor ... Hepsi bilmeden dışarı ittiğiniz "müşteriler".
Bu sorun küçük bir mesele değil. Ve artık herkesin eşitlikten bahsettiği bir çağda uzak bir konu değil, herkesin erişebileceği veya web erişilebilirliğinin sadece "yapılacak iyi şeyler" değil, aynı zamanda muazzam iş fırsatlarının kilidini açmak için "ihtiyaç duyulan standart". Ve gelecekte meydana gelebilecek yasal riski önleyin
İstemi: Bölünmüş ekran görüntüleri karşılaştırılır. Bir taraf, kolayca gülümseyen bir müşterinin resmidir. Diğer taraf, göz kusurları olan bir müşterinin resmidir. (Beyaz personelin yanında bir sembolü olabilir). Aynı web sitesini kullanmaya çalışırken bir hayal kırıklığı yaratıyorum. Ancak bilgisayar ekranı bir bozulma, erişimdeki engelleri gösterir
Güzel web sitesi neden müşterileri engelleyen bir "duvar" haline geliyor?
Bu sorun, birçok işletmenin göz ardı ettiği "kör noktalardan" kaynaklanmaktadır. Her insanın "iyi deneyiminin" aynı olmadığını unutana kadar çoğu insanın gözünde "güzel" için web tasarımına takıntılı olma eğilimindeyiz. Bunun ana nedeni:
- "Yapı" yerine "Görüntüler" e odaklanın: Tasarımcılar ve pazarlamacılar düzen, renk ve animasyonun güzelliğine odaklanma eğilimindedir, ancak ekran okuyucusu gibi teknolojiye (yardımcı teknoloji) yardımcı olmanın anahtarı olan doğru HTML yapısını ihmal eder, web'deki "anlayabilir" ve "iletişim".
- Sorun ve yanlış anlama: Birçok kişi, web erişilebilirliğinin sadece "küçük engelli insanlar" meselesi olduğunu düşünüyor, ancak gerçekte birçok insanla ilgilidir. Hem yaşlılar, geçici engelli insanlar (kırık kollar gibi) hem de sınırlı bir durumda insanlar (güneşte küçük bir kontrast renkte görülmeyen ağ kullanma gibi). 2022'deki verilerden Tayland'ın yaklaşık 4.19 milyon engelli insanı veya toplam nüfusun yaklaşık% 6'sı var. Bu göz ardı edemeyeceğiniz bir pazar.
- Bence "karmaşık ve pahalı" bir teknik: "Standart" veya "WCAG" kelimesi korkutucu ve teknik terimlerle dolu olabilir. İşletme sahibinin bunun uzak bir konu olduğunu hissetmesine neden olmak ve aslında erişilebilirliğe rağmen yüksek yatırım yapmak zorunda çok az bütçe kullanabilecek küçük bir noktadan başlayabilir
İstemi: Basit infografik görüntüler, içinde dişli olan bir beyin görüntüsünü gösterir, ancak "sadece görsellere odaklanma", "farkındalık eksikliği", sorunun nedenini iletmek için kısa bir mesajla göz şekilli simgeler, kulaklar ve ellerle çıkan bazı dişliler vardır.
Bırakın ... Düşündüğünden daha riskli! Web siteniz "herkese hoş gelmediğinde" etkisi
Web erişilebilirliğine giriş sadece iş fırsatlarını eksik değil, aynı zamanda birçok boyutta markanızın riskidir.
- Gelir ve müşteri kaybı: Bu en açık etkidir. Satın alma gücü olan büyük bir grup müşteri ile satış yapma fırsatını kapatıyorsunuz. Doğrudan Engellilere veya tüm grupları önemseyen markaları desteklemeyi seçen aileleri ve arkadaşları olsun
- Yasal Risk: Dünyanın birçok ülkesinde engelliler için bir web sitesi yapmayan birçok özel şirket vardır. Tayland'ın kendisi, engelli 2007'nin yaşam kalitesinin teşvik edilmesi ve geliştirilmesi ve bilgi ve hizmetlere erişme hakkını destekleyen ilgili bakanlık düzenlemeleri için hareket etmektedir. Her ne kadar özel sektörün mevcut% 100'ü devlet kurumları kadar yoğun olmasa da, bu çok uzak görünen işin hazırlanması gerektiği dünyanın eğilimidir.
- Markanın güvenilirliğini kırın (Marka Trust): Tüketicilerin markayı "değer" den desteklemeyi seçtikleri, markanın olumsuz ve yok edilmiş bir görüntü oluşturabilen bir grup insanı caydıran bir web sitesine sahip olduğu, kompozisyonun web sitesinde güven yarattığı bir web sitesine sahip. Yaratmaya çalışıyorsun
- SEO'yu etkilemek: Google, Kullanıcı Deneyimi (UX) için çok önemlidir. Sabit Access web sitesi genellikle SEO için kötü bir sinyal olan yüksek bir sıçrama oranı, düşük sayfa sayfasına sahiptir. Buna ek olarak, doğru başlık etiketleri, ALT metni ve net yapıların kullanımı gibi erişilebilirliğin birçok öğesi de sıralama ve çekirdek web canlıları .
İstemi: Resim 4 kart şeklinde 4 efekt gösterir: Birinci kartın uçan bir para resmi vardır, ikinci yapraklar çekiç, üçüncü yaprak kırık bir marka logosu ve dördüncü yapraklar riski iletmek için kırmızı bir tonu olan SEO grafikleridir.
Sorunları Çözmek İçin Kutsal Yazıları Açma: 4 WCAG Prensibi ile Başlamak
Merak etme. Web erişimini yapmak düşündüğünüz kadar zor değil. , "Pour" u hatırlaması kolay 4 ana prensipe bölünmüş olan Web İçeriği Erişilebilirlik Yönergeleri (WCAG) adlı uluslararası bir standarttadır Bakalım her öğenin ne olduğunu ve hemen hangi kontrol listesi başlıyorsunuz?
1. Algılanabilir (algı) - kullanıcıların içeriği çeşitli duyularla tanımasına izin vermek
- [] Tüm görüntülerin bir açıklaması olmalıdır (alt metin): Bu resmin ne olduğunu açıklamak için yazın. Böylece görme engelli için ekran okuyucu programı okunabilir
- [] Video ve ses dosyalarının başka seçenekleri olmalıdır: sağırlar için altyazılar veya kör insanlar için ses açıklaması ve transkript gibi.
- [] Düzgün çelişmesi gereken renk: metin ve arka plan, bulanık veya körlüğü olan kişilerin okunması kolaydır, böylece yeterli kontrast oranı olmalıdır (normal metin için en az 4.5: 1).
- [] Sadece renklerle iletişim kurmayın: Altında Olmadan Kırmızıya Bir Bağlantı Sunmak gibi renk körlüğüne neden olabilir, bunun bir bağlantı olup olmadığını bilmiyorum
2. Operble (mevcut) - Kullanıcıların çeşitli web bileşenlerini kontrol etmesine ve kullanmasına olanak tanır.
- [] Tüm işlevler klavye üzerinden kullanılmalıdır: Fareyi kullanamayan kullanıcılar, bağlantıya, düğmeye ve çeşitli forma kaydırmak için sekmeye basabilmelidir.
- [] "Klavye Tuzağı" yok: Kullanıcılar klavyeyi hareket etmek ve web sitesinin çeşitli yerlerinden "çıkmalı", açılır sürülmede kalmalıdır.
- [] Yeterli kullanıcı zamanı verin: Otomatik bir oturum varsa, kullanıcıların zamanında talep etmeleri için seçenekler olmalıdır.
- [] Şiddetli yanıp sönen içerikten kaçının: yanıp sönen ışık (saniyede 3 kez) bazı insanlarda nöbetleri uyarabilir.
3. Yoksul (anlaşılması kolay) - İçeriği ve kullanımı yapmak çok karmaşık değildir.
- [] Açık ve basit bir dil kullanın: Açıklamalar olmadan teknik kelime bilgisinden veya endüstri kelime bilgisinden kaçının.
- [] Gezinme ve navigasyon tahmin edilmelidir: Kullanıcıların öğrenmesi ve kolayca kullanması için her sayfada menü ve düzeni tutarlı olacak şekilde tasarlayın.
- [] Net bir hata var: Kullanıcı formu doldurduğunda yanlış "nerede yanlış" ve "nasıl düzeltilir" hakkında açık bir mesaja sahip olmalıdır.
4. Sağlam (Dayanıklı) - Web'in çeşitli teknoloji ile çalışmasına izin vermek
- [] Standart HTML Kodunu Kullanma: Temiz ve Doğru Kod Yapısı (etiket kullanma gibi
,,
,,Sorumlu olmak) programın en iyi çalışmayı okumasına yardımcı olacak
- [] Durumu ve Programda Değişiklikleri Okumaya Yardımcı Olmak İçin Değişiklikler: Örneğin, ürün sepete eklendiğinde, programı okumaya ve duyurmaya yardımcı olacak bir kod olmalıdır.
Derinlemesine daha fazla bilgi edinmek istiyorsanız, W3C Web Erişilebilirlik Girişimi (WAI) A11Y projesi gibi topluluk resmi bir başlangıç noktasıdır.
İstemi: Pour'a göre 4 parçaya bölünmüş güzel Infographic (algılanabilir, operasyonel, sağlam, sağlam). Her parçanın bir ana simgesi (el şekli, beyin şekli, dişliler) ve altında 2-3 kısa bir kontrol listesi vardır.
Gerçek Şeyden Örnekler: "Çevrimiçi Mağazalar" erişilebilirlikle% 20'lik satışları artırdığında.
Ünlü bir çevrimiçi tatlı dükkanı olan "Baan Bakery" i hayal edin. İlk başta, web sitesi çok güzel. Ancak yaşlı müşterilerin küçük harflerin okunmasının zor olduğunu ve "sepete ekleme düğmesi" o kadar hafifti ki, takımın elden geçirmeye karar verdiği görülemedi. Büyük Erişilebilirlik
Ne yapmalı: Web'i sökmezler. Ancak AA seviye WCAG'a göre güncellemeden başlayarak. Renk düğmesini daha koyu olacak şekilde ayarlarlar. Yazı tipinin boyutunu biraz daha büyük artırın, "çilek, yumuşak kek, meyve sosuyla tepesinde" her kek parçasına alt metin ekleyin ve müşterilerin sadece klavyeyi kullanarak her adım sipariş edebileceğinden emin olun.
Şaşırtıcı sonuçlar: "Baan Bakery" satışlarından sadece 3 ay sonra sadece yaşlılardan değil, neredeyse%20 arttı. Ancak yine de markanın dikkatine hayran olan yeni müşteriler edinin, "Ebeveynlerimizin kolayca kullanması için bir web sitesi yaptığınız için teşekkür ederiz" yorumlarıyla 5 -STAR incelemeleri. Bu herkes için tasarımın gücüdür. Bir "kapak" deneyim oluşturmak ve "satış yaratma" için UX/UI tasarımından değişir
İstemi: Yandaki "Bake Bakery" web sitesindeki ürün sayfasının görüntüleri açık renkli düğmeleri ve küçük harfleri gösterir. Sonrası, arka plana tezat oluşturan karanlık düğmeyi açıkça gösterir. Harflerin okunması daha kolay. Satışların yükselişini gösteren küçük bir grafikle
Kontrol listesi gitmeye hazır! Web sitenizi hemen "yükseltmeye" başlıyorsunuz.
Muhtemelen yapmak istersiniz, değil mi? Web sitenizi keşfetmek için bu kısaltma kontrol listesini kullanmayı deneyin. Ve küçük bir zaferle başlayın (hızlı kazançlar):
- Ana Sayfayı Keşfedin: Tüm önemli resimler, Alt metniniz var mı? Kontrol etmek için tarayıcıdaki uzatma aracını kullanmayı deneyin.
- Klavye ile test edin: Fareyi indirmeye çalışın. Ve web sitenizi gezmek için yalnızca sekme, kaydırma+sekmesi, girin düğmesi ve boşluk çubuğunu kullanın. Menüye gidebilir, düğmeye basabilir ve formu başarıyla doldurabilirsiniz?
- Çek kontrast rengi: Karakterlerin rengini ve düğmenin arka plan rengini düşürmek için çevrimiçi araçlar ("renk kontrast kontrolü" arayışı) kullanma (satın alma düğmesi, iletişim düğmesi gibi).
- İçeriğinizi tekrar okuyun: Çok karmaşık bir terminoloji veya cümle var mı? İnsanların genellikle anladığı bir dile ayarlamayı deneyin.
- Videolarınızı Off Pale: Hala tüm içeriği altyazılar aracılığıyla anlıyor musunuz?
Bu 5 maddeden yeni başlayarak, harika bir adım olarak kabul edilir. Ve eğer bu hikayeleri sürecin bir parçası haline getiren yeni bir web sitesi oluşturacaksanız, başlangıçtan itibaren organizasyonel web sitesi geliştirme
Bilgi istemi: Her öğe için simgeli ucuz bir kutuya sahip olan kontrol listesi görüntüleri, ketch simgeleri, iki kollu daire (kontrast yerine), kitap simgeleri ve oynat düğmesi simgeleri.
İnsanların merak etme eğiliminde olan sorular (ve açık cevap)
S1: Erişilebilirlik sağlayın ve web sitesi eskisi kadar güzel değil mi?
C: Bu doğru değil! Bu en yaygın yanlış anlama. Erişilebilir tasarım, "sıkıcı" bir tasarım değil, "akıllı" bir tasarımdır. Hem güzel ve herkes için mevcut bir web sitesi oluşturabilme aynı zamanda yaratıcılığı geliştirmeye yardımcı olan bir zorluktur.
S2: Çok fazla bütçeye ihtiyacınız var mı? Küçük işletmemizin yapması mı gerekiyor?
C: Her şeyi% 100 mükemmel yapmak zorunda değilsiniz. Alt metin ekleme veya renk düğmesini ayarlama gibi "düşük küvet meyvesi" veya düzeltilmesi kolay bir şeyden başlayarak. Neredeyse en değerli yatırım için daha fazla bütçe harcamaya gerek yok, ekibinizde "farkındalık" yaratmaktır ve küçük işletmeler için bu, yarışmada bir avantaj yaratmak ve markanız için sadık bir müşteri tabanı oluşturmak için bir fırsattır.
S3: WCAG, A, AA, AAA seviyesine sahiptir. Hangi seviyeyi hedeflemeliyiz?
C: Çoğu iş web sitesi ve kuruluşu için AA dünya çapında kabul edilen bir altın standarttır. Kapsam erişimi sırasında iyi bir denge ve pratikte olanaklar yaratır. , web sitesi listelenen şirketler için gereksinimler veya şeffaflığı ve standartları vurgulayan web ofisleri için güvenilirlik ile uyumludur.
S4: Hangi araçları kontrol edebilirsiniz?
C: Başlangıç için Wave, Balta Devtools (tarayıcı uzantısı) veya Chrome Devtools'ta deniz feneri gibi birçok harika otomatik araç var. Temel erişilebilirlik, ancak bu araçların sorunun sadece% 30-40'ını tespit etmeye yardımcı olabileceğini unutmayın. Gerçek testle test etmek hala en önemli şeydir.
İstemi: Çapraz oturan bir kişinin görüntüsü rahat bir sandalyeye bacaklı. Etrafında yüzen soru ve cevapların sembolü ile birlikte. Smiley yüz, güven ve rahatlatıcı kaygıyı gösterir.
Tüm müşterileri karşılamak için kapıyı açmanın zamanı geldi.
Bu noktada, umarım web erişilebilirliğinin sadece karmaşık bir teknik veya korkunç bir yasal yük meselesi değil, aynı zamanda yeni çağda iş yapmanın "kalbi" olduğunu görürsünüz. "Ne satıyoruz?" "" Herkese "için en iyi deneyimi nasıl verebiliriz?"
Erişilebilirlik yatırımları, rakamlar (satışlar, dönüşüm oranı), marka sevgisi, güven ve en önemlisi, yapay bir dijital toplum yaratmanın bir parçası olmak ve kimseyi geride bırakmayan bir yatırımdır.
Web sitenizin artık müşterileri engelleyen bir "engel" olmasını beklemeyin. "Herkes" müşterilerini karşılamak için kapının açılışını sağladığımız basit bir kontrol listesiyle bugün web sitenizi keşfetmeye başlayın.
Web sitenizin sadece güzel değil, aynı zamanda tüm müşterileri karşılamaya ve somut iş sonuçları oluşturmaya da hazır, değil mi? UX/UI uzmanına ve web erişilebilirliğine danışın. Bizimki özgür! Herkes için harika bir web sitesi oluşturmanıza yardımcı olmaya hazırız.
Son blog

Davanın derinlikte, web sitesi dönüşüm oranını ve kayıtlı kayıt sayısını artırmak için CRO ve UX ilkelerini kullanarak SaaS StarPup'a tasarlamaktadır.

KOBİ, kurumsal, e-ticaretten fiyatı etkileyen faktörlerle özel web sitesine her bir web sitesinin maliyetini dağıtın.

Bilgi mimarisi (IA) veya veri mimarisi ilkelerini açıklayın. Kullanıcıların kolayca bilgi bulabilmeleri için web'deki içeriği ve menüyü düzenlemeye nasıl yardımcı olur