Tiga Wawasan yang Saya Dapatkan Saat Meneliti Aksesibilitas Vue.js

Kerangka kerja JavaScript seperti React, Angular dan Vue memiliki reputasi yang sangat buruk dalam hal aksesibilitas web. Tetapi apakah ini karena keterbatasan teknis yang melekat atau masalah yang tidak dapat diatasi dari alat-alat itu? Saya pikir tidak. Selama fase penelitian buku saya, “ Vue yang Dapat Diakses ,” saya memperoleh tiga wawasan tentang aksesibilitas aplikasi web secara umum dan kerangka kerja pada khususnya. Mempertimbangkan ini, mungkin ada baiknya mengambil perspektif lain seputar aplikasi Vue yang dapat diakses.

Wawasan 1: Fitur Kerangka JavaScript Untuk Aksesibilitas Kurang Digunakan

Desain berbasis komponen, diaktifkan dan ditegakkan oleh kerangka kerja JavaScript modern, tidak hanya memberikan pengalaman pengembang yang hebat dan ergonomi proyek saat digunakan dengan cara yang cerdas, tetapi juga dapat menawarkan keuntungan untuk aksesibilitas. Yang pertama adalah faktor reusability , yaitu ketika komponen Anda digunakan di beberapa tempat dalam aplikasi Anda (mungkin dalam bentuk atau bentuk yang berbeda) dan itu hanya harus dapat diakses hanya sekali. Dalam hal ini, peningkatan pengalaman pengembang sebenarnya membantu pengguna dan "memasukkan aksesibilitas ke dalam komponen" ( seperti yang dikatakan oleh Hidde de Vries) menciptakan skenario menang-menang untuk semua orang.

Aspek kedua yang hadir dengan desain berbasis komponen adalah props — yaitu dalam bentuk bahwa satu komponen dapat mewarisi atau mendapatkan konteks dari lingkungan induknya. Penerusan "data lingkungan" ini juga dapat melayani aksesibilitas.

Ambil headline, misalnya. Struktur judul yang solid dan dapat dipahami tidak hanya baik untuk SEO tetapi terutama untuk orang yang menggunakan pembaca layar. Saat mereka menemukan kerangka dokumen suara, yang dibuat dengan tajuk utama yang menyusun halaman web atau aplikasi, pengguna pembaca layar mendapatkan ikhtisar singkat tentang halaman web yang mereka buka. Sama seperti pengguna dengan kemampuan visual tidak membaca setiap kata pada halaman tetapi memindai hal-hal menarik, pengguna pembaca layar buta tidak membuat perangkat lunak mereka membaca setiap kata . Sebaliknya, mereka memeriksa dokumen untuk konten dan fungsionalitas yang mereka minati. Judul, dalam hal ini, menyimpan potongan konten bersama-sama dan pada saat yang sama menyediakan kerangka struktural dokumen ( pikirkan rumah kerangka kayu ).

Apa yang membuat headline menyediakan struktur bukan hanya keberadaannya semata. Itu juga sarang mereka yang menciptakan gambar di dalam pikiran pengguna. Untuk itu, kotak alat utama pengembang web berisi enam level ( <h1> hingga <h6> ). Dengan menerapkan level ini, editor dan pengembang dapat membuat garis besar konten dan fungsionalitas andal yang dapat diharapkan pengguna dalam dokumen.

Misalnya, mari kita ambil pohon judul (ringkasan) dari situs web GOV.UK :

 1 — Welcome to GOV.UK 2 — Popular on GOV.UK 2 — Services and information 3 — Benefits 3 — Births, deaths, marriages and care 3 — Business and self-employment // …etc 2 — Departments and policy 3 — Coronavirus (COVID 19) 3 — Travel abroad: step by step …etc

Bahkan tanpa mengunjungi halaman sebenarnya dan tanpa benar-benar memahaminya secara visual, pohon judul ini membuat daftar isi yang membantu Anda memahami bagian apa yang dapat diharapkan di halaman depan. Pembuat konten menggunakan elemen judul untuk menyampaikan data yang mengikutinya dan tidak melewatkan tingkat judul.

