Serba-serbi Menerapkan A11y Dalam Situs Web

https://app.sli.do/event/o3pdc3wi/

Serba-serbi Menerapkan A11y Dalam Situs Web Oleh isatrio - CC-by-SA
4.0 license

Terminologi 1. A11y adalah singkatan dari accessibility atau dalam bahasa
Indonesia Aksesibilitas 2. Angka 11 dari A11y ada sebelas huruf diantara accessibility 3. Untuk memudahkan pengucapan beberapa orang mengucapkanya A - 1 - 1 - y, atau “A(e)li”. Saya sendiri tadinya mengucapkannya A(e) - eleven- wai. 4. Peramban adalah browser 5. Polyfill adalah kode untuk mengimplementasikan fitur dalam peramban yang belum mendukung fitur tersebut 6. Perangkat mengacu kepada alat untuk melakukan pekerjaan. perangkat ≠ gawai

Difable is Differently Able

*Diambil dari presentasi Rahma Utami di Livecamp

Mendukung aksesibilitas berarti kita turut mendukung kesetaraan dalam mengakses informasi

Mengapa kita harus mendukung? 1. Akses informasi 2. Akses ke
ilmu 3. Kesempatan bekerja 4. Kesempatan mendapat penghasilan 5. Menjadi lebih independen dan memiliki pilihan *Diambil dari presentasi Rahma Utami di Livecamp

Bagaimana caranya?

Menulis Kode HTML Semantic

Menengok lagi ke belakang 1. 2006 kita masih menggunakan `<div>`
dimana-mana untuk keperluan apapun. 2. 2007 draf HTML5 mulai dibuat 3. 2012 baru release candidate 4. 2014 akhirnya dirilis rekomendasi HTML5 5. Hanya `<head>` dan `<body>` yang berbeda

New Normal after HTML19 5 1. Kode lebih semantik, mewakili
isi konten 2. Dengan semantik, lebih mudah bagi developer untuk melihat per bagian 3. Apa itu kode semantik?

Aria adalah Polyﬁll dari semantik

Aria-na Grande? hawtcelebs.com

Wai Aria 1. Jika tidak menemukan tag semantik yang bisa
digunakan, maka gunakanlah Aria

Atribut “alt” untuk “img” 1. Teman tuna netra tidak dapat
melihat gambar 2. Mereka membaca teks 3. Dengan menambahkan atribut `alt` maka teman tuna netra tetap tahu apa isi gambar dengan membaca teks 4. Dan jika koneksi sedang tidak baik, gambar jadi tidak bisa dimuat dengan benar. Tapi dengan menambahkan `alt` maka teks akan muncul, sehingga kita bisa paham konteksnya.

`Title` itu penting 1. Title adalah hal paling penting untuk
“tahu isi” dalam laman web 2. Title adalah hal yang paling pertama dibaca oleh pembaca layar sebagai sinopsis pendek tentang apa laman tersebut.

Atribut `lang` 1. Atribut lang membantu pembaca layar untuk tahu
bahwa bahasa apa yang digunakan oleh situs web. Agar tidak salah pelafalan katanya 2. Jika secara bawaan menggunakan bahasa Inggris, maka jika menemukan `lang=”id”` maka teks akan diucapkan dengan bahasa Indonesia

Aplikasi yang memanfaatkan teknologi a11y, baik secara parsial ataupun keseluruhan

Navigasi 1. Navigasi itu penting, terutama untuk teman-teman tuna netra.
Mereka hanya mengandalkan papan ketik dan gestur pada talkback/voice over 2. Membuat tag HTML sesemantik mungkin itu akan membuat landmark yang mudah untuk dituju. 3. Swap ke kanan-kiri-atas-bawah dan gestur membentuk huruf L untuk gawai 4. Tab, arah panah, dan kombinasi cmd/ctrl+option+shift + alfabet, shortcut yang digunakan dalam komputer desktop.

Menulis kode CSS yang baik

Tips 1. Untuk yang paham trik ini mohon jangan pernah
dilakukan untuk sesuatu yang sifatnya bisa diakses. Menggunakan `background` untuk menggantikan `img`. Contoh ada di salindia selanjutnya 2. Jangan pernah menggunakan satuan yang sifatnya tetap untuk teks, seperti “px”. Untuk difabel yang butuh memperbesar huruf, ini sangat penting 3. Gunakan metodologi BEM (Block__Element--modiﬁer) untuk struktur yang lebih baik

Perangkat yang bisa digunakan dalam developmen

Masih banyak ilmu di luar sana tentang A11y yang tidak
saya sebutkan dalam presentasi saya

Referensi 1. Presentasi Rahma Utami di Livecamp 2. Inclusive design
pattern - Heydon Pickering 3. https://9elements.com/bem-cheat-sheet/ 4. https://www.w3schools.com/tags/tag_doctype.asp 5. https://en.wikipedia.org/wiki/Polyﬁll_(programming) 6. https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basi cs 7. https://en.wikipedia.org/wiki/HTML5

Serba-serbi Menerapkan A11y Dalam Situs Web

Serba-serbi Menerapkan A11y Dalam Situs Web

Yudhi Satrio

More Decks by Yudhi Satrio

Other Decks in Programming

Featured

Transcript

https://app.sli.do/event/o3pdc3wi/