diff --git a/1-getting-started-lessons/3-accessibility/translations/.github/post-lecture-quiz.id.md b/1-getting-started-lessons/3-accessibility/translations/.github/post-lecture-quiz.id.md new file mode 100644 index 00000000..07bd77ec --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/.github/post-lecture-quiz.id.md @@ -0,0 +1,17 @@ +*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.* + +1. Lighthouse hanya memeriksa masalah aksesibilitas + +- [ ] benar +- [ ] salah + +2. Palet warna aman membantu orang dengan + +- [ ] buta warna +- [ ] gangguan penglihatan +- [ ] keduanya di atas + +3. Tautan deskriptif sangat penting untuk situs web yang dapat diakses + +- [ ] benar +- [ ] salah diff --git a/1-getting-started-lessons/3-accessibility/translations/.github/pre-lecture-quiz.id.md b/1-getting-started-lessons/3-accessibility/translations/.github/pre-lecture-quiz.id.md new file mode 100644 index 00000000..4043378c --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/.github/pre-lecture-quiz.id.md @@ -0,0 +1,17 @@ +*Selesaikan kuis ini di kelas* + +1. Situs web yang dapat diakses dapat diperiksa di alat browser mana + +- [ ] Lighthouse +- [ ] Deckhouse +- [ ] Cleanhouse + +2. Anda memerlukan pembaca layar fisik untuk menguji aksesibilitas bagi pengguna dengan gangguan penglihatan + +- [ ] benar +- [ ] salah + +3. Aksesibilitas hanya penting di situs web pemerintah + +- [ ] benar +- [ ] salah diff --git a/1-getting-started-lessons/3-accessibility/translations/README.id.md b/1-getting-started-lessons/3-accessibility/translations/README.id.md new file mode 100644 index 00000000..f93231e0 --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/README.id.md @@ -0,0 +1,221 @@ +# Membuat Halaman Web yang Dapat Diakses + +![Semua Tentang Aksesibilitas](../webdev101-a11y.png) +> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac) + +## Kuis Pra-Kuliah +[Kuis pra-kuliah](.github/pre-lecture-quiz.id.md) + +> Kekuatan Web ada dalam universalitasnya. Akses oleh semua orang tanpa memandang disabilitas merupakan aspek penting. +> +> \- Sir Timothy Berners-Lee, Direktur W3C dan penemu World Wide Web + +Kutipan ini dengan sempurna menyoroti pentingnya membuat situs web yang dapat diakses. Sebuah aplikasi yang tidak dapat diakses oleh semua adalah menurut definisi pengecualian. Sebagai pengembang web, kami harus selalu memikirkan aksesibilitas. Dengan memiliki fokus ini sejak awal Anda akan berada di jalur yang benar untuk memastikan semua orang dapat mengakses halaman yang Anda buat. Dalam pelajaran ini, Anda akan mempelajari tentang alat yang dapat membantu Anda memastikan bahwa aset web Anda dapat diakses dan cara membangun dengan mempertimbangkan aksesibilitas. + +## Alat yang digunakan + +### Pembaca layar (Screen readers) + +Salah satu alat aksesibilitas paling terkenal adalah pembaca layar. + +[Pembaca layar](https://en.wikipedia.org/wiki/Screen_reader) adalah klien yang biasa digunakan untuk mereka yang memiliki gangguan penglihatan. Saat kami menghabiskan waktu untuk memastikan browser menyampaikan informasi yang ingin kami bagikan dengan benar, kami juga harus memastikan pembaca layar melakukan hal yang sama. + +Pada dasarnya, pembaca layar akan membaca halaman dari atas ke bawah dengan suara. Jika halaman Anda semuanya teks, pembaca akan menyampaikan informasi dengan cara yang mirip dengan browser. Tentu saja, halaman web jarang hanya berupa teks; mereka akan berisi tautan, grafik, warna, dan komponen visual lainnya. Perhatian harus diberikan untuk memastikan bahwa informasi ini dibaca dengan benar oleh pembaca layar. + +Setiap pengembang web harus membiasakan diri dengan pembaca layar. Seperti yang disorot di atas, itu adalah klien yang akan digunakan pengguna Anda. Sama seperti saat Anda memahami cara kerja browser, Anda juga harus mempelajari cara kerja pembaca layar. Untungnya, pembaca layar sudah terpasang di sebagian besar sistem operasi, dan banyak browser berisi ekstensi untuk meniru pembaca layar. + +✅ Coba ekstensi atau alat browser pembaca layar. Salah satu yang hanya berfungsi di Windows adalah [JAWS](https://webaim.org/articles/jaws/). Peramban (browser) juga memiliki alat bawaan yang dapat digunakan untuk tujuan ini; lihat [alat browser Edge yang berfokus pada aksesibilitas ini](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features). + +### Pemeriksa kontras + +Warna di situs web perlu dipilih dengan cermat untuk menjawab kebutuhan pengguna buta warna atau orang yang kesulitan melihat warna kontras rendah. + +✅ Uji situs web yang Anda sukai untuk penggunaan warna dengan ekstensi browser seperti [pemeriksa warna WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Apa yang Anda pelajari? + +### Lighthouse + +Di area alat pengembang di browser Anda, Anda akan menemukan alat Lighthouse. Alat ini penting untuk mendapatkan tampilan pertama aksesibilitas (serta analisis lain) dari situs web. Meskipun penting untuk tidak mengandalkan Lighthouse secara eksklusif, skor 100% sangat membantu sebagai dasar. + +✅ Temukan Lighthouse di panel alat pengembang browser Anda dan jalankan analisis di situs mana pun. apa yang kamu temukan? + +## Mendesain untuk aksesibilitas + +Aksesibilitas adalah topik yang relatif besar. Untuk membantu Anda, ada banyak sumber daya yang tersedia. + +- [Accessible U - Universitas Minnesota](https://accessibility.umn.edu/your-role/web-developers) + +Meskipun kami tidak dapat mencakup setiap aspek dalam membuat situs yang dapat diakses, berikut adalah beberapa prinsip inti yang ingin Anda terapkan. Mendesain halaman yang dapat diakses dari awal **selalu** lebih mudah daripada kembali ke halaman yang ada untuk membuatnya dapat diakses. + +## Prinsip tampilan yang bagus + +### Palet warna yang aman + +Orang melihat dunia dengan cara yang berbeda, dan ini termasuk warna. Saat memilih skema warna untuk situs Anda, Anda harus memastikannya dapat diakses oleh semua orang. Salah satu [alat hebat untuk menghasilkan palet warna adalah Color Safe](http://colorsafe.co/). + +✅ Identifikasi situs web yang sangat bermasalah dalam penggunaan warna. Mengapa? +Properly highlight text + +### Sorot teks dengan benar + +Highlighting text by color, [font weight (berat font)](https://developer.mozilla.org/docs/Web/CSS/font-weight), atau [dekorasi teks lainnya](https://developer.mozilla.org/docs/Web/CSS/text-decoration) tidak secara langsung memberi tahu pembaca layar tentang kepentingannya. Sebuah kata dapat dicetak tebal karena merupakan kata kunci, atau karena kata pertama dan perancang memutuskan kata tersebut harus dicetak tebal. + +Saat frasa tertentu perlu disorot, gunakan elemen `` atau ``. Ini akan menunjukkan kepada pembaca layar bahwa item tersebut penting. + +### Gunakan HTML yang benar + +Dengan CSS dan JavaScript, memungkinkan banyak elemen terlihat seperti jenis kontrol apa pun. `` bisa digunakan untuk membuat sebuah `