Sejauh ini, begitu akrab (setidaknya dalam korelasi dengan mesin pencari, saya kira). Namun, karena komponen dapat digunakan di berbagai tempat di aplikasi Anda, level judul bawaan di dalamnya terkadang dapat membuat pohon judul suboptimal secara keseluruhan. Hubungan antar headline mungkin tidak tersampaikan sejelas pada contoh di atas (“Bisnis dan wirausaha” tidak berdiri sendiri tetapi terkait dengan “Layanan dan informasi”).

Misalnya, bayangkan daftar produk terbaru toko yang dapat ditempatkan di konten utama dan bilah sisi — sangat mungkin kedua bagian tersebut hidup dalam konteks yang berbeda. Judul seperti <h1>Our latest arrivals</h1> akan masuk akal di atas daftar produk dalam konten utama — mengingat itu adalah konten utama dari keseluruhan dokumen atau tampilan.

Komponen yang sama menggunakan <h1> tetapi ditempatkan di sidebar dokumen lain, bagaimanapun, akan menyarankan konten yang paling penting tinggal di sidebar dan bersaing dengan <h1> di konten utama. Sementara apa yang saya jelaskan di atas adalah kekhasan desain berbasis komponen secara umum, ini memberi kita kesempatan sempurna untuk menyatukan kedua aspek — kebutuhan akan pohon judul yang baik dan pengetahuan kita tentang alat peraga:

Konteks Melalui props

Mari kita maju dari pertimbangan teoretis menjadi kode langsung. Di blok kode berikut, Anda melihat komponen yang mencantumkan masalah terbaru di toko online. Ini sangat disederhanakan tetapi penekanannya ada pada baris 3, kode keras <h1> :

 <template> <div> <h1>Our latest arrivals</h1> <ol> <li>Product A</li> <li>Product B</li> <!-- etc --> </ol> </div> </template>

Untuk menggunakan komponen ini di berbagai tempat aplikasi tanpa mengorbankan pohon judul dokumen, kami ingin membuat tingkat judul dinamis. Untuk mencapai ini, kami mengganti <h1> dengan pembantu nama komponen dinamis Vue yang disebut, well, component :

 <component :is="headlineElement">Our latest arrivals</component>

Di bagian skrip komponen kita, sekarang kita harus menambahkan dua hal:

  • Sebuah prop komponen yang menerima tingkat headline yang tepat sebagai string, headlineLevel ;
  • Properti yang dihitung ( headlineElement dari contoh kode di atas) yang membangun elemen HTML yang tepat dari string h dan nilai headlineLevel .

