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> Bir bütün ve bir ısırılmış
elma yan yana duruyor. 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 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