From 5688cd40a0e052236a38a9fbaa89e77713e8d605 Mon Sep 17 00:00:00 2001 From: Fri Date: Fri, 24 Nov 2023 16:14:28 +0800 Subject: [PATCH 01/13] add translation for index.md --- _tips/index.id.md | 58 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 _tips/index.id.md diff --git a/_tips/index.id.md b/_tips/index.id.md new file mode 100644 index 0000000..63d2c0a --- /dev/null +++ b/_tips/index.id.md @@ -0,0 +1,58 @@ +--- +# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#". +# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:". + +title: Kiat Memulai +nav_title: Gambaran Umum +lang: id # Change "en" to the translated-language shortcode +last_updated: 2023-11-24 # Put the date of this translation YYYY-MM-DD (with month in the middle) + +resource: + title: "Kiat Memulai" + ref: /tips/ # Do not change this + +navigation: + next: /tips/writing/ # Do not change this + +translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space) +- name: "Fri Rasyidi" # Replace Jan Doe with translator name +# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators +# contributors: +# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none +# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors + +github: + repository: w3c/wai-quick-start + path: '_tips/index.id.md' # Add the language shortcode to the middle of the filename, for example: content/index.fr.md + +permalink: /tips/id # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr +ref: /tips/ # Do not change this + +acknowledgements: /tips/acknowledgements/ + +# In the footer below: +# Do not change the dates +# Translate the other words, including "Status:" and "Editors:" +# Translate the Working Group name. Leave the Working Group acronym in English. +footer: > +

+ Status: + Diperbarui + 07 Juli 2016 + (first published September 2015) +
+ Editor: + Kevin White, + Shadi Abou-Zahra, and + Shawn Lawton Henry. + ACKNOWLEDGEMENTS. + Dikembangkan oleh Kelompok Kerja Edukasi dan Pendampingan (EOWG). + Dikembangkan dengan dukungan dari proyek WAI-DEV, didanai bersama oleh Program IST Komisi Eropa. +

+--- + +Memulai dengan aksesibilitas. Kiat-kiat ini memperkenalkan beberapa pertimbangan mendasar untuk membuat situs web Anda lebih mudah diakses oleh penyandang disabilitas, dan memberikan tautan ke panduan tambahan. Kiat-kiat dikelompokkan berdasarkan aktivitas; informasi yang relevan dengan pekerjaan Anda mungkin ada di lebih dari satu halaman. + +* [[Mendesain untuk Aksesibilitas Web]](/tips/designing/): Kiat dalam mendesain antarmuka pengguna dan desain visual. +* [[Menulis untuk Aksesibilitas Web]](/tips/writing/): Kiat dalam menulis dan menyajikan konten. +* [[Developing for Web Accessibility]](/tips/developing/): Kiat dalam membuat markah dan kode. From 0bf76b120d076e6dd7c8c9b7b522407818df63ee Mon Sep 17 00:00:00 2001 From: Fri Date: Fri, 24 Nov 2023 18:39:25 +0800 Subject: [PATCH 02/13] translating designing --- _tips/designing.id.md | 673 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 673 insertions(+) create mode 100644 _tips/designing.id.md diff --git a/_tips/designing.id.md b/_tips/designing.id.md new file mode 100644 index 0000000..57a35b5 --- /dev/null +++ b/_tips/designing.id.md @@ -0,0 +1,673 @@ +--- +# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#". +# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:" + +title: "Mendesain untuk Aksesibilitas Web – Kiat Memulai" +title_html: "Mendesain untuk Aksesibilitas Web" +nav_title: Kiat Mendesain +lang: id # Change "en" to the translated-language shortcode +last_updated: 2023-11-24 # Put the date of this translation YYYY-MM-DD (with month in the middle) + +resource: + ref: /tips/ # Do not change this + +navigation: + previous: /tips/writing/ # Do not change this + next: /tips/developing/ # Do not change this + +# translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space) +# - name: "Jan Doe" # Replace Jan Doe with translator name +# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators +# contributors: +# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none +# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors + +github: + repository: w3c/wai-quick-start + path: '_tips/designing.id.md' # Add the language shortcode to the middle of the filename, for example: content/index.fr.md + +permalink: /tips/designing/id # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr +ref: /tips/designing/ # Do not change this + +ext_css: tips.css +title_icon: /tips/img/icons.svg#designing + +acknowledgements: /tips/acknowledgements/ + +# In the footer below: +# Do not change the dates +# Do not translate ACKNOWLEDGEMENTS +# Translate the other words, including "Date:" and "Editors:" +# Translate the Working Group name. Leave the Working Group acronym in English. +footer: > +

Date: Perubahan minor 9 Januari 2019. Diperbarui 15 April 2016. Pertama kali dipublikasikan September 2015.

+

Editor: Kevin White, Shadi Abou-Zahra, dan Shawn Lawton Henry. ACKNOWLEDGEMENTS.

+

Dikembangkan oleh Dikembangkan oleh Kelompok Kerja Edukasi dan Pendampingan (EOWG). Dikembangkan dengan dukungan dari proyek WAI-DEV, didanai bersama oleh Program IST Komisi Eropa.

+--- + +{::nomarkdown} +{% include box.html type="start" h="2" title="Ringkasan" class="full" %} +{:/} + +Halaman ini memperkenalkan beberapa pertimbangan mendasar untuk membantu Anda mulai membuat desain antarmuka pengguna dan desain visual yang lebih aksesibel bagi penyandang disabilitas. Kiat-kiat ini merupakan praktik yang baik dalam membantu Anda memenuhi persyaratan Pedoman Aksesibilitas Konten Web (WCAG). Ikuti tautan ke persyaratan WCAG terkait, latar belakang terperinci dalam dokumen "Memahami", panduan dari Tutorial, kisah pengguna, dan banyak lagi. + +{::nomarkdown} +{% include box.html type="end" %} +{:/} + + +{::options toc_levels="2" /} + +{::nomarkdown} +{% include_cached toc.html type="start" title="Daftar Isi" class="full" %} +{:/} + +- TOC is created automatically. +{:toc} + +{::nomarkdown} +{% include_cached toc.html type="end" %} +{:/} + +## Sediakan kontras yang cukup antara latar depan dan latar belakang + +Teks pada latar depan harus memiliki kontras yang cukup dengan warna latar belakangnya. Termasuk untuk teks pada gambar, latar belakang gradien, tombol, dan elemen lainnya. Hal ini tidak berlaku untuk logo, atau teks yang insidental, seperti teks yang kebetulan ada di dalam foto. Tautan di bawah memberikan informasi selengkapnya tentang rasio kontras minimum sebagaimana diharuskan oleh WCAG dan cara memeriksa tingkat kontrasnya. "Rasio kontras" adalah kependekan dari istilah "rasio kontras pencahayaan" yang secara teknis lebih tepat. + +{::nomarkdown} +{% include_cached box.html type="start" title="Contoh: Rasio kontras" class="example" %} +{:/} + +
+
+
{% include_cached icon.html name="ex-circle" label="Salah" %} Tidak mencukupi
+
+

