Cara menggunakan tautan lewati 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 berikutnya dengan melihat beberapa panduan utama dan menunjukkan kepada Anda bagaimana membuat situs Anda lebih mudah diakses. Mari kita mulai dengan memotong blok, yang 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 untuk memberikan 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 tingkat-A. Ini berarti hal itu dicakup oleh Bagian 508, dan diwajibkan oleh hukum. Anda harus memiliki tautan lewati.

Bisakah Anda menebak untuk apa blok tautan lewati konten yang paling umum diterapkan? Jika Anda menebak "menu", Anda akan benar. Menu muncul di hampir setiap halaman situs. Pengguna yang dapat melihat 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 sering diabaikan untuk tautan lewati adalah bilah sisi kiri (atau bilah sisi kanan untuk situs dalam bahasa kanan-ke-kiri seperti bahasa Arab). Karena di mana mereka cenderung jatuh dalam urutan semantik, pengguna akan membutuhkan 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 slider ke halaman interior. Kecuali jika konten dari bagian tersebut berubah, misalnya: kategori atau halaman arsip, harus ada tautan lewati.

Pengantar aksesibilitas: Bagian 1

Aksesibilitas adalah istilah yang terus Anda dengar, tetapi mungkin tidak sepenuhnya dipahami. Ini sebagian karena kata itu sendiri bisa sedikit membingungkan. Akar kata, akses, membuat konsep tersebut tampak terikat pada hal-hal seperti...

Bagaimana cara menambahkan tautan lewati?

Sekarang setelah Anda mengetahui apa itu tautan lewati, saatnya 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 dengan mengkodekannya ke dalam tema Anda sendiri.

Menggunakan plugin

Ada dua plugin yang saya rekomendasikan untuk melewati tautan: WP Accessibility oleh Joe Dolson dan Genesis Accessible oleh Rian Rietveld. Kedua plugin menyelesaikan beberapa masalah aksesibilitas, termasuk menambahkan tautan lewati dasar untuk Anda. Ingatlah bahwa Genesis Accessible khusus untuk situs yang dibuat menggunakan Genesis Framework. Jika Anda tidak memiliki situs Genesis, gunakan Aksesibilitas WP.

Coding sendiri

Pilihan Anda yang lain adalah kode lewati tautan sendiri. Kode itu sendiri cukup sederhana dan hanya memerlukan beberapa pengetahuan dasar HTML dan CSS, tetapi Anda harus merasa nyaman dengan cara kerja tema dan template WordPress sebelum mencoba metode ini. Mulai saat ini, saya akan menganggap Anda tahu cara menemukan file yang dirujuk dan cara mengeditnya.

Kami akan mulai dengan menulis tautan lewati yang sebenarnya terlebih dahulu. Ini akan memungkinkan copy-and-paste yang mudah 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, kita akan menggunakan elemen <main> sebagai target kita. Karena kita tidak dapat menautkan langsung ke elemen tanpa ID, kita harus memastikan elemen <main> kita memilikinya. Elemen <main> Anda kemungkinan akan ditemukan di header.php , tetapi tidak selalu. Setelah Anda menemukan elemen, Anda harus memastikan elemen tersebut memiliki ID. Jika tidak, tambahkan satu seperti:

<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 melewatkan tautan karena mereka harus menjadi hal pertama yang harus diperhatikan :focus untuk pengguna keyboard dan pembaca layar.

Tepat setelah tag <body> , lewati HTML Anda yang sudah selesai. Berikut ini menunjukkan contoh yang lebih rinci dengan beberapa tautan lewati. 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 dalam 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 sepenuhnya, mengalahkan tujuan sepenuhnya. Penyembunyian dilakukan dengan menempatkan teks di luar 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 disembunyikan. Saat pengguna keyboard atau pembaca layar memuat halaman Anda di inisiasi :focus , tautan lewati Anda akan membiarkan mereka langsung beralih ke konten yang mereka tuju.

Membungkusnya

Lewati tautan adalah contoh sempurna dari fitur aksesibilitas yang tampak seperti banyak pekerjaan, tetapi sebenarnya tidak. Yang kami lakukan di sisi kode adalah menambahkan beberapa baris HTML dan CSS. Untuk pendekatan non-teknis, kami memasang 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 diwajibkan oleh hukum untuk memilikinya di situs Anda. Jangan menempatkan diri Anda dalam risiko; tambahkan tautan lewati Anda hari ini!