Navigasi & Struktur
SkipLink (Lompat ke Konten Utama)
Tautan tersembunyi yang langsung muncul saat tombol Tab ditekan pertama kali untuk memudahkan pengguna disabilitas dan keyboard.
SkipLink (.mjl-skip-link) adalah komponen aksesibilitas mendasar yang diwajibkan oleh WCAG 2.1 Success Criterion 2.4.1 (Bypass Blocks).
Komponen ini tersembunyi di luar layar (offscreen) secara default, dan baru melompat muncul ke depan pandangan ketika warga menavigasi situs menggunakan tombol Tab pada keyboard.
1. Pratinjau Interaktif
Klik tombol di bawah untuk melihat wujud SkipLink saat menerima fokus keyboard:
Simulasi Fokus SkipLink
Tekan tombol Tab pada keyboard Anda atau klik contoh di bawah:
Lompat langsung ke konten utama →2. Aturan Implementasi Wajib
- Target ID yang Valid: Atribut
hrefwajib merujuk ke elemen<main id="main-content">halaman Anda. - Atribut
tabindex="-1": Pasang pada elemen<main>target agar peramban seperti Safari dan Chrome memindahkan fokus fokus keyboard secara benar tanpa menimbulkan efek visual kotak garis ganda.
Penggunaan di Berbagai Teknologi
Salin contoh sesuai teknologi proyek Anda. Semua versi memakai class dari @majalengka/css. Komponen siap pakai tersedia di @majalengka/vue; untuk React, Angular, Laravel, dan PHP, contoh di bawah sudah berupa pembungkus kecil yang bisa langsung disalin ke proyek.
<body>
<a href="#konten" class="mjl-skip-link">Langsung ke konten utama</a>
<header>...</header>
<main id="konten" tabindex="-1">...</main>
</body>
<script setup lang="ts">
import { MjlSkipLink } from '@majalengka/vue';
</script>
<template>
<MjlSkipLink target-id="#konten" />
<header>...</header>
<main id="konten" tabindex="-1"><slot /></main>
</template>
import type { ReactNode } from 'react';
export function Layout({ children }: { children: ReactNode }) {
return (
<>
<a href="#konten" className="mjl-skip-link">Langsung ke konten utama</a>
<header>...</header>
<main id="konten" tabIndex={-1}>{children}</main>
</>
);
}
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
template: `
<a href="#konten" class="mjl-skip-link">Langsung ke konten utama</a>
<header>...</header>
<main id="konten" tabindex="-1"><router-outlet /></main>
`,
})
export class App {}
{{-- resources/views/layouts/app.blade.php --}}
<body>
<a href="#konten" class="mjl-skip-link">Langsung ke konten utama</a>
@include('partials.header')
<main id="konten" tabindex="-1">@yield('content')</main>
</body>
<body>
<a href="#konten" class="mjl-skip-link">Langsung ke konten utama</a>
<?php include __DIR__ . '/partials/header.php'; ?>
<main id="konten" tabindex="-1">
<?php include $halaman; ?>
</main>
</body>