Beberapa orang tidak dapat membaca teks jika kontras antara teks dan latar belakang tidak mencukupi. Bagi yang lain, warna terang (pencahayaan yang tinggi) membuat tidak terbaca; mereka membutuhkan pencahayaan yang rendah.

+
+
+
+
{% include_cached icon.html name="check-circle" label="Oke" %} Mencukupi
+
+

Beberapa orang tidak dapat membaca teks jika kontras antara teks dan latar belakang tidak mencukupi. Bagi yang lain, warna cerah (luminansi tinggi) tidak terbaca; mereka membutuhkan pencahayaan rendah.

+
+
+
+ +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +{::nomarkdown} +{% include_cached box.html type="start" title="Informasi Lebih Lanjut" class="simple" %} +{:/} + +* **WCAG** + * [Kontras (Minimum) 1.4.3](/WAI/WCAG21/quickref/#contrast-minimum) ([Memahami 1.4.3](/WAI/WCAG21/Understanding/contrast-minimum)) +* **Kisah Pengguna** + * [Bagaimana seorang pengguna dengan "buta warna" menjelajahi Web](/people-use-web/user-stories/#shopper) +* **Pengecekan Sederhana** + * [Cara memeriksa rasio kontras](/test-evaluate/preliminary/#contrast) +* **Sarana Pendukung** + * [Daftar sarana untuk membantu menentukan rasio kontras](/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#visual-audio-contrast-contrast-resources-head) + +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +## Jangan hanya menggunakan warna untuk menyampaikan informasi + +Meskipun warna dapat berguna untuk menyampaikan informasi, warna tidak boleh menjadi satu-satunya cara penyampaian informasi. Saat menggunakan warna untuk membedakan elemen satu dan lainnya, berikan juga identifikasi tambahan yang tidak bergantung pada persepsi warna. Misalnya, selain warna gunakan pula asteris untuk menunjukkan kolom isian yang harus diisi, dan gunakan label untuk membedakan area pada sebuah grafik. + +{::nomarkdown} +{% include_cached box.html type="start" title="Contoh: Gunakan warna untuk menyampaikan makna" class="example" %} +{:/} + +
+
+
{% include_cached icon.html name="ex-circle" label="Salah" %} Hanya warna
+
+
+

Bidang yang harus diisi berwarna merah

+
+ +
+
+ +
+
+
+
+
+
{% include_cached icon.html name="check-circle" label="Oke" %} Warna dan Simbol
+
+
+

Bidang yang harus diisi berwarna merah dan ditandai dengan *

+
+
+
+
+ +
+
+
+
+
+ +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +{::nomarkdown} +{% include_cached box.html type="start" title="Contoh: Merujuk ke sesuatu hanya dengan warna" class="example" %} +{:/} +
+
+
{% include_cached icon.html name="ex-circle" label="Salah" %} Hanya warna
+
+ + + Empat segitiga dengan sudut berbeda + + + + + + +
+
+ Manakah yang merupakan segitiga siku-siku? +
+
+
+
+ +
+
+
+
+
+
{% include_cached icon.html name="check-circle" label="Oke" %} Warna dan angka
+
+ + + + 1Segitiga hijau: Memiliki sudut 30°, 60°, 90° + + 2 Segitiga biru: Memiliki sudut 30°, 30°, 120° + + 3 Segitiga merah: Memiliki sudut 40°, 70°, 70° + + 4 Segitiga kuning: Memiliki sudut 60°, 60°, 60° + + +
+
+ >Manakah yang merupakan segitiga siku-siku? +
+
+
+
+ +
+
+
+
+
+ +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +{::nomarkdown} +{% include_cached box.html type="start" title="Informasi Lebih Lanjut" class="simple" %} +{:/} + +* **WCAG** + * [Penggunaan Warna 1.4.1](/WAI/WCAG21/quickref/#use-of-color) ([Memahami 1.4.1](/WAI/WCAG21/Understanding/use-of-color)) +* **Kisah Pengguna** + * [Bagaimana seorang pengguna dengan "buta warna" menjelajahi Web](/people-use-web/user-stories/#shopper) + +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + + +## Pastikan elemen interaktif mudah diidentifikasi + +Berikan gaya yang berbeda untuk elemen interaktif, seperti tautan dan tombol, agar mudah diidentifikasi. Misalnya dengan mengubah tampilan tautan ketika disoroti tetikus, fokus kibor, dan aktivasi layar sentuh. Pastikan gaya dan penamaan elemen interaktif digunakan secara konsisten di seluruh situs web. + +{::nomarkdown} +{% include_cached box.html type="start" title="Contoh: Gaya yang unik dan berbeda untuk beragam kondisi tautan" class="example" %} +{:/} + +
+
+
+
{% include_cached icon.html name="check-circle" label="Oke" %} Gaya tautan tampak menonjol dari teks
+
+

Beberapa orang tidak bisa menggunakan tetikus dan hanya menggunakan navigasi dengan kibor halaman web.

+

Penting agar pengguna dapat menjangkau semua elemen interaktif menggunakan kibor, dan jelas elemen mana yang sedang menjadi fokus.

+

Fokus keyboard yang tampak jelas bisa berupa garis batas atau sorotan yang bergerak ketika Anda menelusuri halaman web dengan Tab.

+
+
+
+
+
+
{% include_cached icon.html name="check-circle" label="Oke" %} Gaya disoroti tetikus
+ +
+
+
{% include_cached icon.html name="check-circle" label="OK" %} Gaya fokus kibor
+ +
+
+
{% include_cached icon.html name="check-circle" label="Oke" %} Gaya klik atau sentuh
+ +
+
+
+ +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +{::nomarkdown} +{% include_cached box.html type="start" title="Informasi Lebih Lanjut" class="simple" %} +{:/} + +* **WCAG** + * [Fokus Tampak 2.4.7](/WAI/WCAG21/quickref/#focus-visible) ([Memahami 2.4.7](/WAI/WCAG21/Understanding/focus-visible)) + * [Identifikasi yang Konsisten 3.2.4](/WAI/WCAG21/quickref/#consistent-identification) ([Memahami 3.2.4](/WAI/WCAG21/Understanding/consistent-identification)) +* **Kisah Pengguna** + * [Tantangan yang dihadapi oleh seseorang dengan keterbatasan kemampuan dalam menggunakan tetikus](/people-use-web/user-stories/#reporter) + * [Tantangan yang dihadapi oleh pengguna lanjut usia dengan tremor di tangan](/people-use-web/user-stories/#retiree) + +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +## Sediakan opsi navigasi yang konsisten dan jelas + +Pastikan navigasi di seluruh halaman dalam situs web memiliki penamaan, pemberian gaya, dan peletakan yang konsisten. Sediakan lebih dari satu metode navigasi situs web, seperti pencarian pada situs atau peta situs. Bantu pengguna memahami posisi mereka di situs web atau halaman dengan menyediakan petunjuk orientasi, seperti jejak roti dan judul yang jelas. + +{::nomarkdown} +{% include_cached box.html type="start" title="Informasi Lebih Lanjut" class="simple" %} +{:/} + +* **WCAG** + * [Navigasi yang Konsisten 3.2.3](/WAI/WCAG21/quickref/#consistent-navigation) ([Memahami 3.2.3](/WAI/WCAG21/Understanding/consistent-identification)) + * [Beragam Cara 2.4.5](/WAI/WCAG21/quickref/#multiple-ways) ([Memahami 2.4.5](/WAI/WCAG21/Understanding/multiple-ways)) +* **Kisah Pengguna** + * [Bagaimana konsistensi dan navigasi dapat membantu seseorang dengan kesulitan kognitif](/people-use-web/user-stories/#supermarketassistant) + +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +## Pastikan elemen isian menyertakan label terkait yang jelas + +Pastikan semua bidang memiliki label deskriptif yang bersebelahan dengan bidang tersebut. Untuk bahasa dari kiri ke kanan, label biasanya diposisikan di kiri atau di atas bidang, kecuali untuk kotak centang dan tombol radio yang biasanya berada di kanan elemen. Hindari memberikan terlalu banyak ruang antara label dan bidangnya. + +{::nomarkdown} +{% include_cached box.html type="start" title="Contoh: Label dan bidang input dikaitkan berdasarkan kedekatan posisi" class="example" icon="check-circle" %} +{:/} + +
+
+
+
+
+ Tambahkan komentar +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+ +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +{::nomarkdown} +{% include_cached box.html type="start" title="Informasi Lebih Lanjut" class="simple" %} +{:/} + +* **WCAG** + * [Label atau Instruksi 3.3.2](/WAI/WCAG21/quickref/#labels-or-instructions) ([Memahami 3.3.2](/WAI/WCAG21/Understanding/labels-or-instructions)) + * [Judul dan Label 2.4.6](/WAI/WCAG21/quickref/#headings-and-labels) ([Memahami 2.4.6](/WAI/WCAG21/Understanding/headings-and-labels)) +* **Tutorial** + * [Posisi teks label secara visual](/tutorials/forms/labels/#visual-position-of-label-text) +* **Kisah Pengguna** + * [Bagaimana pemberian label yang jelas dapat membantu seseorang yang mengalami kesulitan kognitif](/people-use-web/user-stories/#supermarketassistant) + +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +## Sediakan umpan balik yang mudah diidentifikasi + +Berikan umpan balik untuk interaksi, seperti mengkonfirmasi pengiriman isian, memperingatkan pengguna ketika terjadi kesalahan, atau memberi tahu pengguna tentang perubahan pada halaman. Instruksi harus mudah diidentifikasi. Umpan balik penting yang memerlukan tindakan dari pengguna harus disajikan dengan gaya yang menonjol. + +{::nomarkdown} +{% include_cached box.html type="start" title="Contoh: Menggunakan daftar eror, ikon, dan warna latar belakang untuk menonjolkan tampilan eror" class="example" icon="check-circle" %} +{:/} + +
+
+
+
+

Harap perbaiki kesalahan berikut:

+
    +
  1. {% include_cached icon.html name="warning" label="Eror" %} Alamat email tidak valid
    2. +
  2. {% include_cached icon.html name="warning" label="Eror" %} Komentar diperlukan
    3. +
+
+
+
+ Tambahkan komentar +

Bidang yang harus diisi berwarna merah dan ditandai dengan *

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+ +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +{::nomarkdown} +{% include_cached box.html type="start" title="Informasi Lebih Lanjut" class="simple" %} +{:/} + +* **WCAG** + * [Identifikasi Eror 3.3.1](/WAI/WCAG21/quickref/#error-identification) ([Memahami 3.3.1](/WAI/WCAG21/Understanding/error-identification)) + * [Label atau Instruksi 3.3.2](/WAI/WCAG21/quickref/#labels-or-instructions) ([Memahami 3.3.2](/WAI/WCAG21/Understanding/labels-or-instructions)) + * [Saran Eror 3.3.3](/WAI/WCAG21/quickref/#error-suggestion) ([Memahami 3.3.3](/WAI/WCAG21/Understanding/error-suggestion)) +* **Tutorial** + * [Notifikasi Pengguna](/tutorials/forms/notifications/) +* **Kisah Pengguna** + * [Bagaimana membuat konten penting mudah diidentifikasi dapat membantu](/people-use-web/user-stories/#classroomstudent) + +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +## Gunakan judul dan spasi untuk mengelompokkan konten yang berhubungan + +Gunakan spasi dan kedekatan posisi untuk membuat hubungan antar konten menjadi lebih jelas. Tata judul guna mengelompokkan konten, mengurangi kekusutan, dan membuat kontenlebih mudah untuk dipindai dan dipahami. + +{::nomarkdown} +{% include_cached box.html type="start" title="Contoh: Spasi dapat menyoroti hubungan antar konten" class="example" %} +{:/} + +
+
+
{% include_cached icon.html name="ex-circle" label="Salah" %} Spasi yang sedikit dan hubungan yang tidak jelas
+
+ + + Satu judul dengan blok teks yang besar, pemisahan subjudul yang buruk, dan hubungan dengan gambar yang tidak jelas + Judul utama + + + + + + + + + + + + Subjudul + + + + + + + + Subjudul + + + + + + + + +
+
+
+
{% include_cached icon.html name="check-circle" label="Oke" %} Lebih banyak spasi dan hubungan yang lebih jelas
+
+ + + Judul utama, beberapa subjudul, daftar, dan tidak ada blok teks yang besar + Judul utama + + + + + + + + + + + + + Subjudul + + + + + + + + + + Subjudul + + + + + + + + + + + +
+
+
+ +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +{::nomarkdown} +{% include_cached box.html type="start" title="Informasi Lebih Lanjut" class="simple" %} +{:/} + +* **WCAG** + * [Judul dan Label 2.4.6](/WAI/WCAG21/quickref/#headings-and-labels) ([Memahami 2.4.6](/WAI/WCAG21/Understanding/headings-and-labels)) + * [Judul Bagian 2.4.10](/WAI/WCAG21/quickref/#section-headings) ([Memahami 2.4.10](/WAI/WCAG21/Understanding/section-headings)) +* **Tutorial** + * [Judul](/tutorials/page-structure/headings/) +* **Kisah Pengguna** + * [Menjelaskan bagaimana judul dapat berguna untuk navigasi](/people-use-web/user-stories/#accountant) + +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +## Buat desain untuk ukuran area-pandang yang berbeda + +Pertimbangkan bagaimana informasi halaman disajikan dalam berbagai ukuran area-pandang, seperti ponsel atau jendela browser yang diperbesar. Posisi dan penyajian elemen utama, seperti tajuk dan navigasi dapat diubah untuk memanfaatkan ruang sebaik-baiknya. Pastikan ukuran teks dan lebar baris diatur untuk memaksimalkan keterbacaan dan legibilitas (huruf mudah dibedakan). + +{::nomarkdown} +{% include_cached box.html type="start" title="Contoh: Konten dan navigasi menyesuaikan dengan layar ponsel yang lebih kecil" class="example" %} +{:/} + +
+
+
+ {% include_cached img.html src="content_in_browser.png" %} + {% include_cached img.html src="content_in_phone.png" %} +

Tampilan di jendela yang lebar dengan teks yang kecil menggunakan beberapa kolom untuk menampilkan konten utama, opsi navigasi yang tampak jelas, dan informasi sekunder yang tampak jelas.

+

Tampilan di jendela yang sempit, seperti ponsel, atau dengan teks yang besar menggunakan satu kolom untuk menampilkan konten utama, opsi navigasi ditampilkan menggunakan ikon, dan informasi sekunder juga ditampilkan melalui ikon.

+
+
+
+ +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +{::nomarkdown} +{% include_cached box.html type="start" title="Informasi Lebih Lanjut" class="simple" %} +{:/} + +* **Latar Belakang** + * [Layar Ukuran Kecil](/TR/mobile-accessibility-mapping/#h-small-screen-size) + * [Pertimbangan pada perangkat seluler terkait Dapat Dimengerti](/TR/mobile-accessibility-mapping/#mobile-accessibility-considerations-related-primarily-to-principle-3-understandable) +* **Kisah Pengguna** + * [Menjelaskan bagaimana alternatif tampilan pada halaman yang diperbesar dapat membantu](/people-use-web/user-stories/#retiree) + +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +## Sertakan alternatif gambar dan media dalam desain Anda + +Sediakan tempat dalam desain Anda untuk alternatif dari gambar dan media. Misalnya, Anda mungkin memerlukan: + +* Tautan yang tampak jelas ke transkrip audio +* Tautan yang tampak jelas ke versi video dengan deskripsi audio +* Teks beserta ikon dan tombol grafis +* Takarir dan deskripsi untuk tabel atau grafik yang kompleks + +Bekerjalah bersama penulis dan pengembang konten untuk memberikan alternatif bagi konten bukan teks. + +{::nomarkdown} +{% include_cached box.html type="start" title="Contoh: Desain menyertakan tautan ke transkripsi dan ke video dengan deskripsi audio" class="example" %} +{:/} + +
+
+
+ {% include_cached img.html src="example_media_player.png" alt="Menampilkan pemutar media. Selain tombol putar/jeda, bilah kemajuan, dan volume yang sudah normal ada, tersedia pula tombol takarir tertutup (CC) serta tautan ke transkripsi dan versi video dengan deskripsi audio." %} +
+
+
+ +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +{::nomarkdown} +{% include_cached box.html type="start" title="Informasi Lebih Lanjut" class="simple" %} +{:/} + +* **WCAG** + * [Konten Bukan Teks 1.1.1](/WAI/WCAG21/quickref/#non-text-content) ([Memahami 1.1.1](/WAI/WCAG21/Understanding/non-text-content)) +* **Tutorial** + * [Gambar](/tutorials/images/) +* **Kisah Pengguna** + * [Menjelaskan nilai dari alternatif teks bagi pengguna tunanetra](/people-use-web/user-stories/#accountant) + +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +## Sediakan kontrol untuk konten yang dimulai secara otomatis + +Berikan kontrol yang tampak jelas untuk memungkinkan pengguna menghentikan animasi atau suara yang diputar secara otomatis. Ini berlaku untuk korsel, gambar bergeser, suara latar belakang, dan video. + +{::nomarkdown} +{% include_cached box.html type="start" title="Contoh: Tampilkan tombol putar/berhenti dan kontrol pemilihan dalam desain korsel" class="example" %} +{:/} + +
+
+
+ {% include_cached img.html src="carousel_controls.png" alt="Contoh korsel dengan tombol putar dan pemilihan *slide*" %} +
+
+
+ +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +{::nomarkdown} +{% include_cached box.html type="start" title="Informasi Lebih Lanjut" class="simple" %} +{:/} + +* **WCAG** + * [Kontrol Audio 1.4.2](/WAI/WCAG21/quickref/#audio-control) ([Memahami 1.4.2](/WAI/WCAG21/Understanding/audio-control)) + * [Putar, Berhenti, Sembunyikan 2.2.2](/WAI/WCAG21/quickref/#pause-stop-hide) ([Memahami 2.2.2](/WAI/WCAG21/Understanding/pause-stop-hide)) +* **Tutorial** + * [Konsep Korsel](/tutorials/carousels/) + +{::nomarkdown} +{% include_cached box.html type="end" %} +{:/} + +{::nomarkdown} +{% include box.html type="start" title="Pelajari Lebih Lanjut Terkait Aksesibilitas" class="large" icon="readmore" %} +{:/} + +Kiat-kiat ini adalah beberapa hal yang perlu Anda pertimbangkan untuk aksesibilitas web. Sumber informasi berikut membantu Anda mempelajari mengapa aksesibilitas itu penting, dan tentang pedoman untuk menjadikan web lebih mudah diakses oleh penyandang disabilitas. + +* [Pengenalan ke Aksesibilitas Web](/fundamentals/accessibility-intro/) — mencakup isu-isu secara meluas, seperti kasus bisnis, dan tautan ke sumber informasi yang bermanfaat +* [Prinsip Aksesibilitas](/fundamentals/accessibility-principles/) — memperkenalkan konsep di balik persyaratan aksesibilitas web +* [Bagaimana Penyandang Disabilitas Menggunakan Web](/people-use-web/) — menjelajahi dampak desain yang dapat diakses dengan contoh di kehidupan nyata +* [Tutorial Aksesibilitas Web](/tutorials/) — mencakup beberapa panduan yang berkaitan dengan proses mendesain, misalnya, [menyediakan alternatif teks untuk gambar](/tutorials/images/) +* [Demonstrasi Sebelum dan Sesudah](/WAI/demos/bad/) — menunjukkan versi yang tidak dapat diakses dan dapat diakses dari situs yang sama, dengan catatan terkait hambatan dan perbaikan seputar aksesibilitasnya +* [Cara Memenuhi Target WCAG (Referensi Singkat)](/WAI/WCAG21/quickref/) — referensi yang dapat disesuaikan untuk semua persyaratan dan teknik WCAG +* [Daftar Sarana Evaluasi Aksesibilitas Web](/WAI/ER/tools/) — termasuk sarana untuk membantu mengeksplorasi rasio kontras + +{::nomarkdown} +{% include box.html type="end" %} +{:/} From 7ae0965d1865845daf00f59bb86875084ed18ab2 Mon Sep 17 00:00:00 2001 From: Fri Date: Fri, 24 Nov 2023 18:52:12 +0800 Subject: [PATCH 03/13] update mismatching translation on contrast example --- _tips/designing.id.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_tips/designing.id.md b/_tips/designing.id.md index 57a35b5..63d4c08 100644 --- a/_tips/designing.id.md +++ b/_tips/designing.id.md @@ -81,13 +81,13 @@ Teks pada latar depan harus memiliki kontras yang cukup dengan warna latar belak
{% include_cached icon.html name="ex-circle" label="Salah" %} Tidak mencukupi
-

Beberapa orang tidak dapat membaca teks jika kontras antara teks dan latar belakang tidak mencukupi. Bagi yang lain, warna terang (pencahayaan yang tinggi) membuat tidak terbaca; mereka membutuhkan pencahayaan yang rendah.

+

Beberapa orang tidak dapat membaca teks jika kontras antara teks dan latar belakangnya tidak mencukupi. Bagi yang lain, warna terang (pencahayaan yang tinggi) membuat tidak terbaca; mereka membutuhkan pencahayaan yang rendah.

{% include_cached icon.html name="check-circle" label="Oke" %} Mencukupi
-

Beberapa orang tidak dapat membaca teks jika kontras antara teks dan latar belakang tidak mencukupi. Bagi yang lain, warna cerah (luminansi tinggi) tidak terbaca; mereka membutuhkan pencahayaan rendah.

+

Beberapa orang tidak dapat membaca teks jika kontras antara teks dan latar belakangnya tidak mencukupi. Bagi yang lain, warna terang (pencahayaan yang tinggi) membuat tidak terbaca; mereka membutuhkan pencahayaan yang rendah.

From 2640d7d728bfba5358ba3eca0feab56fda93f83a Mon Sep 17 00:00:00 2001 From: Fri Date: Fri, 24 Nov 2023 19:31:16 +0800 Subject: [PATCH 04/13] fix missed words and make sentence changes for better comprehension when spoken --- _tips/designing.id.md | 54 +++++++++++++++++++++---------------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/_tips/designing.id.md b/_tips/designing.id.md index 63d4c08..8e873f1 100644 --- a/_tips/designing.id.md +++ b/_tips/designing.id.md @@ -115,7 +115,7 @@ Teks pada latar depan harus memiliki kontras yang cukup dengan warna latar belak ## Jangan hanya menggunakan warna untuk menyampaikan informasi -Meskipun warna dapat berguna untuk menyampaikan informasi, warna tidak boleh menjadi satu-satunya cara penyampaian informasi. Saat menggunakan warna untuk membedakan elemen satu dan lainnya, berikan juga identifikasi tambahan yang tidak bergantung pada persepsi warna. Misalnya, selain warna gunakan pula asteris untuk menunjukkan kolom isian yang harus diisi, dan gunakan label untuk membedakan area pada sebuah grafik. +Meskipun warna dapat berguna untuk menyampaikan informasi, warna seharusnya tidak menjadi satu-satunya cara dalam penyampaian informasi. Ketika menggunakan warna untuk membedakan elemen satu dan lainnya, berikan juga identifikasi tambahan yang tidak bergantung pada warna. Misalnya, selain warna gunakan pula asteris untuk menunjukkan kolom isian yang harus diisi, dan gunakan label untuk membedakan area pada sebuah grafik. {::nomarkdown} {% include_cached box.html type="start" title="Contoh: Gunakan warna untuk menyampaikan makna" class="example" %} @@ -201,7 +201,7 @@ Meskipun warna dapat berguna untuk menyampaikan informasi, warna tidak boleh men
- >Manakah yang merupakan segitiga siku-siku? + Manakah yang merupakan segitiga siku-siku?


@@ -233,7 +233,7 @@ Meskipun warna dapat berguna untuk menyampaikan informasi, warna tidak boleh men ## Pastikan elemen interaktif mudah diidentifikasi -Berikan gaya yang berbeda untuk elemen interaktif, seperti tautan dan tombol, agar mudah diidentifikasi. Misalnya dengan mengubah tampilan tautan ketika disoroti tetikus, fokus kibor, dan aktivasi layar sentuh. Pastikan gaya dan penamaan elemen interaktif digunakan secara konsisten di seluruh situs web. +Berikan gaya yang berbeda untuk elemen interaktif, seperti tautan dan tombol, agar mudah diidentifikasi. Misalnya dengan mengubah tampilan tautan ketika disoroti tetikus, difokuskan via kibor, dan diaktivasi via layar sentuh. Pastikan gaya dan penamaan elemen interaktif digunakan secara konsisten di seluruh situs web. {::nomarkdown} {% include_cached box.html type="start" title="Contoh: Gaya yang unik dan berbeda untuk beragam kondisi tautan" class="example" %} @@ -244,27 +244,27 @@ Berikan gaya yang berbeda untuk elemen interaktif, seperti tautan dan tombol, ag
{% include_cached icon.html name="check-circle" label="Oke" %} Gaya tautan tampak menonjol dari teks
-

Beberapa orang tidak bisa menggunakan tetikus dan hanya menggunakan navigasi dengan kibor halaman web.

-

Penting agar pengguna dapat menjangkau semua elemen interaktif menggunakan kibor, dan jelas elemen mana yang sedang menjadi fokus.

-

Fokus keyboard yang tampak jelas bisa berupa garis batas atau sorotan yang bergerak ketika Anda menelusuri halaman web dengan Tab.

+

Beberapa orang tidak bisa menggunakan tetikus dan hanya menggunakan navigasi dengan kibor pada halaman web.

+

Penting agar pengguna dapat menjangkau semua elemen interaktif dengan menggunakan kibor, dan jelas elemen mana yang sedang menjadi fokus.

+

Fokus kibor yang tampak jelas bisa berupa garis batas atau sorotan yang akan berpindah sembari Anda menelusuri halaman web dengan Tab.

-
{% include_cached icon.html name="check-circle" label="Oke" %} Gaya disoroti tetikus
+
{% include_cached icon.html name="check-circle" label="Oke" %} Gaya ketika disoroti tetikus
-
{% include_cached icon.html name="check-circle" label="OK" %} Gaya fokus kibor
+
{% include_cached icon.html name="check-circle" label="OK" %} Gaya ketika difokuskan via kibor
-
{% include_cached icon.html name="check-circle" label="Oke" %} Gaya klik atau sentuh
+
{% include_cached icon.html name="check-circle" label="Oke" %} Gaya ketika diklik atau disentuh
@@ -309,9 +309,9 @@ Pastikan navigasi di seluruh halaman dalam situs web memiliki penamaan, pemberia {% include_cached box.html type="end" %} {:/} -## Pastikan elemen isian menyertakan label terkait yang jelas +## Pastikan elemen isian disertai label yang jelas -Pastikan semua bidang memiliki label deskriptif yang bersebelahan dengan bidang tersebut. Untuk bahasa dari kiri ke kanan, label biasanya diposisikan di kiri atau di atas bidang, kecuali untuk kotak centang dan tombol radio yang biasanya berada di kanan elemen. Hindari memberikan terlalu banyak ruang antara label dan bidangnya. +Pastikan semua bidang memiliki label deskriptif yang bersebelahan dengan bidang tersebut. Untuk bahasa dari kiri ke kanan, label biasanya diposisikan di kiri atau di atas bidang, kecuali untuk kotak centang dan tombol radio yang biasanya diletakkan di kanan elemen. Hindari memberikan terlalu banyak ruang antara label dan bidangnya. {::nomarkdown} {% include_cached box.html type="start" title="Contoh: Label dan bidang input dikaitkan berdasarkan kedekatan posisi" class="example" icon="check-circle" %} @@ -329,7 +329,7 @@ Pastikan semua bidang memiliki label deskriptif yang bersebelahan dengan bidang
- +
@@ -400,7 +400,7 @@ Berikan umpan balik untuk interaksi, seperti mengkonfirmasi pengiriman isian, me
- +
@@ -424,7 +424,7 @@ Berikan umpan balik untuk interaksi, seperti mengkonfirmasi pengiriman isian, me * **Tutorial** * [Notifikasi Pengguna](/tutorials/forms/notifications/) * **Kisah Pengguna** - * [Bagaimana membuat konten penting mudah diidentifikasi dapat membantu](/people-use-web/user-stories/#classroomstudent) + * [Bagaimana membuat konten yang penting mudah diidentifikasi dapat membantu](/people-use-web/user-stories/#classroomstudent) {::nomarkdown} {% include_cached box.html type="end" %} @@ -432,7 +432,7 @@ Berikan umpan balik untuk interaksi, seperti mengkonfirmasi pengiriman isian, me ## Gunakan judul dan spasi untuk mengelompokkan konten yang berhubungan -Gunakan spasi dan kedekatan posisi untuk membuat hubungan antar konten menjadi lebih jelas. Tata judul guna mengelompokkan konten, mengurangi kekusutan, dan membuat kontenlebih mudah untuk dipindai dan dipahami. +Gunakan spasi dan kedekatan posisi untuk membuat hubungan antar konten menjadi lebih jelas. Tatalah posisi judul untuk mengelompokkan konten, mengurangi kekusutan, dan membuat konten lebih mudah untuk dipindai dan dipahami. {::nomarkdown} {% include_cached box.html type="start" title="Contoh: Spasi dapat menyoroti hubungan antar konten" class="example" %} @@ -543,7 +543,7 @@ Gunakan spasi dan kedekatan posisi untuk membuat hubungan antar konten menjadi l ## Buat desain untuk ukuran area-pandang yang berbeda -Pertimbangkan bagaimana informasi halaman disajikan dalam berbagai ukuran area-pandang, seperti ponsel atau jendela browser yang diperbesar. Posisi dan penyajian elemen utama, seperti tajuk dan navigasi dapat diubah untuk memanfaatkan ruang sebaik-baiknya. Pastikan ukuran teks dan lebar baris diatur untuk memaksimalkan keterbacaan dan legibilitas (huruf mudah dibedakan). +Pertimbangkan bagaimana informasi halaman disajikan dalam berbagai ukuran area-pandang, seperti ponsel atau jendela browser yang diperbesar. Posisi dan penyajian elemen utama, seperti tajuk dan navigasi dapat diubah untuk memanfaatkan ruang sebaik-baiknya. Pastikan ukuran teks dan lebar baris diatur untuk memaksimalkan keterbacaan dan kejelasan huruf (legibilitas). {::nomarkdown} {% include_cached box.html type="start" title="Contoh: Konten dan navigasi menyesuaikan dengan layar ponsel yang lebih kecil" class="example" %} @@ -583,11 +583,11 @@ Pertimbangkan bagaimana informasi halaman disajikan dalam berbagai ukuran area-p Sediakan tempat dalam desain Anda untuk alternatif dari gambar dan media. Misalnya, Anda mungkin memerlukan: * Tautan yang tampak jelas ke transkrip audio -* Tautan yang tampak jelas ke versi video dengan deskripsi audio -* Teks beserta ikon dan tombol grafis +* Tautan yang tampak jelas ke versi dengan deskripsi audio +* Teks yang menyertai ikon dan tombol grafis * Takarir dan deskripsi untuk tabel atau grafik yang kompleks -Bekerjalah bersama penulis dan pengembang konten untuk memberikan alternatif bagi konten bukan teks. +Bekerjalah bersama penulis dan pengembang konten untuk memberikan alternatif untuk konten nonteks. {::nomarkdown} {% include_cached box.html type="start" title="Contoh: Desain menyertakan tautan ke transkripsi dan ke video dengan deskripsi audio" class="example" %} @@ -610,7 +610,7 @@ Bekerjalah bersama penulis dan pengembang konten untuk memberikan alternatif bag {:/} * **WCAG** - * [Konten Bukan Teks 1.1.1](/WAI/WCAG21/quickref/#non-text-content) ([Memahami 1.1.1](/WAI/WCAG21/Understanding/non-text-content)) + * [Konten Nonteks 1.1.1](/WAI/WCAG21/quickref/#non-text-content) ([Memahami 1.1.1](/WAI/WCAG21/Understanding/non-text-content)) * **Tutorial** * [Gambar](/tutorials/images/) * **Kisah Pengguna** @@ -622,16 +622,16 @@ Bekerjalah bersama penulis dan pengembang konten untuk memberikan alternatif bag ## Sediakan kontrol untuk konten yang dimulai secara otomatis -Berikan kontrol yang tampak jelas untuk memungkinkan pengguna menghentikan animasi atau suara yang diputar secara otomatis. Ini berlaku untuk korsel, gambar bergeser, suara latar belakang, dan video. +Tampilkan kontrol untuk memungkinkan pengguna menghentikan animasi atau suara yang diputar secara otomatis. Ini berlaku untuk korsel, gambar bergeser, suara latar belakang, dan video. {::nomarkdown} -{% include_cached box.html type="start" title="Contoh: Tampilkan tombol putar/berhenti dan kontrol pemilihan dalam desain korsel" class="example" %} +{% include_cached box.html type="start" title="Contoh: Tampilkan tombol putar/berhenti dan kontrol seleksi dalam desain korsel" class="example" %} {:/}
- {% include_cached img.html src="carousel_controls.png" alt="Contoh korsel dengan tombol putar dan pemilihan *slide*" %} + {% include_cached img.html src="carousel_controls.png" alt="Contoh korsel dengan tombol putar dan seleksi *slide*" %}
@@ -655,16 +655,16 @@ Berikan kontrol yang tampak jelas untuk memungkinkan pengguna menghentikan anima {:/} {::nomarkdown} -{% include box.html type="start" title="Pelajari Lebih Lanjut Terkait Aksesibilitas" class="large" icon="readmore" %} +{% include box.html type="start" title="Pelajari Lebih Lanjut terkait Aksesibilitas" class="large" icon="readmore" %} {:/} -Kiat-kiat ini adalah beberapa hal yang perlu Anda pertimbangkan untuk aksesibilitas web. Sumber informasi berikut membantu Anda mempelajari mengapa aksesibilitas itu penting, dan tentang pedoman untuk menjadikan web lebih mudah diakses oleh penyandang disabilitas. +Kiat-kiat ini adalah beberapa hal yang perlu Anda pertimbangkan untuk aksesibilitas web. Sumber informasi berikut membantu Anda mempelajari mengapa aksesibilitas itu penting, dan terkait pedoman untuk menjadikan web lebih mudah diakses oleh penyandang disabilitas. * [Pengenalan ke Aksesibilitas Web](/fundamentals/accessibility-intro/) — mencakup isu-isu secara meluas, seperti kasus bisnis, dan tautan ke sumber informasi yang bermanfaat * [Prinsip Aksesibilitas](/fundamentals/accessibility-principles/) — memperkenalkan konsep di balik persyaratan aksesibilitas web -* [Bagaimana Penyandang Disabilitas Menggunakan Web](/people-use-web/) — menjelajahi dampak desain yang dapat diakses dengan contoh di kehidupan nyata +* [Bagaimana Penyandang Disabilitas Menggunakan Web](/people-use-web/) — menjelajahi dampak dari desain aksesibel dengan contoh di kehidupan nyata * [Tutorial Aksesibilitas Web](/tutorials/) — mencakup beberapa panduan yang berkaitan dengan proses mendesain, misalnya, [menyediakan alternatif teks untuk gambar](/tutorials/images/) -* [Demonstrasi Sebelum dan Sesudah](/WAI/demos/bad/) — menunjukkan versi yang tidak dapat diakses dan dapat diakses dari situs yang sama, dengan catatan terkait hambatan dan perbaikan seputar aksesibilitasnya +* [Demonstrasi Sebelum dan Sesudah](/WAI/demos/bad/) — menunjukkan versi yang tidak dan yang aksesibel dari contoh situs yang sama, dengan catatan terkait hambatan dan perbaikan seputar aksesibilitasnya * [Cara Memenuhi Target WCAG (Referensi Singkat)](/WAI/WCAG21/quickref/) — referensi yang dapat disesuaikan untuk semua persyaratan dan teknik WCAG * [Daftar Sarana Evaluasi Aksesibilitas Web](/WAI/ER/tools/) — termasuk sarana untuk membantu mengeksplorasi rasio kontras From a8beffad601fa20afeaab7a0a0337e3710919e28 Mon Sep 17 00:00:00 2001 From: Fri Date: Fri, 24 Nov 2023 21:35:12 +0800 Subject: [PATCH 05/13] fix yet translated part --- _tips/index.id.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_tips/index.id.md b/_tips/index.id.md index 63d2c0a..7c90336 100644 --- a/_tips/index.id.md +++ b/_tips/index.id.md @@ -55,4 +55,4 @@ Memulai dengan aksesibilitas. Kiat-kiat ini memperkenalkan beberapa pertimbangan * [[Mendesain untuk Aksesibilitas Web]](/tips/designing/): Kiat dalam mendesain antarmuka pengguna dan desain visual. * [[Menulis untuk Aksesibilitas Web]](/tips/writing/): Kiat dalam menulis dan menyajikan konten. -* [[Developing for Web Accessibility]](/tips/developing/): Kiat dalam membuat markah dan kode. +* [[Mengembangkan untuk Aksesibilitas Web]](/tips/developing/): Kiat dalam membuat markah dan kode. From 8ab93671e28b67d978cdde83933aac93e9abc262 Mon Sep 17 00:00:00 2001 From: Fri Date: Wed, 29 Nov 2023 13:14:25 +0800 Subject: [PATCH 06/13] add developing translation --- _tips/designing.id.md | 6 +- _tips/developing.id.md | 638 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 641 insertions(+), 3 deletions(-) create mode 100644 _tips/developing.id.md diff --git a/_tips/designing.id.md b/_tips/designing.id.md index 8e873f1..8a27942 100644 --- a/_tips/designing.id.md +++ b/_tips/designing.id.md @@ -541,9 +541,9 @@ Gunakan spasi dan kedekatan posisi untuk membuat hubungan antar konten menjadi l {% include_cached box.html type="end" %} {:/} -## Buat desain untuk ukuran area-pandang yang berbeda +## Buat desain untuk ukuran porta pandang yang berbeda -Pertimbangkan bagaimana informasi halaman disajikan dalam berbagai ukuran area-pandang, seperti ponsel atau jendela browser yang diperbesar. Posisi dan penyajian elemen utama, seperti tajuk dan navigasi dapat diubah untuk memanfaatkan ruang sebaik-baiknya. Pastikan ukuran teks dan lebar baris diatur untuk memaksimalkan keterbacaan dan kejelasan huruf (legibilitas). +Pertimbangkan bagaimana informasi halaman disajikan dalam berbagai ukuran porta pandang, seperti ponsel atau jendela browser yang dizum. Posisi dan penyajian elemen utama, seperti tajuk dan navigasi dapat diubah untuk memanfaatkan ruang sebaik-baiknya. Pastikan ukuran teks dan lebar baris diatur untuk memaksimalkan keterbacaan dan kejelasan huruf (legibilitas). {::nomarkdown} {% include_cached box.html type="start" title="Contoh: Konten dan navigasi menyesuaikan dengan layar ponsel yang lebih kecil" class="example" %} @@ -572,7 +572,7 @@ Pertimbangkan bagaimana informasi halaman disajikan dalam berbagai ukuran area-p * [Layar Ukuran Kecil](/TR/mobile-accessibility-mapping/#h-small-screen-size) * [Pertimbangan pada perangkat seluler terkait Dapat Dimengerti](/TR/mobile-accessibility-mapping/#mobile-accessibility-considerations-related-primarily-to-principle-3-understandable) * **Kisah Pengguna** - * [Menjelaskan bagaimana alternatif tampilan pada halaman yang diperbesar dapat membantu](/people-use-web/user-stories/#retiree) + * [Menjelaskan bagaimana alternatif tampilan pada halaman yang dizum dapat membantu](/people-use-web/user-stories/#retiree) {::nomarkdown} {% include_cached box.html type="end" %} diff --git a/_tips/developing.id.md b/_tips/developing.id.md new file mode 100644 index 0000000..46bc037 --- /dev/null +++ b/_tips/developing.id.md @@ -0,0 +1,638 @@ +--- +# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#". +# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:" + +title: "Mengembangkan untuk Aksesibilitas Web – Kiat Memulai" +title_html: "Mengembangkan untuk Aksesibilitas Web" +nav_title: "Kiat Pengembangan" +lang: id # Change "en" to the translated-language shortcode +last_updated: 2023-11-29 # Put the date of this translation YYYY-MM-DD (with month in the middle) + +resource: + ref: /tips/ + +navigation: + previous: /tips/designing/ + +translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space) +- name: "Fri Rasyidi" # Replace Jan Doe with translator name +# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators +# contributors: +# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none +# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors + +github: + repository: w3c/wai-quick-start + path: _tips/developing.id.md # Add the language shortcode to the middle of the filename, for example: content/index.fr.md + +permalink: /tips/developing/id # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr +ref: /tips/developing/ # Do not change this + +ext_css: tips.css +title_icon: /tips/img/icons.svg#developing + +acknowledgements: /tips/acknowledgements/ + +# In the footer below: +# Do not change the dates +# Do not translate ACKNOWLEDGEMENTS +# Translate the other words, including "Date:" and "Editors:" +# Translate the Working Group name. Leave the Working Group acronym in English. +footer: > +

Date: Perubahan minor 9 Januari 2019. Diperbarui 15 April 2016. Pertama kali dipublikasikan September 2015.

+

Editor: Kevin White, Shadi Abou-Zahra, and Shawn Lawton Henry. ACKNOWLEDGEMENTS memuat daftar kredit dan kontributor.

+

Dikembangkan oleh Kelompok Kerja Edukasi dan Pendampingan (EOWG). Dikembangkan sebagai bagian dari proyek WAI-DEV, didanai bersama oleh Komisi Eropa.

+--- + +{::nomarkdown} +{% include box.html type="start" h="2" title="Ringkasan" class="full" %} +{:/} + +Halaman ini memperkenalkan beberapa pertimbangan mendasar untuk membantu Anda mulai mengembangkan konten web yang lebih aksesibel bagi penyandang disabilitas. Kiat-kiat ini merupakan praktik yang baik dalam membantu Anda memenuhi persyaratan Pedoman Aksesibilitas Konten Web (WCAG). Ikuti tautan ke persyaratan WCAG terkait, latar belakang terperinci dalam dokumen "Memahami", panduan dari Tutorial, kisah pengguna, dan banyak lagi. + +{::nomarkdown} +{% include box.html type="end" %} +{:/} + +{::options toc_levels="2" /} + +{::nomarkdown} +{% include_cached toc.html type="start" title="Daftar Isi" class="full" %} +{:/} + +- TOC is created automatically. +{:toc} + +{::nomarkdown} +{% include_cached toc.html type="end" %} +{:/} + + + +## Kaitkan label dengan setiap kontrol pada isian + +Gunakan atribut `for` pada elemen `