Cara Menggunakan Lewati Tautan untuk Membuat Situs WordPress Anda Lebih Mudah Diakses

Dalam pengantar seri aksesibilitas kami, kami berbicara tentang dasar untuk berbagai Pedoman Aksesibilitas Konten Web (WCAG). Sekarang saatnya untuk mengambil langkah selanjutnya dengan melihat beberapa pedoman utama dan menunjukkan kepada Anda cara membuat situs Anda lebih mudah diakses. Mari kita mulai dengan melewati blok, lebih dikenal sebagai tautan lewati.

Apa itu Tautan Lewati?

Tautan lewati adalah tautan khusus yang disembunyikan di situs Anda hingga masuk ke :focus melalui tombol tab atau pembaca layar. Tujuan mereka adalah memberi pengguna teknologi alternatif (orang yang menggunakan keyboard dan pembaca layar) kemampuan untuk melewati blok konten. Langsung dari standar:

“Mekanisme tersedia untuk mem-bypass blok konten yang diulang di beberapa halaman Web.” – Standar WCAG 2.4.1 – Blok Bypass

2.4.1 adalah standar A-level. Ini berarti hal itu dicakup oleh Bagian 508, dan diharuskan oleh hukum. Anda harus memiliki tautan yang dilewati.

Bisakah Anda menebak apa blok tautan konten yang paling umum diterapkan? Jika Anda menebak "menu", Anda benar. Menu muncul di hampir setiap halaman situs. Pengguna yang terlihat dan pengguna mouse cenderung menggulir ke kanan karena itu adalah salah satu elemen situs yang Anda harapkan ada di sana. Tapi menu nav bukan satu-satunya blok yang membutuhkan tautan lewati.

Area yang biasanya terlewatkan untuk tautan lewati adalah sidebars kiri (atau sidebars kanan untuk situs dalam bahasa kanan-ke-kiri seperti bahasa Arab). Karena di mana mereka cenderung jatuh dalam urutan semantik, pengguna akan memerlukan cara untuk melewati sidebar yang berulang secara teratur untuk langsung ke konten.

Hal yang sama berlaku untuk blok posting unggulan yang muncul di luar halaman beranda. Beberapa desain situs membawa bagian posting unggulan atau penggeser ke halaman interior. Kecuali konten dari bagian tersebut berubah, yaitu: halaman kategori atau arsip, harus ada tautan yang dilewati.

Bagaimana Anda Menambahkan Tautan Lewati?

Sekarang setelah Anda mengetahui apa itu tautan lewati, saatnya untuk menambahkannya ke situs Anda. Ada beberapa cara untuk mengatasi masalah ini. Cara mudah (dan bagi Anda yang bukan pembuat kode, satu-satunya cara), adalah memasang plugin. Cara yang sulit adalah mengkodekannya sendiri ke dalam tema Anda.

Menggunakan Plugin

Satu plugin yang kami rekomendasikan untuk melewati tautan: Aksesibilitas WP oleh Joe Dolson. Ini menyelesaikan beberapa masalah aksesibilitas, termasuk menambahkan tautan lewati dasar untuk Anda.

Mengkodekannya Sendiri

Pilihan Anda yang lain adalah kode lewati tautan sendiri. Kodenya sendiri cukup sederhana dan hanya memerlukan sedikit pengetahuan HTML dan CSS dasar, tetapi Anda harus terbiasa dengan cara kerja tema dan templat WordPress sebelum mencoba metode ini. Mulai saat ini, kami akan menganggap Anda tahu cara menemukan file yang direferensikan dan cara mengeditnya.

