Menulis JavaScript dengan kebolehcapaian dalam fikiran

petua untuk meningkatkan kebolehcapaian komponen JavaScript

Artikel ini akan berkongsi beberapa petua tentang bagaimana untuk meningkatkan kebolehcapaian komponen JavaScript dan menyediakan pengguna dengan cara yang lebih baik dan lebih baik untuk berinteraksi dengan laman web atau aplikasi web.

Artikel ini pada asalnya diterbitkan pada Medium

Dalam artikel pertama saya, menulis HTML yang boleh diakses, saya menjelaskan mengapa dan bagaimana untuk mula memberi tumpuan kepada kebolehcapaian web dan berkongsi beberapa petua tentang bagaimana untuk meningkatkan penandaan untuk menjadikan laman web lebih mudah diakses. Beberapa petua ini sangat asas, tetapi masih berharga. Semuanya datang kepada dua peraturan yang paling tidak tertulis dalam pembangunan front-end: belajar asas-asas dan menghabiskan cukup masa merancang dan menulis HTML. Markup semantik yang jelas akan memberi manfaat kepada anda dan pengguna anda.

bernasib baik, HTML bukanlah satu -satunya bahasa yang kita buat laman web, tetapi bahasa yang lebih kompleks, semakin besar kemungkinannya membuat kesilapan, dan JavaScript dapat menjadi sangat kompleks. Apabila kita memberi tumpuan kepada sama ada kod berfungsi, mudah untuk melupakan pengguna yang menggunakan peranti input selain daripada tetikus atau pad sentuh, seperti papan kekunci atau pengguna pembaca skrin. Dalam kedua artikel ini mengenai kebolehcapaian web, saya telah mengumpulkan beberapa petua mengenai apa yang perlu dipertimbangkan ketika menulis JavaScript dan bagaimana membuat komponen JavaScript lebih mudah diakses.

mata utama

JavaScript boleh digunakan untuk meningkatkan kebolehcapaian laman web, dan bukannya menghalangnya. Ia boleh membolehkan khalayak yang lebih luas untuk mengakses kandungan, termasuk yang menggunakan pelayar yang lebih tua, sambungan internet yang perlahan, atau sekatan keselamatan yang ketat.
Pengurusan fokus adalah penting untuk akses laman web. Laman web ini harus dapat menavigasi melalui papan kekunci, yang membolehkan pengguna melompat dari satu elemen yang fokus ke elemen lain yang fokus dalam susunan Model Objek Dokumen (DOM).
menggunakan elemen HTML yang betul, seperti menggunakan elemen
• apabila anda memerlukan butang, adalah penting untuk aksesibiliti. Penyalahgunaan elemen HTML boleh menyebabkan masalah untuk pengguna papan kekunci dan pembaca skrin. <button></button>
Apabila kandungan berubah secara dinamik, pengguna pembaca skrin mesti dimaklumkan. Ini boleh dicapai dengan menggunakan zon masa nyata Aria, yang membolehkan pembaca skrin mengumumkan kemas kini kandungan.
pemaju tidak perlu meneka apa corak penggunaan komponen mereka mesti menyediakan untuk aksesibiliti. Sumber-sumber seperti Panduan Pengarang WAI-Aria 1.1 Panduan dapat memberikan pandangan yang berharga.

javascript bukan musuh

Sebelum membaca petua saya, saya ingin menunjukkan titik penting - mewujudkan laman web yang boleh diakses tidak bermakna anda perlu membuat keputusan sama ada untuk menggunakan JavaScript atau tidak. Kebolehcapaian adalah mengenai mendapatkan kandungan sebanyak mungkin orang, yang juga termasuk pengguna menggunakan pelayar lama dan komputer, sambungan internet yang perlahan, sekatan keselamatan yang ketat (mis., Tanpa JavaScript), dan sebagainya. Pengalaman mungkin tidak ideal dalam situasi seperti JavaScript mungkin tidak berfungsi atau memuat terlalu lama, tetapi masih cukup baik jika laman web dapat diakses dan tersedia.

Jika JavaScript boleh dilaksanakan, ia juga boleh digunakan untuk meningkatkan kebolehcapaian. Sara Soueidan menulis tentang pengalamannya yang mewujudkan komponen tooltip dalam membina alat bantuan bantuan yang dapat diakses ... lebih keras daripada yang saya fikirkan. Dia menjelaskan mengapa "setiap penyelesaian bebas JavaScript datang dengan kelemahan yang sangat buruk yang memberi kesan negatif terhadap pengalaman pengguna" dan mengapa JavaScript penting untuk aksesibiliti.

