Web Erişilebilirliği: Farkındalıktan Gerçek Uygulamaya

ÖzgürKon26 - 3. Uluslararası Özgür Yazılım Konferansı
25-26 Nisan 2026

Transcript

1. Web Erişilebilirliği: Farkındalıktan Gerçek Uygulamaya Mert Metin @Sompo Teknoloji Senior Software Engineer Blogcu Mühendis mertmtn.blogspot.com in/mrtmtn @_mertmetin
2. “The power of the web is in its universality. Access by everyone, regardless of disability, is an essential aspect.” Tim Berners-Lee
3. Web erişilebilirliği, web sitelerinin engelli, yaşlılar dahil bütün bireyler tarafından kullanılabilir, ulaşılabilir, anlamlı etkileşim kurmasıyla ilgilidir.
4. DOĞRU BİLİNEN YANLIŞLAR
5. Web sitemi engellilerin kullanmasına gerek yok. Erişilebilirlik sadece görme engelliler içindir. Bir siteyi erişilebilir yapmak çok maliyetli bir işlemdir. Erişilebilirlik standartlarına uygun hale getirince erişilebilir hale gelmiş oldu. Web sitemi açıldıktan sonra erişilebilir hale getirmeye başlarım.
7. WCAG Prensipleri ALGILANABİLİRLİK Dijital içerikteki tüm bilgiler, kullanıcılar tarafından birden fazla duyu organıyla algılanabilmelidir. İŞLEVSELLİK Tüm kullanıcılar, web sitesini kullanabilmeli, etkileşimli öğelerini kontrol edebilmelidir. Kullanıcının gerçekleştiremeyeceği bir etkileşim gerektirmemelidir. ANLAŞILABİLİRLİK Kullanıcılar, arayüzün içeriğini ve işleyişini kolay bir şekilde anlamalıdır. SAĞLAM Web sitesi, gelişen teknolojiler ve kullanıcı ihtiyaçlarıyla uyumlu olmalıdır. Yardımcı teknolojileri desteklemelidir. POUR principles
8. Klavye navigasyon zorluğu Doğru ayarlanmamış renk kontrastı Görsellerdeki alternatif metin eksikliği Belirsiz link ve butonlar Belirsiz/olmayan label Doğru kullanılmayan HTML elementleri Yaygın Erişilebilirlik Engelleri ve Çözüm Yolları
9. Semantic HTML Web sitesine ait her bir HTML öğesini, anlamına göre yapılandırmak için kullanılır. ARIA - Accessible Rich Internet Applications Erişilebilirliği destekleyen tamamlayıcı özellikleri içerir ve HTML ile birlikte kullanılır. Asistan araçlar için anlamlı bilgilerin tanımlanmasını sağlar.
10. role, bir elementin sayfada veya uygulamada ne olduğunu veya ne yaptığını tanımlar. aria-describedby, aria-pressed, aria-label gibi durumlar ve değerler, öğeyle ilişkili mevcut koşulları veya veri değerlerini tanımlar. buton rolü verilmiş bir div bloğu
11. ARIA Kullanmayın Bir öğeye ARIA eklemek, otomatik olarak daha erişilebilir hale getirmez.
12. <title> elementi Başlık özgün olmalı ve her sayfanın konusunu veya amacını özlü bir şekilde açıklamalıdır. <title> etiketi, sekmelerde veya tarayıcı pencerelerinde etiket görevi görür. Benzersiz başlıklar, aynı sitenin birden fazla sekmesi açık olduğunda bir sayfayı diğerinden ayırt etmeye yardımcı olur.
13. Bağlam Odaklı Başlık İç sayfayı veya önemli içeriği "öne yerleştirmek", ardından önceki sayfaları veya bilgileri eklemektir. Doğru kullanım: Web Design sitesindeki HTML kategorisindeki bir konu “Title”
14. Heading - Başlıklar Sayfadaki en önemli içeriği anlamalarına yardımcı olmak için başlık içeriğinin uygun önem derecesine göre seçilmesi gerekir.
15. Alternatif metinler: “alt” Görsellerin açıklamasının yanlış veya eksik olması, ekran okuyucu kullanıcılarının görselin amacını anlamasını engelleyebilir. “alt” bir görselin etiketdir ve erişilebilir adını belirtir. Bilgilendirici ve işlevsel konulu görsellerde alternatif text oluşturulmalıdır. Dekoratif görsellerde, tasarıma katkısı neredeyse az olduğundan alternatif metne ihtiyaç duyulmaz.
16. alt text olmayan görsel
18. Butonlar Formu gönderir veya etkileşime girdiğinde javascript kodu çalıştırır.
19. <a> element - href attribute Anlamsal olarak site içi ve harici bir kaynağa referans verir. Harici siteye bağlantı İç sayfaya bağlantı Dosya indirme bağlantısı Sayfa içindeki bir bağlantı (anchor) Telefon numarasına bağlantı -> tel: E-posta adresine bağlantı -> mailto:
20. İndirme Bağlantı Linkleri
21. Gizemli İndirme Bağlantılarına Son
22. Bağlantıya tıkladıklarında doğrudan e-posta uygulamalarına yönlendirilirler ve hemen yazmaya başlayabilecekleri için kullanışlı olabilir. E-posta Linkleri
23. Generic bir bağlantı. Sadece mail adresini bilmek isteyenler için zorlayıcı bir deneyim.
24. Kullanıcı dostu bir bağlantı. Hem uygulamada açtırıp hem de anlık olarak mail adresini görebilmek.
25. Formlar Form, kullanıcının bir alana veya bir alan grubuna veri girmesine olanak tanır. Engel durumu farketmeksizin, formun herkes için kullanılabilir olacak şekilde tasarlanması gerekir.
26. Formlardaki Ortak Sorunlar
27. Fieldset, aynı formda sorulmuş benzer sorunların gruplanmasını sağlayan elementtir.
28. autocomplete: Formları kolay ve hızlı doldurmak için tarayıcı tarafından sağlanır. Önceki girişlere bağlı olarak ipucu verir. Bilişsel ve okuma güçlüğü çekenler için yardımcı olur.
30. Hata/validasyon mesajları doğru input alanı için anlaşılır ve net biçimde gösterilmelidir.
31. Çok Adımlı Formlar Bir formda çok fazla soru varsa, bilişsel engeli olan kişiler için formu anlamak ve doldurmak bunaltıcı ve stresli hale gelebilir.
32. Uzun formları, çoklu küçük formlara bölmek daha kolaylaştırıcı hale getirebilir. Formların mantıksal gruplara ayrılması önemlidir. Sipariş süreci adımları: Kargo adresi → Ödeme → Kontrol → Tamamlama
33. Tablolar Verileri temsil etmek için HTML elementine karar verirken sorulması gereken sorular, Veriler çok boyutlu mu? Verileri karşılaştırmayı kolaylaştırmak faydalı olur mu? Her sütun için anlamlı bir etiket sağlayabilir miyim?
34. Layout için tablo kullanmayın!
35. Renk Kontrastı https://speakerdeck.com/bcinarli/accessible-by-default
36. KAPSAYICILIK MÜŞTERİ SEGMENTİ TEKNOLOJİ EMPATİ YASAL UYUM
37. Teşekkürler! Blogcu Mühendis mertmtn.blogspot.com in/mrtmtn @_mertmetin