Accessible By Default!

Transcript

1. ACCESSIBLE BY DEFAULT ERİŞİLEBİLİR UYGULAMA GELİŞTİRMENİN PÜF NOKTALARI
2. BILAL ÇINARLI Principal Frontend Engineer @ Jira / Atlassian @bcinarli
3. %95.9 İLK 1 MİLYON SİTE İÇİNDE ERİŞİLEBİLİRLİK PROBLEMİ OLANLAR
4. 98% WCAG 2.1 STANDARTLARINA UYMAYAN SİTE ORANI
5. WCAG 2.1 standartları çoğunlukla alt-text, klavye navigasyonu, tutarlılık ve uygun HTML yapısı istiyor
6. Yanlış Bilgi Erişilebilirlik sadece küçük bir grup kullanıcı için geçerli
7. 16% DÜNYA NÜFUSUNDA BİR ŞEKİLDE ENGELİ OLANLAR
8. Yanlış Bilgi Benim uygulamamı engelli kullanıcıların kullanma ihtiyacı yok
9. Yanlış Bilgi Erişilebilirlik sadece görme engelli kişiler içindir
10. Erişilebilirlik ihtiyacı her hangibir zamanda karşımıza çıkabilir
11. Bir ay boyunca zayıf olan kolunuzu kullandığınızı düşünün
12. Yanlış Bilgi Bir siteyi erişilebilir yapmak çok zaman alan ve masraflı bir uğraştır
13. 56.8 ORTALAMA BİR SAYFADAKİ ERİŞİLEBİLİRLİK PROBLEMİ
14. Açıklama metni eksik resimler, boş bağlantılar & butonlar, eksik/olmayan etiketler (label), yanlış renk kontrastı
15. <div class="headline"> <h2>Elmalar ne kadar sağlıklı? < / h2> <img src="headline.jpg" /> </ div>
16. <div class="headline"> <h2>Elmalar ne kadar sağlıklı? < / h2> <img alt="Bir bütün ve bir ısırılmış elma yan yana duruyor." src="headline.jpg" /> </ div>
17. Yanlış Bilgi Erişilebilirlik sadece resimlere açıklama metni eklemekten ibarettir
18. %54.5 RESİMLERİNDE AÇIKLAMA METNİ EKSİK SİTE ORANI
19. %19.8 TOPLAM ERİŞİLEBİLİRLİK KUSURLARI İÇİNDE RESİMLERİN ORANI
20. Yanlış HTML yapısı, yanlış fonksiyonel kontroller, eksik renk kontrası, yanlış JavaScript kullanımı…
21. <div class="input"> <span class="label">Email < / span> <input type="text" name="email" required / > </ div> <div class="input"> <span class="label">Password </ span> <input type="password" name="password" required /> </ div>
22. <label class="input"> <span class="label">Email < / span> <input type="email" name="email" required /> </ label> <label class="input"> <span class="label">Password </ span> <input type="password" name="password" required / > </ label>
23. Dosyayı indirmek için <a onclick="download('file123')">buraya </ a> tıklayınız
24. <a href="erisilebilir-uygulamalar.pdf" type="application/pdf"> Erişilebilir uygulamalar (<abbr title="Adobe Portable Document Format">PDF </ abbr>, 27.5 <abbr title="Megabyte">MB </ abbr>) </ a>.
25. AAA - 7 : 1 AA - 4.5 : 1 A - 3 : 1 (içerik için uygun değil)
26. https://colourcontrast.cc
27. Yanlış Bilgi Sadece aria-label ekleyerek erişilebilir olabiliriz
28. First Rule of ARIA use: ARIA kullanmayın! Standart HTML semantiği ve etkileşimini tercih edin!
29. <table role="menu"> <tr role="menubar"> <td role="menuitem"> <button onclick="goToLink('homepage')" aria-current="page" aria-label="Homepage">Homepage < / button> </ td> <td role="menuitem"> <button onclick="goToLink('search')" aria-label="Search">Search < / button> </ td> <td role="menuitem"> <button onclick="goToLink('likes')" aria-label="Likes">Likes </ button> </ td> <td role="menuitem"> <button onclick="goToLink('profile')" aria-label="Profile">Profile </ button> </ td> </ tr> </ table>
30. <nav> <ul> <li><a href="/" aria- current="page">Homepage </ a> </ li> <li><a href="/search">Search </ a> </ li> <li><a href="/likes">Likes </ a> </ li> <li><a href="/profile">Profile </ a> </ li> </ ul> </ nav>
31. Yanlış Bilgi Websitemi, açılmadan önce erişilebilir hale getirebilirim
32. 56.8 ORTALAMA SAYFA BAŞINA KARŞILAŞILAN PROBLEM
33. Doğru Bilgi Erişilebilirlik bir takım işidir ve baştan itibaren üzerinde durulmalıdır
34. ACCESSIBLE BY DEFAULT BİLAL ÇINARLI @bcinarli