Marco Zehe dalam artikelnya "JavaScript bukan musuh aksesibiliti! 》 Menulis lebih lanjut mengenai JavaScript dan kebolehcapaian. Saya sangat mengesyorkan anda membaca artikelnya.

Tetapi itu semua untuk perbualan pengenalan! Mari kita mulakan ...

Pengurusan fokus yang baik adalah penting

Sangat penting untuk memastikan laman web kami dapat dilayari melalui papan kekunci. Ramai pengguna bergantung pada papan kekunci semasa melayari laman web. Ini termasuk orang yang mengalami gangguan pergerakan, orang buta, dan orang yang tidak dapat menggunakan tetikus atau pad sentuh untuk beberapa sebab.

Menavigasi laman web melalui papan kekunci bermakna melompat dari satu elemen yang fokus ke elemen lain yang fokus dalam urutan DOM. Ini biasanya dicapai dengan menggunakan tab kekunci atau shift tab >. Unsur -unsur yang fokus termasuk pautan, butang, dan elemen bentuk. Mereka boleh dipilih menggunakan kekunci masuk , dan kadang -kadang menggunakan ruang angkasa . Mereka mempunyai ciri lalai yang sangat berguna dengan fokus dan boleh dipilih dengan cara yang berbeza. Oleh itu, masuk akal untuk menggunakan unsur -unsur semantik yang betul dan tulis HTML dalam urutan logik.

unsur -unsur seperti <div>, <code><span></span>, atau <div> tidak boleh difokuskan secara lalai. Kami sering menggunakan tag ini untuk membuat komponen tersuai yang dikuasakan oleh JavaScript, yang boleh menjadi masalah untuk pengguna papan kekunci. <p> <strong> Buat unsur-unsur yang tidak dapat difokuskan fokus </strong> </p> <p> Anda boleh membuat elemen yang tidak dapat difokuskan dengan tumpuan dengan menambahkan <code>tabindex atribut dan nilai integer. Jika nilai ditetapkan kepada 0, elemen menjadi tumpuan dan boleh diakses melalui papan kekunci. Jika nilai negatif, elemen itu difokuskan secara programatik (contohnya, menggunakan JavaScript) tetapi tidak dapat diakses melalui papan kekunci. Anda juga boleh menggunakan nilai lebih besar daripada 0, tetapi ini akan mengubah urutan tab semulajadi dan dianggap sebagai anti-corak.

<h2 id="一个可聚焦的标题">一个可聚焦的标题</h2>

Jika anda ingin mengetahui lebih lanjut mengenai tabindex, menonton episod A11ycasts Rob Dodson "Fokus Kawalan dengan Tabindex".

elemen fokus menggunakan JavaScript

Walaupun unsur -unsur difokuskan, kadang -kadang mereka tidak berada dalam urutan DOM yang betul. Untuk menggambarkan ini, saya mencipta komponen tetingkap modal mudah (demo dan pen yang boleh diedit) dalam HTML, CSS, dan JS.

Jika anda menggunakan kekunci untuk melompat ke butang dan tekan masukkan , tetingkap modal akan muncul. Jika anda menekan kekunci lagi, tumpuan akan melompat ke pautan seterusnya yang dipaparkan secara visual di bawah tetingkap modal. Tingkah laku yang dijangkakan harus menjadi elemen fokus seterusnya dalam tetingkap modal. Tetapi ini tidak berlaku, kerana unsur -unsur difokuskan dalam perintah DOM, dan tetingkap modal berada di bahagian bawah dokumen. Anda boleh melihat kesan sebenar dalam rakaman skrin ini.

Untuk menyelesaikan masalah ini, anda perlu membuat tetingkap modal fokus dan kemudian fokus menggunakan JavaScript.

<h2 id="一个可聚焦的标题">一个可聚焦的标题</h2>

Anda dapat melihat ini dalam contoh yang dikemas kini (demo dan pen yang boleh diedit) dengan menukar kekunci tab ke butang, tekan ENTER dan tekan kekunci TAB sekali lagi. Anda akan melihat bahawa tetingkap modal itu sendiri telah mendapat tumpuan.

Ini bagus, tetapi masih terdapat dua masalah di sini.