Kami akan mulai dengan menulis tautan lewati yang sebenarnya terlebih dahulu. Ini akan memudahkan copy-and-paste ke dalam file template. Mengingat pengetahuan HTML, Anda harus menulis tag jangkar. Perhatikan bahwa pemformatan di sini adalah untuk keterbacaan.

 <a href=”[don't fill this in yet]” class=”skip-link”> Skip to Main Content </a>

Kami sengaja membiarkan atribut href kosong. Ini karena kita perlu menentukan ke mana tautan lewati kita akan ditautkan. Untuk contoh ini, kami akan menggunakan elemen <main> sebagai target kami. Karena kami tidak dapat menautkan langsung ke elemen tanpa ID, kami harus memastikan elemen <main> kami memilikinya. Elemen <main> Anda kemungkinan besar akan ditemukan di header.php , tetapi tidak selalu. Setelah Anda menemukan elemennya, Anda harus memastikan elemen tersebut memiliki ID. Jika tidak, tambahkan satu seperti ini:

 <main id=”main-content”> [a bunch more code below]

Nilai spesifik ID tidak penting, tetapi Anda harus mengingatnya. Sekarang Anda ingin memperbarui kode tautan lewati dengan nilai ID.

 <a href=”#main-content” class=”skip-link”> Skip to Main Content </a>

Sekarang setelah Anda membuat tautan lewati, kembali ke file header.php Anda atau di mana pun tag <body> pembuka tema Anda berada. Tag <body> adalah penempatan penting untuk melewati tautan karena mereka harus menjadi hal pertama mutlak yang masuk ke :focus untuk pengguna keyboard dan pembaca layar.

Tepat setelah tag <body> , lewati HTML Anda yang telah selesai. Berikut ini menunjukkan contoh yang lebih detail dengan beberapa tautan yang dilewati. Jika Anda ingin menambahkan beberapa tautan ke situs Anda, pastikan ID diterapkan dengan benar.

 <body> <a href=”#left-sidebar” class=”skip-link”>Skip to Sidebar</a> <a href=”#featured-posts-block” class=”skip-link”>Skip to Featured Posts</a> <a href=”#main-content” class=”skip-link”>Skip to Main Content</a> [Header navigation goes here]

Sekarang Anda memiliki tautan lewati di kode Anda, tetapi Anda belum selesai! Jika Anda memuat halaman Anda sekarang, Anda akan melihat tautan lewati di bagian atas. Saatnya menambahkan beberapa CSS. Penataan tautan lewati cukup sederhana, menggunakan contoh di bawah ini:

 .skip-link { position: absolute; top: 0; z-index: 9999; right: 100%; padding: 5px; padding: 0.5rem; font-size: 20px; font-size: 2rem; color: #000; background: #FFF; } .admin-bar .skip-link { top: 32px; } .skip-link:focus { right: auto; }

Apa yang tidak Anda lihat adalah penggunaan display: none . Menggunakannya akan menyebabkan pembaca layar melewatkan tautan seluruhnya, menggagalkan tujuannya sepenuhnya. Penyembunyian dilakukan dengan menempatkan teks dari layar menggunakan right: 100% dan menggesernya ke right: auto on :focus .

Dengan CSS Anda diterapkan, Anda sudah siap. Tautan lewati Anda ada di tempatnya, tetapi tersembunyi. Saat pengguna keyboard atau pembaca layar memuat halaman Anda di inisiat :focus , tautan lewati Anda akan membiarkan mereka langsung beralih ke konten yang mereka inginkan.

Membungkusnya

Tautan lewati adalah contoh sempurna dari fitur aksesibilitas yang sepertinya banyak pekerjaan, tetapi sebenarnya tidak. Yang kami lakukan di sisi kode adalah menambahkan beberapa baris HTML dan CSS. Untuk pendekatan non-teknis, kami memasang sebuah plugin. Tidak ada metode yang membutuhkan waktu lama, yang penting untuk diperhatikan karena tautan lewati adalah standar A-level untuk WCAG 2.0 (standar WCAG terbaru). Anda diharuskanoleh hukum untuk memilikinya di situs Anda.Jangan menempatkan diri Anda dalam risiko; tambahkan tautan lewati Anda hari ini!