Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Accessibility
Webdesign

Tips Kebolehcapaian Untuk Pemaju Tema WordPress

by
Length:MediumLanguages:

Malay (Melayu) translation by Aisyah Arrafah (you can also view the original English article)

Dalam artikel sebelumnya kita bercakap tentang mengapa masalah kebolehaksesan, dari segi perniagaan, SEO, kegunaan, dan juga undang-undang. Dalam artikel ini saya akan menerangkan cara membuat tema WordPress yang boleh diakses, walaupun idea yang sama berlaku pada platform apa pun.

Tinjauan Reka Bentuk Web Kebolehaksesan dan Inklusif

Tidak ada cara untuk menutup semua amalan terbaik yang mungkin dalam artikel ini, tetapi asasnya tetap berlaku untuk setiap laman web. Saya akan menggunakan beberapa sumber sebagai tulang belakang artikel ini:

Kami akan membincangkan tip berikut:

  1. Gunakan Semantik HTML
  2. Struktur Dengan Elemen Seksyen HTML5
  3. Jadikan Hierarki Headings Clear
  4. Navigasi Laman Menggunakan Teknologi Pembantu
  5. Pertimbangkan Navigasi Papan Kekunci dan Gaya Fokus
  6. Semak Kontras Warna
  7. Ingat Langkau Pautan
  8. Elakkan Teks Paut Berulang

1. Gunakan HTML Semantik

Saya tidak dapat menekankan cukup pentingnya semantik HTML: ia adalah asas laman web anda yang boleh diakses. Léonie Watson menerangkan dengan sempurna apa arti semantik dalam artikelnya semantik pemahaman:

''Oleh itu, semantik HTML adalah penting dalam dua cara: Kami mendapat pemahaman yang konsisten tentang struktur kandungan dan kelakuan asli, dan kami mendapat pemahaman yang sama mengenai makna dan tujuan kandungan. Perkara terbaik dari semua, ialah kita mendapatkan perkara-perkara ini secara percuma apabila kita menggunakan HTML seperti yang dimaksudkan.''

Apabila kita menulis elemen HTML, kita bukan sahaja perlu memikirkan bagaimana ia direka, atau bagaimana rupanya. Kita juga harus memikirkan bagaimana mereka bekerja ...

  • ... dengan papan kekunci.
  • ... apabila diklik atau di tab.
  • ..dengan API aksesibiliti dan teknologi bantuan (AT) seperti
    - pembaca skrin
    - perisian pembesaran skrin
    - perisian pengecaman pertuturan
    - petunjuk kepala
  • ... dengan semua pelayar dan peranti yang berbeza.

Salah satu contoh yang biasa ialah penggunaan <a> ,<button> , dan <div>. Kami akan menggunakannya untuk menggambarkan maksud saya.

Kapan Menggunaka <a>

Gunakan <a> (teg anchor) apabila anda membuat pautan ke halaman lain, fail, e-mel, atau penanda pada halaman yang sama.

  • Contoh yang baik: <a href="https://developer.mozilla.org/">Mozilla</a>
  • Good example: <a href="#back-to-top">Back to top</a>.
  • Bad example: <a href="#"class="menu-tpggle-button">Menu</a>. Ini seharusnya menjadi <button>.

Nota: di belakang tabir API aksesibiliti memberikan maklumat kepada teknologi bantuan tentang nama, peranan dan keadaan setiap elemen.

Berikut adalah contoh pautan, Membina Web Inklusif: Mengapa Perkara Kebolehaksesan, dengan bagaimana Penampil Kebolehaksesan melihatnya:

Accessibility Viewer displays link name role state and other information
Penonton Aksesibiliti memaparkan nama link, peranan, negeri dan maklumat lain

Dalam praktiknya ini bermakna pembaca skrin dan AT lain mengiktiraf jangkar dan boleh mengumumkan peranan dan nama elemen tersebut. Sebagai contoh: "Pautan, Membina Web yang Inklusif: Mengapa Perkara Kebolehaksesan".

Mereka juga boleh menavigasi laman dengan hanya menggunakan pautan:

List of page links in the Voiceover
Senarai pautan halaman dalam Voiceover

Kapan Gunakan <button>

Gunakan <button> apabila anda perlu mencetuskan tindakan, seperti membuka menu. Video ini dari Rob Dodson menerangkan mengapa keadaan ini disebut <button> memerlukan <div> bukan.

Untuk jumlah itu, elemen <button> mempunyai semua faedah berikut yang dibina dalam sudah:

  • Fokus keyboard asli.
  • Butang peranan asli, yang membantu pengguna AT memahami ia adalah unsur interaktif.
  • Ia boleh dicetuskan dengan Enter atau Ruang tanpa menambahkan sebarang JavaScript tambahan.
  • Ia boleh menggunakan atribut kurang upaya, kerana apabila butang itu tidak lagi bersifat interaktif.