Jika anda menutup tetingkap modal dengan menekan ESC , tumpuan akan hilang. Idealnya, tumpuan harus melompat kembali ke butang sebelum anda membuka tetingkap modal. Untuk mencapai matlamat ini, anda perlu menyimpan elemen terfokus terakhir dalam pembolehubah.

kita boleh menggunakan document.activeElement untuk mendapatkan elemen yang kini mendapat fokus.

function showModal() {
  var modal = document.getElementById('modal2');
  modal.focus();
  ...
}

Sekarang anda mempunyai rujukan kepada butang, anda boleh fokus lagi apabila anda menutup tetingkap modal.

var lastFocusedElement;

function showModal() {
  lastFocusedElement = document.activeElement;

  var modal = document.getElementById(modalID);
  modal.focus();
  ...
}

Saya telah mengemas kini kod dalam pena lain (demo dan pen yang boleh diedit). Kebolehcapaian jauh lebih baik sekarang, tetapi masih ada ruang untuk penambahbaikan.

Adalah disyorkan untuk mengekalkan tumpuan di dalam tetingkap modal apabila membuka tetingkap modal. Tetingkap modal masih boleh muncul sekarang. Saya tidak akan pergi ke butiran di sini, tetapi demi kesempurnaan, saya mencipta pen keempat dengan apa yang disebut "perangkap papan kekunci" (demo dan pen yang boleh diedit). Selagi tetingkap modal aktif, tumpuan kekal dalam tetingkap modal, seperti yang anda lihat dalam rakaman skrin ini.

Jika anda membandingkan pen pertama dan terakhir, anda akan mendapati bahawa tidak banyak kod tambahan. Ia mungkin tidak sempurna, tetapi penyelesaian akhir jauh lebih baik untuk digunakan.

Terdapat juga contoh mengakses tingkap modal dan artikel yang baik bertajuk "Menggunakan Tabindex", yang ditulis oleh orang di Google. Jika anda ingin mengetahui lebih lanjut mengenai ujian papan kekunci, sila lawati laman web Webaim. Mereka menyediakan senarai "interaksi dalam talian yang paling biasa, kekunci standard untuk interaksi, dan maklumat lain yang perlu dipertimbangkan semasa ujian."

Untuk lebih banyak contoh pengurusan fokus, periksa video egghead.io Marcy Sutton "Pengurusan Fokus dengan CSS, HTML, dan JavaScript" atau episod A11ycast Rob Dodson "What Is Focus?" 》.

Jika anda memerlukan butang, gunakan elemen <button>

Saya telah menulis tentang butang dalam jawatan pertama saya, tetapi jelas banyak orang menggunakan unsur universal sebagai butang. Oleh itu, saya fikir ia tidak akan menyakitkan untuk menulis sesuatu lebih lanjut mengenai topik ini.

Saya mencipta pen (mod debug/pen dengan kod) untuk menggambarkan beberapa isu dengan menggunakan unsur -unsur <div> atau <span> bukannya <button> atau <input type="button"> unsur -unsur. Jika anda melayari halaman, anda akan mendapati bahawa anda boleh memberi tumpuan kepada butang pertama, tetapi bukan butang kedua. Alasannya tentu saja - butang pertama ialah <button> dan butang kedua ialah <div>. Anda boleh menyelesaikan masalah ini dengan menambahkan <div> ke tabindex="0", yang menjadikan unsur -unsur yang tidak dapat difokuskan pada mulanya fokus. Inilah sebab mengapa butang ketiga dan keempat difokuskan, walaupun mereka <div>.

<h2 id="一个可聚焦的标题">一个可聚焦的标题</h2>

Walaupun anda menambah watak butang, "div-butang" memang fokus, tetapi ia masih bertindak seperti <div>. Untuk menggambarkan ini, saya menambah pengendali acara klik mudah (pen) kepada semua unsur .btn. Sekiranya anda mengklik butang, kotak penggera akan muncul, tetapi jika anda cuba melakukan perkara yang sama dengan kekunci ( masukkan atau ruang angkasa ), hanya butang pertama yang akan mencetuskan acara tersebut . Anda perlu menambah pengendali acara utama kepada "div-butang" untuk mensimulasikan sepenuhnya tingkah laku butang lalai, yang kelihatan seperti overhead yang tidak perlu, bukan? Itulah sebabnya jika anda memerlukan butang, anda harus menggunakan elemen . Watch Rob Dodson's A11ycasts Episode "Just Gunakan butang" atau baca pautan, butang, mengemukakan dan div Adrian Roselli, untuk maklumat lanjut dan contoh. <button>

