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 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 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