Hai, Habr. Saya membawa perhatian Anda pada sebuah terjemahan dari artikel “Panduan Hitchhiker untuk Aksesibilitas: Skiplinks dan Landmarks” oleh Attila Vágó tentang sepasang alat UI yang tak tergantikan dan fitur-fiturnya.
Tautan untuk melompati navigasi (selanjutnya disebut tautan ) adalah pahlawan tanpa tanda jasa dari setiap situs web dan aplikasi web yang dapat menghargai diri sendiri. Penolong UX yang tidak mencolok tetapi sangat berguna dan para genius UI yang tidak dikenal, skiplinks sebagai sebuah konsep bukanlah hal baru, mereka telah digunakan dengan penuh syukur oleh komunitas penyandang cacat selama beberapa dekade. Jika Anda mendengar ungkapan "hal-hal kecil menentukan segalanya", maka ungkapan ini hanya tentang loncatan .
Bertentangan dengan kepercayaan yang populer, komputer sebelumnya tidak digunakan bersama dengan mouse. Selama bertahun-tahun, tikus itu hanya tikus, tikus berbulu, di mana pun ia tinggal - di loteng Anda, dalam imajinasi Walt Disney atau di jalanan Dublin. Keyboard adalah prioritas bagi sebagian besar pengguna, yang membuat saya berpikir tentang pentingnya navigasi dengan keyboard.
Navigasi keyboard mudah diterapkan dan digunakan. Tombol utama adalah: tab, panah atas-bawah-kiri-kanan, spasi dan masuk. Hanya menulis sebuah halaman dalam HTML semantik yang benar akan mengarahkan Anda ke navigasi keyboard sepenuhnya di aplikasi web, dan itu hebat. Yang tidak terlalu menggembirakan adalah kenyataan bahwa aplikasi web modern jauh lebih dari sekadar HTML sederhana, dan mereka memiliki navigasi yang rumit. Sistem desain seperti itu mengarah ke masalah yang agak serius dan menjengkelkan bagi pengguna keyboard: elemen berulang dan konten.
Alasan utama untuk ini adalah navigasi dalam aplikasi. Setiap kali pengguna menavigasi ke halaman baru, navigasi yang sama muncul lagi dan lagi, dan pengguna harus menggulir halaman untuk menemukan konten yang menarik baginya. Di situs BBC , misalnya, ada sebanyak 28 titik di navigasi utama:
Anda segera melihat bahwa ini adalah situs berita utama, karena memiliki 28 item menu!
Sekarang bayangkan seorang wanita tua dengan penyakit Parkinson hampir tahu cara menggunakan keyboard (tidak ada pertanyaan tentang mouse) untuk beralih melalui masing-masing 28 elemen ketika dia pergi ke artikel berita lain. Itu melelahkannya secara moral dan fisik! Tapi kami tidak akan membiarkan nenek miskin harus melalui rasa sakit ini? Melihat bagaimana dia bertarung akan memilukan. Seorang profesional dan pengembang UX yang baik mengetahui hal ini, jadi ia mengimplementasikan apa yang oleh industri disebut tautan . BBC melakukan hal itu. Seperti New York Times dan NBC. Silangkan jari Anda sehingga RTE mengikutinya ...
Apa yang kita lewatkan?!?
Aspek lompatan yang bagus adalah mereka meningkatkan kehidupan semua orang yang sering menggunakan papan ketik atau layar braille. Ambil, misalnya, bendera Amerika dalam format web (di attilavago.imtqy.com/fun-with-flags/usa ). Saya dapat dengan cepat melompat ke bagian yang paling relevan dari halaman ini untuk saya, terlepas dari apakah saya menggunakan keyboard atau tampilan braille. Bayangkan Anda harus melewati 50 bintang bendera setiap saat! Tidak peduli bagaimana kamu mencintai Paman Sam, kamu akan menjadi gila.
Dengan kata sederhana, skiplink tersembunyi dan sederhana, tetapi efektif, dengan bantuan mereka orang-orang cenderung masuk ke UI terbaik.
Dalam hal pengkodean, tingkat kesulitan mereka terletak di antara mengikat sepatu setelah dua belas pub saat Natal dan menemukan kamar mandi dalam kegelapan. Ini sebenarnya adalah template sederhana. Jika Anda telah menerapkannya beberapa kali, maka di masa depan Anda tidak akan salah. Pertama kali saya melihat mereka di UI, saya mengharapkan puluhan string JavaScript yang membingungkan, dan saya akan memberi tahu Anda bahwa itu tidak benar. HTML Anda akan terlihat seperti ini:
<ul class="skip"> <li><a href="#stars">skip to Stars</a></li> <li><a href="#shortStripes">skip to Short Stripes</a></li> <li><a href="#longStripes">skip to Long Stripes</a></li> </ul>
Sementara CSS Anda akan menjadi seperti ini:
.skip { position: absolute; top: 0; left: 0; width: 100%; } .skip a { position: absolute; left: -9999px; background: #b22234; color: white; text-decoration: none; font-weight: 600; width: fit-content; } .skip a:focus { display: block; position: static; left: 0; padding: .25em 1em; }
Ini hasilnya. Tentunya, jika Anda ingin berlatih, Anda harus memanfaatkan ini. Beralih ke konten favorit Anda.
Ilustrasi tautan untuk melewati navigasi menggunakan Screengrab di attilavago.imtqy.com/fun-with-flags/usa
Lalu bagaimana dengan bagian-bagiannya?
Bagian adalah semacam web UI anak-anak. Tidak ada yang benar-benar berbicara tentang mereka, mereka tidak menonjol dengan cara apa pun, tetapi semua orang mengharapkan mereka berada di tempat mereka dan melakukan pekerjaan kotor mereka, tidak mengharapkan imbalan apa pun sebagai balasannya. Tidak pernah!
Anda mungkin ingat bahwa di awal artikel ini saya menyebutkan HTML semantik. Percaya atau tidak, tapi hanya itu. Bagian dirancang dengan mudah jika arsitektur UI Anda dipikirkan secara semantik. Berikut ini beberapa contoh bagus:
<header> <main> <nav> <aside> <section> <article> <footer>
Dan contoh yang lebih visual dengan beberapa atribut ARIA yang diberikan di sini:
Contoh BagianPenting untuk memahami bahwa banyak elemen bagian dalam HTML5, misalnya, utama, nav, samping, mendefinisikan bagian ARIA secara default. Jika elemen pemisah HTML5 digunakan tanpa memahami struktur tanda yang sesuai, orang yang menggunakan teknologi bantuan lebih cenderung bingung dan terbatas dalam mengakses konten dan berinteraksi dengan halaman web. Untuk menghindari kebingungan dalam pengembangan dan pengalaman pengguna, lihat buku putih ini pada bagian. Intinya adalah bahwa Anda perlu menjaga kode semantik Anda bersih, dan semuanya itu sendiri akan jatuh ke tempatnya.
Satu detail penting yang perlu diingat adalah bahwa bagian dari halaman web tidak menggantikan skiplinks . Tentu saja, tampilan braille akan memberikan mekanisme pengguna untuk menavigasi dan menavigasi antara bagian halaman, tetapi mekanisme yang sama tidak tersedia untuk pengguna keyboard.
Saya harap Anda sekarang memahami perbedaan utama antara tautan dan bagian, serta metode untuk penerapannya. Skiplink sangat bagus untuk navigasi keyboard dan tampilan Braille, sementara bagian hanya cocok untuk tampilan Braille, tetapi tidak ada yang menggantikan yang lain. Penerapan salah satunya sederhana, oleh karena itu, jika Anda ingin benar-benar mengatasi ketersediaan situs web atau aplikasi Anda, Anda perlu memastikan bahwa Anda dapat mengatasi keduanya. Tidak sesulit itu, kan?