Pengguna pembaca skrin mesti dimaklumkan apabila kandungan berubah secara dinamik

Biasanya, pembaca skrin akan mengumumkan kandungan hanya apabila elemen mendapat tumpuan atau apabila pengguna menggunakan arahan navigasi pembaca skrin sendiri. Sekiranya kandungan dimuatkan secara dinamik dan dimasukkan ke dalam DOM, hanya orang yang dapat melihat perubahan ini. Zon masa nyata Aria menyediakan beberapa penyelesaian kepada masalah ini. Saya akan menunjukkan kepada anda bagaimana untuk melakukannya dengan contoh.

Katakan anda mempunyai halaman tetapan profil di mana anda boleh mengedit data peribadi dan simpannya. Apabila butang Simpan diklik, perubahan tersebut disimpan tanpa memuatkan semula halaman. Amaran akan memberitahu pengguna sama ada perubahan itu berjaya. Ini mungkin berlaku dengan serta -merta dan mungkin mengambil sedikit masa. Saya mencatatkan video pendek untuk menunjukkan kepada anda apa yang saya jelaskan.

Anda dapat melihat bahawa operasi itu berjaya, tetapi anda tidak dapat mendengarnya. Pengguna pembaca skrin tidak akan melihat perubahan, tetapi ada penyelesaian yang mudah untuk masalah ini. Dengan menambah status atau peranan amaran ke kotak mesej, pembaca skrin akan mendengar kemas kini dalam elemen.

function showModal() {
  var modal = document.getElementById('modal2');
  modal.focus();
  ...
}

Jika teks mesej berubah, teks baru akan dibaca. Anda dapat melihat dan mendengar bagaimana ia berfungsi dalam video ini dan melihat kod dalam pen ini.

Rawat pengguna anda dengan ihsan

Perbezaan antara "status" dan "amaran" ialah "amaran" mengganggu pembaca skrin apabila ia mengumumkan sesuatu yang lain. Sebaliknya, "status" akan menunggu pembaca skrin melengkapkan pengumuman.

Terdapat juga atribut yang dipanggil aria-live yang boleh mengambil tiga nilai yang mungkin: mati, sopan, atau tegas. Daripada ketiga -tiga nilai ini, OFF adalah nilai lalai, aria-live="polite" bersamaan dengan role="status", dan aria-live="assertive" bersamaan dengan role="alert". Dalam beberapa kes yang telah ditetapkan yang terkenal, lebih baik menggunakan "peranan zon masa nyata" yang disediakan khusus. Di samping itu, jika penyemak imbas tidak menyokong peranan, anda mungkin perlu cuba menggunakan kedua -dua sifat pada masa yang sama. Léonie Watson berkongsi beberapa keputusan ujian dalam sokongan pembaca skrin untuk zon masa nyata ARIA.

<h2 id="一个可聚焦的标题">一个可聚焦的标题</h2>

Kadang -kadang masuk akal untuk mengisytiharkan bahawa ia tidak hanya berubah

Secara lalai, pembaca skrin hanya memaparkan kandungan yang diubah, walaupun terdapat sesuatu yang lain di kawasan masa nyata yang sama, masuk akal untuk mengumumkan keseluruhan teks dalam beberapa kes. Tingkah laku lalai boleh diubah menggunakan atribut aria-atomic. Jika ditetapkan kepada benar, teknologi bantuan akan memaparkan keseluruhan kandungan elemen.

Paul J. Adam mempunyai demonstrasi kes ujian yang membandingkan kawasan masa nyata yang berbeza. Dia juga menguji demo dengan suara pada iOS 8.1 dan direkodkan supaya anda dapat melihat bagaimana ia berfungsi. Jika anda ingin lebih memahami kemungkinan penggunaan kes aria-atomic, saya cadangkan anda menonton rakaman (Voiceover iOS 8.1 membaca watak -watak yang tinggal aria-atomic dan aria-atomic di kawasan aria-relevant). aria-live

Beberapa perkara yang perlu dipertimbangkan

Kawasan masa nyata tidak bergerak fokus, mereka hanya mencetuskan pengumuman teks.
Gunakan makluman hanya untuk perubahan kritikal. "Status" lebih baik dalam kebanyakan kes kerana ia lebih sopan.
Elakkan merancang penggera yang hilang secara automatik, kerana mereka mungkin hilang terlalu cepat.
Dalam ujian saya, saya menghadapi masalah dengan suara. Sembunyikan makluman menggunakan CSS atau membuat makluman secara dinamik tidak selalu berkesan. Pastikan anda menguji zon masa nyata anda dengan teliti dalam pelayar yang berbeza dan dalam perisian yang berbeza.

