A11y untuk Form dan Navigasi

Form dan navigasi adalah area di mana accessibility paling berdampak — ini tempat user berinteraksi aktif dengan website.

Label-Input Connection

Setiap input harus punya label yang terhubung:

<!-- ✅ Explicit label (recommended) -->
<label for="email">Email</label>
<input type="email" id="email" name="email" />

<!-- ✅ Implicit label (wrapping) -->
<label>
  Email
  <input type="email" name="email" />
</label>

Jangan gunakan placeholder sebagai pengganti label — placeholder menghilang saat user mulai mengetik.

Error Messages yang Accessible

<label for="password">Password</label>
<input
  type="password"
  id="password"
  aria-invalid="true"
  aria-describedby="pw-error"
/>
<span id="pw-error" role="alert">
  Password minimal 8 karakter.
</span>

Required Fields

<label for="name">
  Nama <span aria-hidden="true">*</span>
  <span class="sr-only">(wajib diisi)</span>
</label>
<input id="name" required aria-required="true" />

Focus Management

User keyboard navigasi menggunakan Tab untuk berpindah antar elemen:

/* ✅ Custom focus style yang jelas */
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

/* ❌ Jangan hilangkan outline tanpa pengganti */
:focus { outline: none; } /* JANGAN! */

Skip Navigation

Untuk keyboard users, tambahkan link "skip to content" agar bisa melompati navigasi:

<a href="#main-content" class="skip-link">
  Skip to main content
</a>
<!-- ... navigation ... -->
<main id="main-content">
  <!-- content -->
</main>

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
}
.skip-link:focus {
  top: 0;
  z-index: 100;
}

Screen Reader Only Text

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

Gojek dan Tokopedia terus meningkatkan accessibility mereka — ini penting untuk pasar Indonesia yang beragam.