Jika Anda telah menyelesaikan pelajaran Apa itu aksesibilitas dan mengapa itu penting?, Anda tahu bahwa aksesibilitas digital adalah konsep yang luas; intinya adalah memastikan sebanyak mungkin orang dapat menggunakan web.
Selain aspek hukum dan bisnis, yang paling penting adalah bahwa mengikuti pedoman aksesibilitas membuat pengalaman menjelajah menjadi jauh lebih baik bagi semua orang.
Cara termudah untuk membuat tema, plugin, atau situs yang aksesibel adalah dengan memikirkannya sejak awal. Sertakan hal ini sejak tahap perencanaan dan tingkatkan kesadaran rekan kerja (serta klien) Anda tentang hal ini. Dengan demikian, Anda tidak hanya dapat menemukan kesalahan sejak awal, tetapi juga menghindari banyak kesalahan sejak awal.
Dalam pelajaran ini, Anda akan mempelajari dasar-dasar HTML yang aksesibel dan mengetahui cara menerapkannya pada tema WordPress Anda.
Dasar-dasar
HTML sama kuatnya dengan aksesibelnya.
Cobalah sendiri: buka editor kode Anda dan buat halaman HTML yang valid—ditandai dengan benar menggunakan landmark, judul, teks, tombol, tautan, formulir, dan sebagainya.
Anda dapat menggunakan kode di bawah ini jika mau.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Situs web saya</title>
</head>
<body>
<header>
<h1>Selamat datang di situs web saya</h1>
<nav>
<ul>
<li><a href="#home">Beranda</a>
<li><a href="#about">Tentang</a>
<li><a href="#services">Layanan</a>
<li><a href="#contact">Kontak</a></li>
</ul>
</nav>
</header>
<main>
<article id="home">
<h2>Beranda</h2>
<p>Ini adalah bagian beranda, tempat konten pengantar dapat ditemukan.</p>
<form name="Just a button">
<button type="button">Klik saya!</button>
</form>
</article>
<article id="about">
<h2>Tentang</h2>
<p>Bagian ini berisi informasi tentang situs web atau orang/perusahaan di baliknya.</p>
<p><a href="https://example.com">Lihat profil lengkap mereka</a></p>
</article>
<article id="services">
<h2>Layanan</h2>
<p>Detail tentang layanan yang disediakan dapat ditemukan di sini.</p>
</article>
<article id="contact">
<h2>Kontak</h2>
<form action="#" method="post" name="contact" autocomplete="on">
<fieldset>
<legend>Mari berbicara</legend>
<div><label for="name">Nama:</label></div>
<div><input type="text" id="name"></div>
<div><label for="email">Email:</label></div>
<div><input type="email" id="email"></div>
<div><label for="message">Pesan:</label></div>
<div><textarea id="message" rows="4" cols="50" spellcheck="true"></textarea></div>
<div><input type="submit" value="Kirim"></div>
</fieldset>
</form>
</article>
</main>
<footer>
<p>© 2024 Situs web saya</p>
</footer>
</body>
</html>
Sekarang uji kode tersebut menggunakan alat daring seperti Web Accessibility Checker dan pastikan tidak ada masalah aksesibilitas yang ditampilkan.
Masalah biasanya mulai muncul ketika Anda menambahkan gaya, skrip, atau aset media. Sebagai pengembang tema WordPress modern, pada dasarnya Anda akan bekerja dengan teknologi-teknologi ini—seperti blok berbasis React, pola yang dibuat dengan PHP, dan CSS yang dihasilkan dari theme.json.
Hal yang paling penting adalah tetap sadar akan aksesibilitas saat melakukan pengodean dan desain.
Mari kita lihat beberapa teknik dan praktik terbaik yang dapat diikuti oleh pengembang dan desainer saat membuat blok, templat, dan pola kustom.
HTML Semantik
Alih-alih membungkus semuanya dengan elemen <div>, gunakan elemen HTML yang semantik atau bermakna.
Hal ini akan menyelamatkan Anda dari kode yang tidak perlu rumit atau kerepotan seperti “menemukan kembali roda”.
Landmark
Landmark adalah cara untuk mendefinisikan struktur atau susunan halaman. Landmark membantu pembaca layar menavigasi konten dengan lebih mudah.
Sebagai contoh, alih-alih hanya menggunakan beberapa <div> dan kelasnya:
<div class="header">
<h1>Selamat datang di situs web saya</h1>
</div>
<div class="nav">
<ul>
<li><a href="#home">Beranda</a></li>
<li><a href="#about">Tentang</a></li>
<li><a href="#services">Layanan</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
</div>Anda dapat menggunakan landmark untuk bagian-bagian yang relevan.
<header>
<h1>Selamat datang di situs web saya</h1>
</header>
<nav>
<ul>
<li><a href="#home">Beranda</a></li>
<li><a href="#about">Tentang</a></li>
<li><a href="#services">Layanan</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
</nav>Jika Anda mendesain atau membuat tema melalui Site Editor, Anda juga dapat mengatur landmark di sana.
Untuk mendefinisikan blok Group, Row, dan Stack sebagai elemen pengelompokan konten, pilih blok tersebut, buka Settings , lalu perluas bagian Advanced .
Gulir ke bawah dan pilih header, main, section, article, aside, atau footer sebagai HTML ELEMENT, sesuai dengan fungsi dan posisi blok.
Judul
Saat menambahkan judul ke templat, selalu gunakan judul dalam urutan yang benar, mulai dari H2 dan berlanjut secara berurutan hingga H6.
Di Site Editor, klik Document Overview > Outline untuk memeriksa apakah ada level yang terlewat atau semuanya sudah benar.
Tombol versus Tautan
Saat mendesain tindakan pengguna, pertimbangkan hal-hal berikut terkait penggunaan tombol dan tautan:
- Jika Anda ingin pengguna menyelesaikan suatu tindakan, gunakan elemen button.
- Jika Anda ingin mereka menavigasi ke halaman lain, gunakan elemen anchor (<a>).
- Jika suatu tautan perlu terlihat seperti tombol, misalnya ajakan bertindak pada halaman arahan, beri gaya menggunakan CSS.
Formulir
Saat mendesain formulir di tema Anda, ikuti panduan berikut:
Selalu tempatkan formulir di dalam elemen form.
Selalu tetapkan type dan atribut yang sesuai pada kolom input. Misalnya, jika Anda mendefinisikan type input sebagai tel, papan angka akan ditampilkan pada perangkat seluler.
<input type="tel" name="phone" id="phone" required>Jangan hanya mengandalkan teks placeholder untuk menjelaskan kegunaan kolom input; selalu gunakan label yang aksesibel.
Gunakan elemen search untuk formulir pencarian apa pun.
Saat mendesain formulir login, Anda dapat menggunakan atribut autocomplete untuk membantu pengelola kata sandi mengisi formulir.
<input type="password" autocomplete="current-password">Secara default, sebagian besar browser menampilkan cincin fokus pada elemen yang sedang fokus.
Jika Anda ingin mengubah tampilan cincin fokus ini, gunakan pseudo-class :focus-visible, dan jangan hapus cincin fokus sepenuhnya.
Warna
Buat palet warna yang aksesibel dengan kontras yang memadai.
Saat mengedit templat, WordPress akan memperingatkan Anda jika menggunakan warna teks dan latar belakang yang tidak memberikan kontras yang memadai.
Jangan menyampaikan informasi hanya melalui warna. Misalnya, jangan menandai tautan hanya dengan warna; tentukan juga status fokusnya dengan cara yang sama. Jika ragu, lihat gaya tautan dan fokus HTML default, lalu ikuti gaya tersebut.
Tipografi
Saat mengatur ukuran font, gunakan unit relatif seperti rem dan hindari penggunaan px.
Batasi lebar konten antara 50 hingga 70 karakter; untuk ini, unit character atau ch sangat cocok.
Gunakan spasi baris yang memadai sesuai dengan ukuran font.
Utamakan preferensi pengguna
Dasar utama desain responsif adalah media queries, yang membantu meningkatkan pengalaman pengguna.
Beberapa media query seperti prefers-color-scheme atau prefers-reduced-motion berkaitan langsung dengan aksesibilitas, sementara query seperti pointer, hover, atau scripting dapat digunakan untuk menyesuaikan perilaku komponen sesuai perangkat.
Solusi Alternatif ARIA
ARIA adalah singkatan dari Accessible Rich Internet Applications framework, dan sering disebut sebagai cara cepat untuk membuat konten HTML lebih aksesibel bagi pembaca layar.
Namun, aturan terpenting dalam menggunakan ARIA adalah menggunakannya hanya jika benar-benar diperlukan. Idealnya, Anda harus selalu menggunakan fitur bawaan HTML untuk membantu pembaca layar memahami makna konten.
Atribut ARIA yang digunakan secara keliru mengurangi aksesibilitas, jadi hindari atribut tersebut kecuali Anda tidak memiliki kendali atas HTML atau perlu menangani konten dinamis.
Untuk informasi selengkapnya, lihat WAI-ARIA basics di MDN.
Kesimpulan dan bacaan lebih lanjut
Aksesibilitas adalah proses yang berkelanjutan. Peningkatan kecil saja dapat membuat perbedaan besar bagi pengunjung situs Anda, dan tidak memiliki dampak negatif. Hal ini tidak akan pernah memperburuk pengalaman pengguna.
Untuk mempelajari lebih lanjut, lihat Tutorial W3C Web Accessibility Initiative (WAI).