Sudah tentu, Rob Dodson juga mempunyai episod A11ycasts mengenai butiran dan contoh, amaran! 》. Heydon Pickering mempunyai satu lagi contoh kawasan hidup dalam koleksi sampel Aria.

Anda tidak perlu meneka apa corak penggunaan komponen anda mesti menyediakan

Selalunya sukar untuk memikirkan semua ciri komponen mesti menyediakan dari segi navigasi dan kebolehcapaian. Mujurlah, terdapat sumber yang dipanggil WAI-Aria Practices Practices 1.1 yang dapat membantu kita melakukan ini. Amalan pengarang WAI-Aria adalah panduan untuk mempelajari cara membuat aplikasi internet kaya yang boleh diakses menggunakan WAI-Aria. Ia menerangkan corak penggunaan WAI-Aria yang disyorkan dan memperkenalkan konsep di belakangnya.

Mereka mempunyai panduan untuk membina akordion, slider, tab, dan banyak lagi.

Komponen JavaScript yang boleh diakses

Berikut adalah beberapa sumber yang sangat baik untuk komponen JavaScript yang boleh diakses:

• Contoh aria praktikal
• Modaal - pemalam tetingkap modal boleh diakses oleh WCAG 2.0 Level AA
• Frend - Satu siri komponen front -end moden yang boleh diakses
• mod projek A11Y

Jika anda tahu apa -apa sumber lain, sila kongsi dalam komen.

Ringkasan

Gunakan kelebihan JavaScript untuk meningkatkan kebolehcapaian laman web anda. Beri perhatian kepada pengurusan fokus, memahami corak penggunaan biasa, dan pertimbangkan pengguna pembaca skrin semasa mengendalikan DOM. Paling penting, jangan lupa siapa yang anda buat laman web dan bersenang -senang dalam proses pengeluaran.

Beyond

semuanya di sini buat masa ini. Saya harap petua ini membantu anda menulis lebih banyak HTML dan JavaScript yang boleh diakses. Terima kasih banyak kepada Heydon Pickering, kerana buku corak reka bentuk front-end inclusive adalah asas bagi kebanyakan yang anda baca. Jika anda ingin mengetahui lebih lanjut mengenai kebolehcapaian dan reka bentuk inklusif, saya sangat mengesyorkan membaca buku beliau.

Terima kasih kepada Adrian Roselli kerana membantu saya menulis artikel ini, dan Eva membuktikan penulisan saya.

Sumber

Ini adalah senarai semua sumber berkaitan dalam artikel ini.

• a11ycasts #03 - Apakah fokus?
• a11ycasts #04 - Gunakan tabindex untuk mengawal fokus
• a11ycasts #05 - Gunakan butang sahaja
• A11ycasts #10 - Alert!
• Buku: "Model Reka Bentuk Front-End termasuk"
• jangan gunakan tabindex lebih besar daripada 0
• Pengurusan Fokus Menggunakan CSS, HTML dan JavaScript
• Jadual Keserasian Elemen -Fokus -Penyiaran
• pautan, butang, penyerahan dan div, oh tuhan saya
• mdn: htmlelement.focus ()
• mdn: Tabindex
• MDN: Komponen JavaScript yang boleh dilayari melalui papan kekunci
• tetingkap modal yang sangat mudah diakses
• Gunakan TabIndex
• Ujian Papan Kekunci Webaim
Kebolehcapaian Papan Kekunci Webaim
wai-aria aria-atomic

FAQs pada menulis JavaScript yang boleh diakses

Apakah kepentingan menulis JavaScript kebolehcapaian?

Menulis kebolehcapaian JavaScript adalah penting kerana ia memastikan bahawa laman web atau aplikasi anda tersedia untuk semua orang, termasuk orang kurang upaya. Ini bukan sahaja meluaskan asas pengguna anda, tetapi juga meningkatkan pengalaman dan kepuasan pengguna. Di banyak bidang, ini juga penting untuk pematuhan undang -undang, kerana kebolehcapaian diperlukan oleh pelbagai bil diskriminasi kecacatan.

Bagaimana membuat kod JavaScript saya lebih mudah diakses?

