Sepatu olah raga ruang angkasa
![Sepatu high top berwarna ungu dengan tali putih, titik putih polos di bagian luar pergelangan kaki, dan toe cap berwarna putih](/content-images/tips/trainer.png)
Sepatu olah raga ruang angkasa untuk tampilan klasik dan bergengsi.
This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.
dalam Kiat Memulai
Terjemahan sukarela ini mungkin tidak menggambarkan secara akurat intensi dari dokumen Bahasa Inggris aslinya.
Penerjemah: Fri Rasyidi.
WAI berterimakasih kepada para penerjemah, dan menyambut terjemahan lainnya.
Needs Translation Notice: Versi Bahasa Inggris diperbarui setelah terjemahan dibuat. — Catatan perubahan
Bahasa Inggris diperbarui: 2024-07-16 — Terjemahan diperbarui: 2024-03-13.
Needs Translation We welcome a translation update.
Gunakan atribut for
pada elemen <label>
yang dihubungkan ke atribut id
dari elemen isiannya, atau gunakan atribut WAI-ARIA. Dalam situasi tertentu, menyembunyikan elemen <label>
secara visual mungkin bisa diterima, namun pada sebagian besar kasus, label diperlukan untuk membantu semua pembaca mengerti input apa yang diperlukan.
Pastikan alternatif teks untuk gambar ditambahkan ke semua gambar yang bersifat informatif mau pun fungsional. Gunakan teks alternatif kosong, alt=""
untuk gambar dekoratif, atau sertakan gambar tersebut pada CSS. Alternatif teks biasanya disediakan oleh mereka yang bertanggung jawab untuk menulis konten.
Tunjukkan bahasa utama setiap halaman dengan menggunakan atribut lang
pada tag html
, misalnya <html lang="id">
. Gunakan atribut lang
pada elemen jika bahasa elemen tersebut berbeda dari elemen lainnya pada halaman.
Gunakan markah yang sesuai untuk judul, daftar, tabel, dll. HTML5 menyediakan elemen tambahan, seperti <nav>
dan <aside>
, untuk menstrukturkan konten Anda dengan lebih baik. Atribut peran (role) WAI-ARIA dapat memberikan makna tambahan, misalnya, menggunakan role="search"
untuk mengidentifikasi fungsi penelusuran. Bekerja samalah dengan desainer dan penulis konten untuk menyepakati makna yang digunakan dan kemudian menggunakannya secara konsisten.
<form action="#" method="post">
<div role="search">
<label for="search">Mencari</label>
<input type="search" id="search" aria-describedby="search-help">
<div id="search-help">Cari menggunakan id atau nama pelanggan</div>
<button type="submit">Cari</button>
</div>
</form>
Berikan instruksi, pesan eror, dan notifikasi yang jelas untuk membantu pengguna melengkapi isian di situs Anda. Ketika kesalahan terjadi:
Sebisa mungkin toleransi kesalahan format saat memproses input dari pengguna. Misalnya, menerima nomor telepon dengan spasi dan menghapus spasi tersebut sesuai kebutuhan.
Contoh, (02) 1234 1234
<label for="phone">Phone</label>
<input id="phone" name="phone" type="tel"
pattern="^(\(?0[1-9]{1}\)?)?[0-9 -]*$"
aria-describedby="phone-desc">
<p id="phone-desc">Contoh, (02) 1234 1234</p>
Pastikan urutan elemen dalam kode sesuai dengan urutan logis dari informasi yang disajikan. Salah satu cara untuk memeriksanya adalah dengan menghapus gaya CSS dan meninjau apakah urutan kontennya masuk akal.
Sepatu olah raga ruang angkasa untuk tampilan klasik dan bergengsi.
<img src="images/trainer.png" alt="...">
<h3>Sepatu olah raga ruang angkasa</h3>
<p>Sepatu...</p>
<a href="...">Tambahkan ke keranjang</a>
Lihat contoh lengkap kode
<article class="product">
<img alt="Sepatu high top berwarna ungu dengan tali putih, titik putih polos di bagian luar pergelangan kaki, dan toe cap berwarna putih" src="images/trainer.png">
<h3 class="name">Sepatu olah raga ruang angkasa</h3>
<p class="desc">Sepatu olah raga ruang angkasa untuk tampilan klasik dan bergengsi.</p>
<p class="buy"><a href="javascript:return false"><svg class="icon"><use xlink:href="#cart-plus"/></svg> Tambahkan ke keranjang</a></p>
</article>
<h3>Sepatu olah raga ruang angkasa</h3>
<img src="images/trainer.png" alt="...">
<p>Sepatu...</p>
<a href="...">Tambahkan ke keranjang</a>
Lihat contoh lengkap kode
<article class="product">
<h3 class="name">Sepatu olah raga ruang angkasa</h3>
<img alt="Sepatu high top berwarna ungu dengan tali putih, titik putih polos di bagian luar pergelangan kaki, dan toe cap berwarna putih" src="images/trainer.png">
<p class="desc">Sepatu olah raga ruang angkasa untuk tampilan klasik dan bergengsi.</p>
<p class="buy"><a href="javascript:return false"><svg class="icon"><use xlink:href="#cart-plus"/></svg> Tambahkan ke keranjang</a></p>
</article>
Gunakan desain responsif untuk menyesuaikan tampilan dengan kondisi zum dan ukuran porta pandang yang berbeda, seperti pada perangkat seluler dan tablet. Jika ukuran fon diperbesar setidaknya 200%, hindari pengguliran layar secara horizontal dan cegah adanya konten yang terpotong. Gunakan metode Peningkatan Progresif untuk membantu memastikan fungsionalitas inti dan konten tersedia terlepas dari teknologi yang digunakan.
/* Pada porta pandang sempit, gunakan navigasi lebar penuh */
@media screen and (min-width: 25em) {
#nav {
float: none;
width: auto;
}
#main {
margin-left: 0;
}
}
/* Pada porta pandang lebar, letakkan navigasi di sebelah kiri */
@media screen and (min-width: 43em) {
#nav {
float: left;
width: 24%;
}
#main {
margin-left: 27%;
}
}
Gunakan WAI-ARIA untuk memberikan informasi tentang fungsi dan status widget yang dirancang khusus, seperti akordeon dan tombol yang dirancang khusus. Misalnya, role="navigation"
dan aria-expanded="true"
. Kode tambahan diperlukan untuk mengimplementasikan perilaku widget tersebut, seperti memperluas dan menyusutkan konten, atau bagaimana widget merespons aksi dari kibor.
<nav aria-label="Navigasi Utama" role="navigation">
<ul>
<li><a href="...">Beranda</a></li>
<li><a href="...">Toko</a></li>
<li class="has-submenu">
<a aria-expanded="false" aria-haspopup="true" href="...">SpaceBear</a>
<ul>
<li><a href="...">SpaceBear 6</a></li>
<li><a href="...">SpaceBear 6 Plus</a></li>
</ul>
</li>
<li><a href="...">MarsCars</a></li>
<li><a href="...">Kontak</a></li>
</ul>
</nav>
Pikirkan tentang akses kibor, terutama saat mengembangkan elemen interaktif, seperti menu, informasi sorotan tetikus, akordeon yang bisa disusutkan, atau pemutar media. Gunakan tabindex="0"
untuk menambahkan elemen yang biasanya tidak menerima fokus, seperti <div>
atau <span>
, ke dalam urutan navigasi untuk digunakan pada saat interaksi. Gunakan skrip untuk menangkap dan merespons aksi dari kibor.
var buttonExample = document.getElementById('example-button');
buttonExample.addEventListener('keydown', function(e) {
// Membuka menu ketika RETURN ditekan
if(e.keyCode && e.keyCode == 13) {
toggleMenu(document.getElementById('example-button-menu'));
}
});
buttonExample.addEventListener('click', function(e) {
// Membuka menu ketika tetikus diklik
toggleMenu(document.getElementById('example-button-menu'));
});
CAPTCHA menimbulkan masalah bagi banyak orang. Ada cara-cara lain yang lebih mudah digunakan untuk memverifikasi bahwa masukan pengguna benar dihasilkan oleh manusia, seperti deteksi otomatis atau interaksi antarmuka. Jika CAPTCHA benar-benar perlu disertakan, pastikan CAPTCHA mudah dimengerti dan menyertakan alternatif bagi pengguna penyandang disabilitas, seperti:
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.
Mohon berikan gagasan, saran, atau komentar melalui email ke daftar yang diarsipkan secara terbuka wai@w3.org atau melalui GitHub.
This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.