Mengembangkan untuk Aksesibilitas Web

Tentang Terjemahan Ini

Terjemahan sukarela ini mungkin tidak menggambarkan secara akurat intensi dari dokumen Bahasa Inggris aslinya.

Versi terjemahan ini sama dengan versi Bahasa Inggris-nya.
Terjemahan diperbarui: 2024-03-13. Bahasa Inggris diperbarui: 2019-01-09.

Penerjemah: Fri Rasyidi.
WAI berterimakasih kepada para penerjemah, dan menyambut terjemahan lainnya.

Kaitkan label dengan setiap kontrol pada isian

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.

Sediakan alternatif teks untuk gambar

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.

Identifikasi bahasa halaman dan perubahan bahasa

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 untuk menyampaikan makna dan struktur

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.

Contoh: Menggunakan HTML untuk menyediakan struktur dan makna

Hasil penyajian

Superbear menyelamatkan hari ini

7 Agt 2015

Beruang favorit kota ini sekali lagi membuktikan keberaniannya dengan menyelamatkan seekor kucing kecil dari atas pohon. Para saksi mata mengatakan bahwa upaya Superbear tidak dihargai oleh kucing tersebut, yang mengakibatkan beberapa luka cakaran ringan pada penyelamatnya.

Penggalan Kode

<section>
  <article>
    <h2>Superbear menyelamatkan hari ini</h2>
    <time datetime="2015-08-07">7 Agt 2015</time>
    <p>Beruang favorit kota ini sekali lagi membuktikan keberaniannya dengan menyelamatkan seekor kucing kecil dari atas pohon. Para saksi mata mengatakan bahwa upaya Superbear tidak dihargai oleh kucing tersebut, yang mengakibatkan beberapa luka cakaran ringan pada penyelamatnya.</p>
    <aside>
      <h3>Artikel Terkait</h3>
      <ul>
        <li><a href="#">Bear menerima kunci kota</a></li>
        <li><a href="#">Superbear mendukung walikota</a></li>
      </ul>
    </aside>
  </article>
</section>

Contoh: Bidang pencarian dengan WAI-ARIA

Hasil penyajian

Penggalan Kode

<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>

Bantu pengguna menghindari dan memperbaiki kesalahan

Berikan instruksi, pesan eror, dan notifikasi yang jelas untuk membantu pengguna melengkapi isian di situs Anda. Ketika kesalahan terjadi:

Bantu pengguna menemukan letak masalahnya
Berikan penjelasan yang spesifik dan bisa dimengerti
Berikan saran perbaikan

Sebisa mungkin toleransi kesalahan format saat memproses input dari pengguna. Misalnya, menerima nomor telepon dengan spasi dan menghapus spasi tersebut sesuai kebutuhan.

Contoh: Bidang nomor telepon Australia dengan validasi yang toleran

Hasil penyajian

Telepon

Contoh, (02) 1234 1234

Penggalan Kode

<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>

Cerminkan urutan membaca pada urutan kode

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.

Contoh: Mencerminkan urutan membaca secara logis pada kode

Sepatu olah raga ruang angkasa

Sepatu olah raga ruang angkasa untuk tampilan klasik dan bergengsi.

Tambahkan ke keranjang

Gambar sebelum judul mungkin terlewatkan

<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>

Judul menandai awal dari sebuah bagian

<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>

Tulis kode yang mampu menyesuaikan dengan teknologi pengguna

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.

Contoh: Menggunakan kueri media untuk menyesuaikan navigasi

/* 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%;
  }
}

Sediakan makna untuk elemen interaktif yang nonstandar

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.

Contoh: Fungsi dan kondisi menu diidentifikasi menggunakan WAI-ARIA

<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>

Pastikan semua elemen interaktif bisa diakses melalui kibor

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.

Contoh: Tombol menu yang bisa diakses kibor

Hasil penyajian

Penggalan Kode

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'));
});

Hindari CAPTCHA saat memungkinkan

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:

Menyediakan lebih dari dua cara untuk menyelesaikan CAPTCHA
Menyediakan akses ke alternatif bantuan manusia untuk menghindari CAPTCHA
Tidak memerlukan CAPTCHA untuk pengguna terotorisasi.

Pelajari Lebih Lanjut Terkait Aksesibilitas

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 — Memperkenalkan aksesibilitas dan menyediakan tautan ke sumber informasi yang bermanfaat
Prinsip Aksesibilitas (dalam Bahasa Inggris) — Pengenalan ke persyaratan WCAG
Bagaimana Penyandang Disabilitas Menggunakan Web (dalam Bahasa Inggris) — Contoh nyata dari manfaat aksesibilitas bagi pada penyandang disabilitas
Tutorial Aksesibilitas Web (dalam Bahasa Inggris) — Menampikan pada Anda cara untuk mengembangkan konten web yang asesibel untuk pada penyadang disabilitas
Demonstrasi Sebelum dan Sesudah — Contoh situs web yang aksesibel dan tidak dengan desain visual yang sama, dengan catatan yang menyiritu hambatan dan perbaikan seputar aksesibilitasnya, dan laporan evaluasi untuk WCAG
Cara Memenuhi Target WCAG (Referensi Cepat) — referensi yang bisa disesuaikan untuk semua persyaratan dan teknik WCAG
Daftar Sarana Evaluasi Aksesibilitas Web — Menyediakan serangkaian sarana untuk membantu mengeksplorasi aksesibilitas sebuah kode
Gambaran Umum WAI-ARIA (dalam Bahasa Inggris) — Pengenalan ke WAI-ARIA dengan tautan ke semua spesifikasinya

Kembali ke Atas