Petua: Di Chrome 64 terdapat anak tetingkap Kebolehcapaian yang menunjukkan kedudukan elemen terpilih dalam pokok aksesibiliti, serta sifat ARIA dan sifat yang dikira.

Accessibility pane in Chrome showing button element information
Palang aksesibiliti dalam Chrome menampilkan maklumat unsur butang

Bila Menggunakan <div>

 Gunakan <div> apabila anda memerlukan elemen untuk tujuan penggayaan. Sememangnya, periksa terlebih dahulu jika terdapat unsur-unsur HTML asli yang akan menjadi lebih baik. Sebagai contoh <article>, <nav>, <p>, <blockquote>, <figure>, <table>, or <ul>.

Baca lebih lanjut mengenai Pautan, Butang, Submits, dan Divs oleh Adrian Roselli.

Dalam bahagian seterusnya, kami akan melihat elemen seksyen HTML5 dan rupa markup semantik.

2. Struktur Dengan Elemen Seksyen HTML5

Ramai elemen HTML5 mentakrifkan peranan mercu ARIA secara lalai. Ini mengenal pasti bahagian halaman dan membantu pengguna AT menavigasi ke masing-masing. Oleh sebab itu, semua kandungan harus berada di dalam elemen semantik yang bermakna agar tidak dilewatkan oleh pengguna.

Ini adalah elemen mercu tanda yang paling biasa:

Elemen HTML5
Peranan penting lalai
 <header>
sepanduk
<nav>
navigation
<main>
main
<aside>
pelengkap
<footer>
ContentInfo

Nota: pelayar lama dan kombinasi AT tidak semestinya mengenali elemen HTML5 dan memetakannya ke peranan mercu tanda yang betul. Dalam kes ini, anda boleh menambah peranan secara manual seperti ini: <header role="banner">

Untuk maklumat lanjut lihat markup contoh pada halaman buku panduan WordPress mengenai mercu tanda ARIA dan halaman contoh landmark ARIA.

3. Buat Hierarki Headings Clear

Pernahkah anda membaca artikel yang panjang tanpa tajuk? Adakah anda merasa sukar untuk membaca? Saya pasti ada. Tajuk membantu pengguna dengan cepat mengimbas dan memahami kandungan halaman. Pada tajuk masa yang sama memberikan pengguna AT satu cara untuk menavigasi kandungan dan menentukan struktur halaman.

Pendekatan berbeza, tetapi cadangan saya adalah sama seperti yang digariskan dalam struktur tajuk dalam pembangunan tema:

  • Gunakan hanya satu H1 unik setiap halaman. Untuk kebanyakan tema ini akan menjadi tajuk pos, halaman, atau arkib.
  • Gunakan H2 melalui H6 untuk membahagi bahagian halaman, seperti kawasan widget.
  • Jangan lepasan tahap tajuk kerana ini boleh mengelirukan apabila menavigasi kandungan menggunakan tajuk. Ini bermakna selepas H2 datang H3, bukan H4.

Nota: pengguna boleh memecahkan hierarki tajuk apabila memasuki kandungan mereka sendiri dengan menggunakan H1 atau melangkau peringkat tajuk. Nasihatkan mereka dengan menunjuk kepada dokumentasi kami tentang cara menggunakan tajuk dalam kandungan.

Saya menggunakan alat ini untuk memeriksa struktur tajuk:

4. Navigasi Laman Menggunakan Teknologi Pembantu

Setakat ini kami telah menyebut beberapa cara untuk menavigasi halaman: menggunakan pautan, tajuk, atau mercu tanda. Dan perkara yang sama berlaku untuk elemen HTML semantik yang lain seperti senarai, jadual, atau imej.

Pengguna teknologi penolong juga boleh menavigasi menggunakan unsur-unsur ini. Berikut adalah video pendek yang menunjukkan penggunaan pembaca skrin suara Voiceover, sesuatu yang pasti anda mesti menguji tema anda dengan:

Baca lebih lanjut mengenai menggunakan Voiceover atau semak artikel serupa menggunakan NVDA.

5. Pertimbangkan Navigasi Papan Kekunci dan Gaya Fokus

Peraturan nombor satu: jangan keluarkan gaya garis besar dengan menggunakan: fokus {outline: none; }!

Terdapat banyak pengguna yang bergantung kepada papan kekunci dan tidak boleh menggunakan tetikus. Bagi pengguna keyboard, penting untuk mempunyai gaya tumpuan visual pada semua unsur interaktif: pautan, medan borang, butang dan sebagainya. Dengan kata lain, pengguna mesti dapat melihat elemen interaktif yang mempunyai tumpuan keyboard semasa menavigasi melalui halaman. Kawalan papan kekunci yang biasa untuk menavigasi ialah Tab, Shift + Tab, Enter, Space, dan kekunci anak panah.

