Membangun Situs Web yang Ramah Aksesibilitas

Transcript

1. License CC-by-SA 4.0 - https://creativecommons.org/licenses/by-sa/4.0/ Membangun Situs Web yang Ramah Aksesibilitas Yudhi Satrio
2. Hai • Nama saya Yudhi Satrio • Saya seorang Bangsipan (Pengembang Sisi Depan) yang saat ini bekerja untuk Dailymotion • A11s ID (Aksesibilitas ID) • @isatrio • Dan masih banyak lagi
3. Mengapa menulis kode yang standar itu penting?
6. Mengenal standar dan pedoman aksesibilitas web
7. Memastikan kode HTML Memenuhi Standar • Menggunakan tag dan atribut HTML yang sesuai untuk meningkatkan aksesibilitas atau biasa disebut “semantic” • Menulis kode CSS yang dapat diakses, seperti menggunakan warna yang kontras dan mengatur ukuran font dengan benar. • Melakukan Pengetesan, ada beberapa alat yang dapat digunakan untuk awal: • aXe • WAVE • Lighthouse
8. Prinsip WCAG • Ketersediaan: Konten harus dapat diakses oleh semua • Keragaman: Konten harus dapat diakses oleh semua perangkat • Keterbacaan: Konten harus mudah dibaca dan dimengerti • Kemudahaan: Konten harus mudah digunakan
9. 3 Tingkatan WCAG • A: Kemampuan dasar dari sebuah situs web dengan penggunaan HTML yang semantic • AA: Tentunya kemampuan Dasar ditambah dengan detail seperti kontras warna • AAA: ?
10. Mari berkode
11. Contoh kode yang baik
12. Contoh kode ambigu
13. Semantic • Tengaran (landmark) • Teks Alt - untuk gambar • Heading (h1-h6)
14. Aria • Aria-label • Aria-live • Aria-required • Aria-hidden • Tabindex • Lang
16. Tanpa aria itu lebih baik dari pada dengan aria tapi asal-asalan
17. Mari kita tes
18. Kompatibilitas • Chrome - Jaws • Chrome - Chromevox • Firefox - NVDA • Safari - Voice Over • Android Chrome - Talkback • iOS/iPadOS Safari - Voice Over
19. Hidden Gem • https://ebay.gitbook.io/mindpatterns/ • https://www.w3.org/WAI/eval/report-tool/#!/
20. ChatGPT, #eh Terus belajar dan mengikuti perkembangan terbaru untuk memastikan bahwa kodemu selalu ramah dan dapat diakses.
21. Contekan navigasi Voice Over • VO = ctrl + alt • VO + U to open rotor • VO + cmd + N to go to next landmark • VO + cmd + H to go to next header • VO + cmd + L to go to next link
22. Referensi dan Alat • https://usability.yale.edu/web-accessibility/articles/wcag2-checklist • https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html • https://deque.com/axe/devtools/ • https://ebay.gitbook.io/mindpatterns/