# Dasar

Aksesibilitas Web (atau yang dikenal juga dengan a11y) mengacu kepada praktik pembuatan situs web yang dapat digunakan oleh siapapun - baik itu penyandang cacat, pengguna dengan koneksi yang lambat, pengguna dengan perangkat keras yang sudah ketinggalan zaman atau rusak, atau pengguna yang sedang tidak pada lingkungan yang mendukung. Contohnya, menambahkan subtitle ke dalam video akan membantu pengguna tuna rungu dan pengguna yang memiliki gangguan pendengaran serta pengguna yang sedang berada di lingkungan yang sangat bising sehingga tidak dapat mendengarkan video tersebut. Selain itu, memastikan subtitle tidak memiliki kontras yang terlalu rendah akan membantu pengguna dengan penglihatan rendah dan pengguna yang sedang menggunakan telepon mereka di bawah terik matahari.

Siap untuk memulai tetapi tidak yakin dari mana?

Lihatlah Planning and managing web accessibility guide (opens new window) yang disediakan oleh World Wide Web Consortium (W3C) (opens new window)

# Lewati tautan

Kamu sebaiknya menambahkan tautan di bagian atas setiap halaman yang mengarah langsung ke area konten sehingga pengguna dapat melewatkan konten yang diulang di beberapa halaman web.

Biasanya ini dilakukan di bagian atas App.vue karena ini akan menjadi elemen pertama yang difokuskan di semua halaman kamu:

<ul class="skip-links">
  <li>
    <a href="#main" ref="skipLink">Lewati ke konten utama</a>
  </li>
</ul>
1
2
3
4
5

Untuk menyembunyikan tautan (kecuali jika difokuskan), kamu dapat menambahkan gaya berikut:

.skipLink {
  white-space: nowrap;
  margin: 1em auto;
  top: 0;
  position: fixed;
  left: 50%;
  margin-left: -72px;
  opacity: 0;
}
.skipLink:focus {
  opacity: 1;
  background-color: white;
  padding: 0.5em;
  border: 1px solid black;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Setelah pengguna mengubah route, kembalikan fokus kepada lewati tautan. Ini dapat dicapai dengan cara berikut:

<script>
export default {
  watch: {
    $route() {
      this.$refs.skipLink.focus()
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9

See the Pen Skip to Main by Vue (@Vue) on CodePen.

Baca dokumentasi tentang lewati tautan ke konten utama (opens new window)

# Susun Konten Kamu

Salah satu bagian terpenting dari aksesibilitas adalah memastikan bahwa desain dapat mendukung implementasi aksesibilitas. Desain sebaiknya mempertimbangkan tidak hanya kontras warna, pilihan font, ukuran teks, dan bahasa, tetapi juga bagaimana konten yang disusun di dalam aplikasi.

# Judul

Pengguna dapat menavigasi aplikasi melalui judul. Memiliki judul yang deskriptif untuk setiap bagian aplikasimu dapat memudahkan pengguna untuk memprediksi konten yang ada di dalamnya. Terkait judul, berikut adalah beberapa praktik aksesibilitas yang direkomendasikan:

  • Tempatkan judul berdasarkan kepentingannya: <h1> - <h6>
  • Jangan melewatkan judul dalam suatu bagian
  • Gunakan tanda judul yang sebenarnya, bukan menggunakan teks yang diberi gaya untuk memberikan tampilan visual pada judul.

Baca lebih lanjut mengenai judul (opens new window)

<main role="main" aria-labelledby="judul-utama">
  <h1 id="judul-utama">Judul Utama</h1>
  <section aria-labelledby="judul-bagian">
    <h2 id="judul-bagian">Judul Bagian</h2>
    <h3>Subtitle Bagian</h3>
    <!-- Konten -->
  </section>
  <section aria-labelledby="judul-bagian">
    <h2 id="judul-bagian">Judul Bagian</h2>
    <h3>Subtitle Bagian</h3>
    <!-- Konten -->
    <h3>Subtitle Bagian</h3>
    <!-- Konten -->
  </section>
</main>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Landmark

Landmark menyediakan akses programatik ke bagian dalam aplikasi. Pengguna yang mengandalkan teknologi pendukung dapat melakukan navigasi ke setiap bagian aplikasi dan melewati konten. Kamu dapat menggunakan ARIA roles (opens new window) untuk informasi lebih lanjut.

HTML ARIA Role Landmark Purpose
header role="banner" Judul utama: judul halaman
nav role="navigation" Kumpulan link yang cocok digunakan saat menavigasi dokumen atau dokumen terkait
main role="main" Isi utama atau konten utama dari dokumen
footer role="contentinfo" Informasi tentang dokumen induk: catatan kaki / hak cipta / tautan ke pernyataan privasi
aside role="complementary" Mendukung konten utama, namun terpisah dan memiliki makna pada kontennya sendiri
Not available role="search" Bagian ini berisi fungsionalitas pencarian untuk aplikasi
form role="form" Kumpulan elemen yang terkait dengan formulir
section role="region" Konten yang relevan dan kemungkinan besar ingin dinavigasi oleh pengguna. Label harus diberikan untuk elemen ini

Tip:

Direkomendasikan untuk menggunakan landmark elemen HTML dengan atribut peran (role attributes) landmark yang redundan untuk memaksimalkan kompatibilitas dengan peramban yang tidak mendukung elemen semantik HTML5 (opens new window)

Baca lebih lanjut mengenai landmark (opens new window)

Deployed on Netlify.
Pembaruan terakhir: 2021-04-07, 07:03:12 UTC