Nota: gaya fokus penyemak imbas lalai tidak selalu menjadi penyelesaian yang paling mudah diakses-gaya garis besar tersendiri kadang-kadang lebih baik.

Juga ambil perhatian: Kadangkala gaya garis besar bukanlah pendekatan reka bentuk yang terbaik kerana garis besar tidak menghormati jejari sempadan elemen. Salah satu penyelesaian adalah menggunakan kotak bayang-bayang sebaliknya, tetapi ... gaya fokus harus berfungsi dalam semua senario, seperti dalam mod Kontras Tinggi Windows yang menghilangkan gaya kotak-bayangan.

Inilah helah yang baik yang menggunakan garis besar telus untuk mod Kontras Tinggi Windows.

Anda boleh membaca maklumat lanjut mengenai ini dari tiket Gutenberg PR 5138 dan Trac 41286.

Di sisi lain navigasi papan kekunci bukan hanya mengenai gaya fokus. Semua tindakan mesti dilakukan dengan keyboard juga.

Satu contoh biasa adalah apabila pengguna tidak dapat menavigasi ke item menu sub dengan menggunakan kekunci tab atau dengan menggunakan kekunci anak panah. Menyatukan tema pemula mempunyai penyelesaian JavaScript untuk ini: setiap kali pautan menu difokuskan atau kabur, mereka menetapkan atau mengalih keluar kelas .fokus pada pautan menu. Lihat fungsi toggleFocus.

Satu lagi contoh adalah apabila navigasi berfungsi sama seperti dialog modal, seperti navigasi skrin penuh. Dalam kes ini, penting untuk menetapkan fokus dengan betul.

6. Semak Kontras Warna

Saya masih melihat banyak reka bentuk dengan kontras warna rendah. Ini boleh menjadikan mustahil bagi pengguna buta warna, pengguna dengan penglihatan yang kurang baik, atau pengguna menggunakan monitor berkualiti rendah untuk membaca kandungan.

Sebaliknya di antara latar belakang dan warna latar depan harus mempunyai nisbah kontras

Terdapat banyak alat untuk menyemak kontras warna, seperti pemeriksa nisbah kontras.

Anda akan menemui lebih banyak maklumat dalam artikel seperti ini yang menggunakan warna dan kontras warna sebagai keperluan untuk tema siap diakses.

7. Ingatlah Pautan Langkau

Pautan ''melangkau ke kandungan'' membolehkan cara melompat melepasi semua unsur tambahan sebelum kandungan utama, dan menuju ke kandungan. Anda mungkin tertanya-tanya mengapa mercu tanda <main>tidak mencukupi sejak pengguna AT boleh menavigasi ke kandungan utama menggunakan mercu tanda? Malah, kumpulan sasaran utama skip pautan adalah pengguna papan kekunci, yang mungkin tidak menggunakan sebarang peranti AT. Jadi mereka tidak mempunyai jalan pintas ke <main> atau kawasan mercu tanda yang lain.

Dalam sebarang kes, pengguna AT masih menggunakan pautan lompat menurut tinjauan tinjauan skrin ini:

''Penting untuk diperhatikan bahawa walaupun penggunaan telah menurun di kalangan pengguna pembaca skrin, pautan'' melangkau ''masih memberikan faedah yang ketara untuk pengguna papan kekunci yang lain.''

Baca lebih lanjut mengenai cara menggunakan pautan skip dalam buku panduan.

8. Elakkan Teks Paut Berulang

Cuba untuk mengelakkan teks pautan berulang seperti ''Baca lebih lanjut'' atau ''Ketahui lebih lanjut''. Untuk pengguna pembaca skrin yang mengemudi menggunakan pautan, hasilnya boleh kelihatan seperti ini:

List of read more links doesnt help navigating
Senarai membaca lebih banyak pautan tidak membantu menavigasi

Tema Twenty Seventeen mempunyai contoh yang baik tentang cara menambah tajuk pos dalam petikan:

Untuk pembaca skrin, teks pautan akan dibaca sebagai ''Teruskan membaca tajuk pos''. Berikut adalah contoh yang serupa untuk kandungan:

Teks pembaca skrin kelas menyembunyikan tajuk pos secara visual tetapi pengguna pembaca skrin masih boleh mengakses teks tersebut. Semak contoh kod terkini teks pembaca skrin dalam buku panduan.

conclusion

Kami hanya menyentuh permukaan akses dalam tema WordPress, tetapi semoga ini akan membawa anda bermula. Semantik HTML dan penggunaan bijak CSS berjalan jauh.

Ingat untuk memeriksa semua garis panduan aksesibiliti untuk tema dan baca lebih banyak petua dalam buku panduan kebolehaksesan.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.