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