Terdapat beberapa cara untuk membuat kod JavaScript anda lebih mudah diakses. Pertama, pastikan laman web atau aplikasi anda mesra papan kekunci. Ini bermakna pengguna harus dapat menavigasi laman web anda hanya menggunakan papan kekunci. Kedua, pastikan laman web anda mudah dilayari dengan pembaca skrin. Ini boleh dicapai dengan menggunakan peranan semantik HTML dan ARIA. Akhirnya, sentiasa menyediakan teks alternatif untuk imej dan pastikan laman web anda mempunyai kontras warna yang mencukupi.

Apakah aria dan bagaimana ia meningkatkan kebolehcapaian?

Aria bermaksud aplikasi internet yang boleh diakses. Ia adalah satu set sifat yang menentukan kaedah untuk membuat kandungan web dan aplikasi web lebih mudah diakses oleh orang kurang upaya. ARIA membantu dalam membangunkan kandungan dinamik dan kawalan antara muka pengguna yang canggih menggunakan AJAX, HTML, JavaScript dan teknologi yang berkaitan. Ia boleh meningkatkan kebolehcapaian dengan memberikan maklumat tambahan mengenai elemen, peranan mereka, dan keadaan semasa mereka.

Bagaimana navigasi papan kekunci meningkatkan kebolehcapaian?

navigasi papan kekunci adalah penting untuk pengguna yang tidak boleh menggunakan skrin tetikus atau sentuh. Dengan memastikan bahawa semua ciri laman web atau aplikasi boleh diakses menggunakan papan kekunci sahaja, anda boleh menjadikan laman web anda lebih mudah terdedah kepada pengguna dengan pergerakan atau gangguan penglihatan. Ini boleh dicapai dengan menggunakan tabindex dan pengurusan fokus dalam kod JavaScript.

Apakah peranan HTML semantik dalam aksesibiliti?

HTML Semantik merujuk kepada penggunaan tag HTML untuk meningkatkan semantik atau makna kandungan. Sebagai contoh, gunakan label <button></button> untuk butang dan bukan gaya untuk menjadikannya kelihatan seperti butang. Ini penting untuk kebolehcapaian kerana ia memberikan maklumat yang bermakna untuk pembaca skrin untuk membantu pengguna cacat penglihatan memahami kandungan dan menavigasi laman web.

Bagaimana untuk memastikan kontras warna yang mencukupi untuk aksesibiliti?

Kontras warna yang cukup penting bagi pengguna yang mengalami gangguan visual. Anda boleh memastikan ini dengan memilih gabungan warna yang mematuhi panduan nisbah kontras WCAG 2.1. Terdapat beberapa alat dalam talian yang dapat membantu anda menyemak nisbah kontras warna yang anda pilih.

Apakah kepentingan menyediakan teks alternatif imej?

Menyediakan teks alternatif kepada imej adalah penting untuk pengguna cacat penglihatan yang bergantung kepada pembaca skrin. Teks alternatif harus tepat menerangkan kandungan imej supaya pengguna yang tidak dapat melihat imej masih dapat memahami tujuan mereka dalam konteks halaman.

Bagaimana untuk menguji kebolehcapaian kod JavaScript?

Terdapat beberapa alat yang tersedia untuk menguji kebolehcapaian kod JavaScript. Alat ini termasuk alat ujian automatik seperti AX dan Lighthouse, serta ujian manual menggunakan pembaca skrin dan navigasi papan kekunci sahaja. Adalah penting untuk menggunakan gabungan ujian automatik dan ujian manual untuk memastikan kebolehcapaian penuh.

Apakah beberapa isu kebolehaksesan biasa dalam JavaScript?

Beberapa isu kebolehaksesan biasa dalam JavaScript termasuk kekurangan akses ke kekunci, kontras warna yang tidak mencukupi, kekurangan teks alternatif untuk imej, dan kekurangan aksara aria atau penggunaan aksara ARIA yang salah. Isu -isu ini boleh membuat laman web anda sukar atau tidak tersedia untuk digunakan oleh orang kurang upaya.

Bagaimana untuk mengetahui lebih lanjut mengenai JavaScript dan kebolehcapaian?

Terdapat banyak sumber untuk membantu anda mempelajari lebih lanjut mengenai JavaScript dan kebolehcapaian. Sumber -sumber ini termasuk tutorial dalam talian, kursus dan dokumen dari organisasi seperti W3C. Di samping itu, mengamalkan menulis kod yang boleh diakses dan menguji kebolehaksesan secara teratur dapat meningkatkan pemahaman dan kemahiran anda.