Jadi blok skrip kami yang disederhanakan terlihat seperti ini:

 <script> export default { props: { headlineLevel: { type: String }, computed: { headlineElement() { return "h" + this.headlineLevel; } } } </script>

Dan itu saja!

Tentu saja, menambahkan tanda centang dan default yang masuk akal pada tingkat prop diperlukan — misalnya, kita harus memastikan bahwa headlineLevel hanya dapat berupa angka antara 1 dan 6. Validasi Prop asli Vue, serta TypeScript, adalah alat di Anda pembuangan untuk melakukan hal itu, tetapi saya ingin menjauhkannya dari contoh ini.

Jika Anda tertarik untuk mempelajari cara mencapai konsep yang sama persis menggunakan React, teman majalah pertunjukan Heydon Pickering menulis tentang topik tersebut pada tahun 2018 dan memberikan kode sampel React/JSX. Heading Components Tenon UI, juga ditulis untuk React, mengambil konsep ini lebih jauh dan bertujuan untuk mengotomatisasi pembuatan level headline dengan menggunakan apa yang disebut “LevelBoundaries” dan elemen <Heading> Lihat !

Wawasan 2: Ada Strategi yang Sudah Ditetapkan untuk Mengatasi Masalah Aksesibilitas Aplikasi Web

Meskipun aksesibilitas aplikasi web mungkin terlihat menakutkan saat pertama kali Anda menemukan topik tersebut, Anda tidak perlu putus asa: pola aksesibilitas pribadi untuk menangani karakteristik aplikasi web biasa memang ada. Dalam Insight berikut, saya akan memperkenalkan Anda pada strategi untuk menyediakan notifikasi yang dapat diakses , termasuk implementasi yang mudah di Vue.js ( Strategi 1 ), lalu mengarahkan Anda ke pola yang direkomendasikan dan rekan Vue mereka ( Strategi 2 ). Terakhir, saya sarankan untuk melihat komunitas aksesibilitas Vue yang baru muncul (Strategi 3 ) dan React ( Strategi 4 ).

Strategi 1: Mengumumkan Pembaruan Dinamis Dengan Wilayah Langsung

Meskipun aksesibilitas lebih dari sekadar membuat hal-hal yang kompatibel dengan pembaca layar, meningkatkan pengalaman pembaca layar memainkan peran besar dalam aksesibilitas aplikasi web. Ini berakar pada prinsip kerja umum bentuk teknologi bantu ini: perangkat lunak pembaca layar mengubah konten di layar menjadi keluaran audio atau braille , sehingga memungkinkan orang buta untuk berinteraksi dengan web dan teknologi secara umum.

Seperti fokus keyboard, titik keluaran pembaca layar, yang disebut kursor virtual , hanya dapat berada di satu tempat sekaligus. Pada saat yang sama, satu aspek inti dari aplikasi web adalah perubahan dinamis di bagian dokumen tanpa memuat ulang halaman. Tetapi apa yang terjadi, misalnya, ketika pembaruan di DOM sebenarnya berada di atas posisi kursor virtual dalam dokumen? Pengguna kemungkinan tidak akan melihat perubahan karena cenderung tidak menelusuri dokumen secara terbalik — kecuali jika mereka diberi tahu tentang pembaruan dinamis.

Dalam video singkat berikut, saya mendemonstrasikan apa yang terjadi (atau lebih tepatnya, apa yang tidak terjadi) jika interaksi menyebabkan perubahan DOM dinamis di dekat kursor virtual — pembaca layar hanya diam:

Dalam hal ini, Anda perlu membuat setidaknya dua referensi: Satu untuk tombol pemicu yang membuka navigasi (sebut saja navTrigger ), dan satu untuk elemen yang mendapatkan fokus segera setelah navigasi terlihat ( navContainer dalam contoh ini, elemen yang membutuhkan tabindex="-1" agar dapat fokus secara terprogram). Sehingga, ketika tombol pemicu diklik, fokus akan dikirim ke navigasi itu sendiri. Dan sebaliknya: Segera setelah navigasi ditutup, fokus harus kembali ke pemicu.

Setelah membaca paragraf di atas, saya harap satu hal menjadi jelas bagi Anda, pembaca yang budiman: Setelah Anda memahami pentingnya manajemen fokus, Anda menyadari bahwa semua alat yang diperlukan ada di ujung jari Anda — yaitu this.$refs Vue dan native JavaScript .focus()

Kesimpulan

Dengan menyoroti beberapa temuan inti saya mengenai aksesibilitas aplikasi web, saya harap saya dapat membantu mengurangi ketakutan yang menyebar tentang topik ini yang mungkin ada, dan Anda sekarang merasa lebih percaya diri untuk membangun aplikasi yang dapat diakses dengan bantuan Vue.js (jika Anda ingin menyelami topik lebih dalam, lihat apakah ebook kecil saya "Vue yang Dapat Diakses" dapat membantu Anda sepanjang perjalanan).

Semakin banyak situs web menjadi semakin mirip dengan aplikasi, dan akan menyedihkan jika produk digital yang menakjubkan ini tetap sarat hambatan hanya karena pengembang web tidak tahu persis di mana harus memulai dengan topik tersebut. Ini adalah momen yang benar -benar memungkinkan setelah Anda menyadari bahwa sebagian besar aksesibilitas aplikasi web sebenarnya adalah aksesibilitas web "lama yang baik", dan sisanya, cowpath sudah diaspal.

July 16, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *