Senarai Semak Kebolehaksesan Web

Kebolehcapaian adalah amalan untuk memastikan laman web tersedia sama untuk orang kurang upaya sehingga mereka mempunyai akses yang sama terhadap barang dan perkhidmatan yang disediakan oleh laman web tersebut. Ini adalah bahagian penting dalam reka bentuk dan pembangunan web profesional.


Contents

Mengapa Anda Perlu Peduli Kebolehcapaian?

Terdapat banyak sebab mengapa pemaju, pereka, dan majikan / pelanggan mereka harus memastikan bahawa aksesibilitas adalah bahagian awal dan tidak terpisahkan dari proses pengembangan web.

  • Di banyak wilayah, seperti Amerika Syarikat, EU, UK, Israel, dan Jepun, adalah syarat undang-undang untuk tidak melakukan diskriminasi terhadap orang-orang kerana ketidakupayaan mereka. Di Amerika Syarikat tahun lalu, 2.235 tuntutan undang-undang Laman Web ADA baru diajukan di mahkamah persekutuan. Itu satu jam.
  • Laman web yang mudah diakses cenderung dengan kod yang lebih baik, lebih mantap dan mempunyai kedudukan yang baik di enjin carian.
  • Laman web yang boleh diakses cenderung lebih berguna untuk pelawat yang tidak cacat, membawa kepada kepuasan dan penukaran yang lebih tinggi.
  • Laman web yang tidak dapat diakses tidak baik untuk perniagaan. Pada tahun 2019, a Tinjauan UK mendapati bahawa lebih daripada 4 juta orang meninggalkan laman web runcit kerana halangan aksesibilitas yang mereka dapati. Perniagaan yang hilang, ‘Click-Away Pound’, adalah 17.1 bilion £. Itu bilion. Di UK sahaja.
  • Adalah perniagaan yang buruk untuk menolak calon pelanggan secara sukarela.

Piawaian dan Masalah Umum

Nasib baik, W3C (badan yang menghasilkan banyak standard yang bergantung pada web) mempunyai standard mengenai cara membuat laman web yang mudah diakses. Ia dipanggil Garis Panduan Kebolehcapaian Kandungan Web (WCAG). Terdapat tiga tahap kesesuaian (A, AA, AAA) dengan ‘A’ merupakan tahap kebolehaksesan terendah. Saya cadangkan anda untuk mencapai tahap AA.

Malangnya, WCAG adalah bacaan yang panjang, kering dan sangat teknikal, jadi mari kita lihat apa yang boleh anda lakukan dengan mudah dan dapatkan keuntungan terbesar. Ini bukan senarai semak Semua yang Perlu Anda Ketahui; ini adalah senarai semak ralat yang paling biasa, dan kesalahan yang dikatakan oleh orang kurang upaya adalah penyekat utama mereka, dengan cadangan praktikal untuk menyelesaikan masalah. Semua pautan luaran dibuka dalam tab baru.

Dalam tinjauan Click-Away Pound, responden kurang upaya ditanya apakah blok utama mereka menyelesaikan pembelian. Berikut adalah halangan utama (banyak jawapan dibenarkan):

  1. Halaman sesak dengan kandungan terlalu banyak – 66%
  2. ujian reCAPTCHA – 59%
  3. Kesahan yang lemah (kontras, susun atur teks) 56%
  4. Gangguan gambar dan grafik bergerak – 53%
  5. Maklumat pautan yang lemah – 59% (77% untuk pengguna pembaca skrin)
  6. Mengisi borang 56%

Cara Meningkatkan Kebolehcapaian Laman Web

Pertama, perhatikan bahawa tidak ada antara 5 teratas yang merupakan masalah teknikal – ini adalah kesilapan reka bentuk atau penulisan iklan.

1) Kandungan Terlalu Banyak

Ringkasnya: pecahkan teks menjadi beberapa bahagian dengan tajuk dan senarai bulet. Gunakan bahasa yang mudah.

Sudah diketahui bahawa apabila jumlah pilihan meningkat, begitu juga dengan pilihan usaha yang diperlukan untuk mengumpulkan maklumat dan membuat keputusan yang baik. Sama juga dengan kandungan yang terlalu banyak – tidak lama lagi menjadi sangat luar biasa. Membahagi kandungan kepada yang penting adalah kemahiran yang memakan masa; seperti yang ditulis Mark Twain: “Saya tidak mempunyai masa untuk menulis surat pendek, jadi saya menulis surat panjang.”

Buku terbaru Penulisan Merancang mencadangkan

Orang mahu dapat meneliti teks yang panjang, tanpa mengira penglihatan atau audio, jadi sangat penting untuk menyusun tulisan panjang anda dengan tajuk, perenggan pendek, dan amalan terbaik reka bentuk kandungan lain.

Jadi:

  • Hanya mempunyai satu

    di halaman.

  • Gunakan sub-tajuk secara bebas; ia memecah ‘slab’ teks untuk pengguna yang melihat, sementara pengguna teknologi bantu seperti pembaca skrin dapat menggunakan kunci pintasan untuk melompat di antara tajuk atau mendapatkan peta mental kandungan dari struktur tajuk.
  • Jangan melangkau tahap tajuk. Contohnya, jika anda menggunakan

    , pastikan ia didahului oleh

    .

  • Gunakan senarai berpoin (seperti ini!) Ditandai dengan betul dalam HTML sebagai
      ,
    • . Pembaca skrin akan mengumumkan “Senarai 10 item” (dan membolehkan pengguna melompati item tersebut).

    Gunakan Bahasa Inggeris Plain

    Bank Monzo Panduan “Nada suara kami” menerangkan kepentingan bahasa biasa:

    Pada tahun 2010, peguam AS Sean Flammer menjalankan eksperimen. Dia meminta 800 hakim mahkamah litar untuk berdebat dengan argumen tradisional atau legalis yang disebutnya “bahasa Inggeris biasa”.

    Para hakim sangat memilih versi bahasa Inggeris biasa (66% hingga 34%), dan pilihan itu tidak kira usia atau latar belakang mereka.

    Catatan Flammer (PDF) versi bahasa Inggeris biasa:

    Lebih pendek hampir satu halaman, jadi jelas menghilangkan ayat dan perkataan yang tidak perlu. Kalimatnya rata-rata 17.8 perkataan, berbanding 25.2 perkataan.

    Dia menyimpulkan:

    Kami kini mempunyai 25 tahun penyelidikan empirik yang membawa kepada kesimpulan yang tidak dapat dielakkan: jika anda ingin menggembirakan dan meyakinkan pembaca anda, tulislah dalam bahasa Inggeris.

    2) ReCAPTCHA

    Ringkasnya: jangan membuat pengguna anda melewati gelung yang mungkin tidak mungkin untuk menjimatkan masa pembangun.

    Responden sering bercakap mengenai tua Versi ReCAPTCHA:

    versi reCAPTCHA dengan teks goyah yang mesti anda taip semula

    Saya bergelut dengan gambar dan perlu menaip nombor atau huruf. Jenis gambar yang mempunyai kedai atau apa sahaja, saya selalu terlepas atau bingung dan menggunakan tenaga yang tidak ada …

    Gaya huruf goyang reCAPTCHA kini tidak digunakan lagi. Jauh lebih biasa untuk melihat penjelmaan yang lebih baru yang disebut “Tidak CAPTCHA reCAPTCHA” (juga dikenal sebagai “Saya bukan robot ”Kotak Centang) yang menghendaki pengguna mencentang kotak yang mengesahkan bahawa mereka bukan robot dan yang menggunakan voodoo rahsia untuk memberi markah kepada pengguna. Sekiranya mereka lulus, tidak diperlukan interaksi lebih lanjut. Namun, jika mereka gagal, cabaran selanjutnya akan ditunjukkan:

    Sebahagian tangkapan skrin captcha yang menuntut pengguna mengklik semua petak yang menunjukkan jeruk

    Perlu diingat bahawa jenis CAPTCHA yang memerlukan pengguna mengklik semua petak dengan (katakan) papan tanda jalan tidak semestinya bersifat antarabangsa. Seperti yang ditulis oleh Terence Eden, CAPTCHA tidak membuktikan anda manusia – mereka membuktikan bahawa anda orang Amerika.

    Bentuk reCAPTCHA yang paling mudah dicapai adalah reCAPTCHA v3 yang tidak memerlukan interaksi pengguna, tetapi memerlukan anda melakukan lebih banyak usaha untuk menangani lawatan yang gagal dalam ujian:

    Ini adalah API JavaScript yang murni mengembalikan skor, memberikan Anda kemampuan untuk mengambil tindakan dalam konteks laman web Anda: misalnya memerlukan faktor pengesahan tambahan, mengirim pos untuk penyederhanaan, atau melemparkan bot yang mungkin mengikis kandungan.

    3) Kesahan yang lemah

    Ringkasnya: pastikan teks mempunyai kontras yang mencukupi, dapat dibaca dan tidak dibenarkan.

    • Pastikan perbezaan yang mencukupi. Salah satu penyekat akses yang paling biasa di web adalah perbezaan antara teks dan latar belakang yang buruk. Garis panduan W3C memerlukan nisbah kontras sekurang-kurangnya 4.5: 1, kecuali teks berskala besar dan gambar teks berskala besar yang harus mempunyai nisbah kontras sekurang-kurangnya 3: 1 (logo dan teks ‘sampingan’ dikecualikan). Terdapat banyak utiliti yang dapat mengukur nisbah kontras untuk anda; kegemaran peribadi saya adalah Ada Rose Cannon yang sangat baik widget kontras, yang merupakan bookmarklet penyemak imbas yang berguna yang menyoroti kawasan yang tidak cukup kontras di halaman anda.
    • Tidak mempunyai tajuk semua modal. Terdapat bukti bahawa mereka lebih sukar dibaca kerana huruf besar semuanya sama tinggi, jadi kita tidak dapat mengenal bentuk kata umum. Selain itu, sebilangan pembaca skrin akan mengeja kumpulan huruf besar seolah-olah mereka adalah singkatan (seperti BBC, DOJ, dll). Sekiranya anda mesti mempunyai semua tajuk utama, tuliskan dalam huruf biasa dalam HTML anda dan ubah dengan CSS text-transform: huruf besar.
    • Teks penjajaran kiri. (Untuk halaman dalam bahasa kanan ke kiri seperti bahasa Arab atau Ibrani, teks penjajaran kanan.) Jangan membenarkannya, kerana ini menyukarkan orang dengan disleksia untuk membaca. The Panduan gaya Persatuan Disleksia British juga mencadangkan

      Gunakan fon sans serif, seperti Arial dan Comic Sans, kerana huruf boleh kelihatan kurang sesak. Alternatif termasuk Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) Mengganggu Imej dan Grafik

    Secara ringkas: membenarkan pengguna menghentikan sebarang pergerakan; menghormati tetapan sistem operasi mereka; jangan mainkan video secara automatik.

    Seorang responden untuk tinjauan Click-Away Pound menulis,

    Laman web yang biasa saya gunakan dengan masalah kecil kini menjadi masalah kerana mereka kini terus mengalihkan iklan dan terus memuat lebih banyak iklan semasa anda berbelanja.

    Tahap paling asas WCAG memerlukan “Untuk sebarang maklumat bergerak, berkedip atau menatal yang (1) bermula secara automatik, (2) berlangsung lebih dari lima saat, dan (3) disajikan selari dengan kandungan lain, ada mekanisme untuk pengguna menjeda, menghentikan, atau menyembunyikannya kecuali pergerakan, berkedip, atau menatal adalah sebahagian daripada aktiviti yang penting ”.

    Gangguan adalah gangguan – terutamanya bagi orang yang mempunyai ADHD atau gangguan kognitif yang lain. Tetapi pergerakan dan kilatan juga boleh menyebabkan kejang, jadi garis panduan WCAG mengharuskan kandungan tidak berkelip lebih dari 3 kali dalam jangka masa 1 saat.

    Hormati Pilihan Pengguna untuk Animasi

    Semua sistem operasi utama membolehkan pengguna menyatakan keutamaan terhadap pergerakan di skrin yang berkurang – mungkin kerana mereka mempunyai gangguan spektrum vestibular yang dicetuskan oleh gerakan. Laman web anda dapat mengesan sama ada pengguna telah melakukan ini dengan CSS lebih suka-gerakan-dikurangkan pertanyaan media.

    Di sini, kami hanya membenarkan butang bernyawa jika pengguna tidak menyatakan pilihan:

    @media (lebih suka-dikurangkan-gerak: tidak-pilihan) {
    butang {
    / * bingkai utama `getar` ditentukan di tempat lain * /
    animasi: getar 0.3s linear tidak terhingga kedua-duanya;
    }
    }

    Sekiranya anda ingin memperbaiki laman web yang mempunyai banyak peraturan animasi, berikut ini mungkin hentikan semua animasi CSS yang dinyatakan sebelumnya:

    @media (lebih suka-mengurangkan-gerakan: mengurangkan) {
    *,
    * :: sebelum ini,
    * :: selepas {
    tempoh animasi: 0.001s! penting;
    tempoh peralihan: 0.001s! penting;
    }
    }

    Berkenaan dengan menghormati pilihan sistem operasi pengguna, anda mungkin ingin mempertimbangkannya merancang laman web anda untuk mod gelap.

    5) Maklumat Pautan yang lemah

    Ringkasnya: buat pautan yang dapat dikenali, dengan teks pautan yang unik. Peringatkan pengguna jika pautan akan membuka tab atau fail baru.

    Salah satu penyebab utama pautan buruk adalah penyusunan teks yang buruk. Sebilangan besar pembaca skrin membolehkan pengguna melihat senarai pautan pada halaman dengan cepat (di pembaca skrin komersial yang paling banyak digunakan, JAWS, jalan pintas papan kekunci adalah Ins + F7; di pembaca skrin NVDA percuma, jalan pintas papan kekunci yang sama memaparkan Senarai Elemen yang menyenaraikan pautan halaman, tajuk, dan mercu tanda).

    Namun, jika setiap pautan mempunyai teks yang bertuliskan “Klik di sini” atau “Baca lebih lanjut”, tanpa ada yang lain untuk membezakannya, ini tidak berguna. Cara termudah untuk menyelesaikannya adalah dengan menulis teks pautan yang unik, tetapi jika itu tidak mungkin, anda boleh menukar teks pautan untuk teknologi bantu dengan menggunakan atribut label aria yang unik pada setiap pautan.

    Berikut adalah contoh yang baik dari Laman web Joomla:

    Laman web Joomla, menunjukkan dua kisah berbeza, masing-masing mempunyai identik

    Teks pautan yang kelihatan hanya “baca lebih banyak”, tetapi Joomla menggunakan label aria atribut untuk menjadikan masing-masing unik untuk teknologi bantu:

    Baca lebih lanjut
    
    Baca lebih lanjut

    Kerana label aria teks akan digunakan dan bukannya teks pautan oleh teknologi bantu, W3C mengesyorkan memulakan teks yang digunakan dalam label aria dengan teks yang digunakan dalam pautan kerana “ini akan memungkinkan komunikasi yang konsisten antara pengguna”.

    Nota: Beberapa nasihat buruk yang masih saya lihat di laman web lama adalah menambahkan teks penjelasan pada pautan yang menggunakan tajuk atribut:

    Baca lebih lanjut>

    Jangan buat ini. The tajuk tidak didedahkan kepada kebanyakan pembaca skrin (pembangun biasa memasukkannya dengan kata kunci untuk tujuan “SEO”, oleh itu vendor pembaca skrin melumpuhkannya secara lalai), dan penyemak imbas menampilkan atribut tajuk sebagai ‘petua alat’ yang hanya tersedia untuk pengguna tetikus di hover.

    Pautan Sepatutnya Seperti Pautan

    Secara lalai, penyemak imbas menggariskan pautan. Sebaiknya jangan mengubahnya, tetapi jika anda bertengkar di tempat letak kereta dengan pereka mengenai perkara ini, teks pautan mesti mempunyai nisbah kontras 3: 1 dari teks bukan pautan di sekitarnya dan harus memberikan sebilangan penunjuk bukan warna “Bahawa mereka adalah pautan ketika dituding atau difokuskan, misalnya:

    a: hover, a: fokus {text-decoration: underline;}

    Gaya fokus menyebabkan pautan menjadi kurang jelas apabila pengguna bukan tetikus memfokuskannya dari papan kekunci, stylus atau input suara. Umumnya, setiap kali sesuatu halaman mempunyai gaya hover, ia juga harus diberi gaya fokus.

    ‘Penunjuk warna’ (dalam kes kami, garis bawah) memastikan bahawa pengunjung dengan penglihatan rendah atau buta warna akan melihat perubahan pada hover atau fokus. (Pembaca skrin secara automatik mengumumkan “Pautan” sebelum teks pautan.)

    Beritahu Orang Jika Pautan Membuka Tab / Halaman Baru

    Ini boleh membingungkan pengunjung jika mengaktifkan pautan membuka tab baru atau tetingkap baru, terutama jika hanya beberapa pautan di halaman yang melakukannya (sebagai contoh, hanya pautan luaran yang membuka tab baru). Sekiranya anda mesti melakukan ini, anda harus memberi amaran kepada pengguna sama ada dalam teks pautan, atau menggunakan kaedah label aria di atas.

    Beritahu Orang Jika Pautan ke Fail

    Sekiranya pautan ke fail (misalnya, PDF atau video), beritahu pengguna dalam teks pautan. Jangan menyembunyikannya label aria, kerana ini boleh berguna bagi banyak pengguna yang kelihatan (misalnya, beberapa telefon bimbit tidak dapat membuka fail .docx). Sekiranya fail tersebut berukuran besar, pertimbangkan untuk memberi amaran kepada pengguna mengenai ukuran anggaran; mereka mungkin tidak mahu memuat turun fail video besar melalui 3G.

    Anda juga boleh menggunakan muat turun atribut, yang menyebabkan penyemak imbas membuka dialog muat turun fail asli sistem operasi. Menggabungkan ini, kodnya akan kelihatan seperti ini:

    Laporan tahunan (PDF, 240 MB)

    6) Kesalahan Reka Bentuk Lain: Melepaskan Fokus Ring

    Secara ringkas: pastikan pengguna papan kekunci sentiasa dapat melihat di mana mereka sedang fokus.

    Kami telah menyebut : fokus gaya sebelum. Mereka adalah petunjuk visual yang tidak ternilai bagi orang-orang yang tidak dapat menggunakan tetikus dengan alasan apa pun: mungkin mereka mempunyai RSI, atau Parkinson atau Multiple Sclerosis. Secara lalai, penyemak imbas memaparkan cincin fokus pada elemen yang sedang difokuskan. Inilah pautan Laman Utama di laman web peribadi saya, yang difokuskan dalam penyemak imbas Chromium:

    Tangkapan skrin dering fokus lalai Chromium di sekitar pautan (yang juga merupakan gambar)

    Namun, sebilangan orang menganggap ini secara estetik tidak menyenangkan ketika mereka menggunakan tetikus dan mematikannya dengan CSS, sehingga menjadikan laman web ini tidak dapat diakses oleh pengguna papan kekunci.

    Masukkan standard baru, yang dipelopori oleh Firefox, yang dipanggil : kelihatan fokus. Ini akan menggunakan cincin fokus pada elemen jika telah dicapai oleh papan kekunci atau peranti penunjuk bukan tetikus tetapi tidak menunjukkan apa-apa kepada pengguna tetikus. Kerana ia hanya disokong di Firefox (semasa menulis), Patrick Lauke mencadangkan CSS berikut untuk bermain dengan baik dengan semua penyemak imbas:

    butang: fokus {/ * beberapa gaya fokus butang yang menarik * /}
    butang: fokus: tidak (: fokus-kelihatan) {
    / * buat asal semua gaya butang tertumpu di atas
    jika butang mempunyai fokus tetapi penyemak imbas tidak normal
    tunjukkan gaya fokus lalai * /
    }
    butang: kelihatan fokus {/ * beberapa * lebih * gaya fokus butang menarik * /}

    7) Pengisian Borang

    Ringkasnya: bidang bentuk reka bentuk yang kelihatan seperti bidang bentuk, masing-masing dikaitkan dengan label. Jangan lumpuhkan pengisian automatik.

    Memandangkan pentingnya borang untuk laman web eCommerce, ia mengejutkan saya berapa banyak borang yang tidak dapat diakses yang saya lihat. Selalunya ini kerana penyemak imbas lama tidak membenarkan cara menggayakan elemen bentuk, jadi pembangun memalsukannya dengan elemen HTML yang lain. Penyemak imbas moden membenarkan kotak pilihan yang menarik, butang radio, komponen pilih pilihan dan komboboks, kawalan pelengkap automatik yang boleh diakses dan banyak lagi.

    IsiOtomatik Adalah Rakan Anda

    Membolehkan penyemak imbas mengisi borang secara automatik memerlukan pengunjung melakukan lebih sedikit, jadi mereka lebih cenderung untuk melengkapkan borang dan mendaftar / membeli produk anda. IsiOtomatis pada Penyemak Imbas: Penyelaman Dalam adalah artikel hebat oleh eBay mengenai perkara ini (dan mereka harus tahu).

    Juga, pelengkap automatik adalah satu-satunya teknik yang mencukupi untuk mencapai pematuhan AA Kriteria Kejayaan 1.3.5: Mengenal pasti Tujuan Input.

    Jadikan Medan Bentuk Tampak Seperti Medan Bentuk

    Secara lalai, penyemak imbas memaparkan medan input bentuk sebagai kotak. Dengan segala cara, gaya dengan margin, padding, dan border, tetapi simpan sebagai kotak. Banyak pereka mengikuti corak Reka Bentuk Bahan pra-2017 Google menggunakan satu baris untuk pengguna memasukkan teks:

    Input reka bentuk bahan lama, dengan garis cakrawala dan bukannya kotak segi empat tepat

    Namun, Google mendapati bahawa garis di bawah bidang teks lama tidak jelas bagi sesetengah pengguna, sering keliru dengan pembahagi, dan mengubah reka bentuknya. Didalam ujian kebolehgunaan dengan 600 peserta, mereka mendapati bahawa

    Medan teks tertutup dengan bentuk segi empat tepat (kotak) lebih baik daripada yang mempunyai garis garisan… Hari ini, bidang teks baru ini muncul di seluruh produk Google dari halaman log masuk akaun ke borang Google.

    Sekiranya anda mempertimbangkan untuk menggunakan perpustakaan UI Reka Bentuk Bahan Google sepenuhnya, baca Berhenti menggunakan medan teks Reka Bentuk Bahan! oleh Matsuko Friedland untuk melihat sama ada memenuhi keperluan anda.

    Labelkan Semua Medan Bentuk

    Semua medan borang (input teks, kotak centang, butang radio, slider, dll) perlu dilabelkan. Cara terbaik untuk melakukannya adalah dengan menggunakan HTML ; seperti yang dikatakan WCAG, “kawalan HTML standard sudah memenuhi kriteria kejayaan ini ketika digunakan sesuai dengan spesifikasi”.

    Inilah demo yang saya buat medan bentuk tidak berlabel vs medan bentuk berlabel. Mereka kelihatan sama, tetapi yang teratas tidak mempunyai label yang sesuai, sedangkan yang kedua tidak mempunyai label yang betul. Klik pada label teks yang paling bawah, dan anda akan melihat bahawa label itu memfokus pada input yang berkaitan.

    perbandingan label palsu dan sebenar

    Ini menjadikan pemfokusan input menjadi lebih mudah bagi seseorang yang menghadapi masalah kawalan motor – atau mungkin untuk anda, mencuba kotak centang kecil di layar kecil di kereta api bergelombang. Ia juga penting bagi pengguna pembaca skrin yang akan memasukkan medan dalam bentuk (secara lalai, hanya pautan dan medan borang yang difokuskan dengan tab); ketika mereka memasuki medan input, pembaca skrin akan mengumumkan isi label yang berkaitan.

    Kod untuk ini mudah. Medan input diberi ID unik, dan label dikaitkan dengannya menggunakan untuk atribut:

    
    

    Menyembunyikan Label

    Kadang-kadang, anda mungkin tidak mahu label yang kelihatan. Atau pereka tidak, dan anda tidak mahu pertengkaran lain di tempat letak kereta. Bagaimanapun, inilah contoh apabila label yang mengatakan “Cari” sebelum input terasa seperti terlalu banyak.

    Medan input, dengan butang berlabel 'cari' selepas itu

    Kita dapat mengaitkan bidang input dengan teks “Cari”, yang merupakan isi dari butang kirim menggunakan aria-dilabel oleh:

    
    

    Kita boleh menggunakan label aria (yang kami temui lebih awal ketika bercakap mengenai pautan):


    Tetapi selalu lebih baik memilih teks yang dapat dilihat pada halaman kerana itu akan diterjemahkan jika halaman dijalankan melalui alat terjemahan, sedangkan teks “tersembunyi” dalam atribut HTML tidak akan. (Topi kepada Adrian Roselli untuk tip ini, dari artikelnya yang indah Keutamaan Kaedah Saya Melabel Kawalan.)

    Kesalahan Paling Lazim di Halaman Sejuta Halaman Utama

    Kami telah melihat halangan teratas untuk laman web eCommerce seperti yang dilaporkan oleh pengguna dengan beberapa bentuk kemerosotan. Sekarang mari kita lihat sekumpulan laman web yang jauh lebih luas – halaman utama untuk 1,000,000 laman web teratas, dianalisis secara automatik oleh WebAIM pada bulan Ogos 2019. 98% halaman yang dianalisis mempunyai sekurang-kurangnya satu ralat. Kesalahan yang paling biasa adalah

    1. Teks kontras rendah (86.1%)
    2. Hilang teks alternatif untuk gambar (67.9%)
    3. Pautan kosong (58.9%)
    4. Label input borang tiada (53.2%)
    5. Bahasa dokumen tiada (30.5%)

    Kami telah menangani input kontras, pautan dan bentuk yang rendah di atas. Sekarang mari kita lihat bagaimana kita dapat mengelakkan kesilapan lain yang sangat biasa.

    8) Sediakan Alternatif Teks untuk Semua Imej, Video, dan Audio

    Ringkasnya: segala maklumat yang disampaikan melalui gambar atau video mestilah setara dengan teks.

    Setiap mesti mempunyai teks alternatif (“teks alt”) yang dapat disampaikan kepada pengunjung dengan masalah penglihatan atau mereka yang mempunyai lebar jalur rendah / pelan data mahal yang telah mematikan gambar di penyemak imbas mereka. Ini merangkumi gambar teks.

    Berikut adalah peraturan asas:

    • Sekiranya gambar itu hiasan semata-mata, mestilah mempunyai teks alt kosong: alt = "". (Bagaimanapun, gambar hiasan semata-mata mungkin ada dalam CSS.)
    • Sekiranya gambar dijelaskan dalam teks badan, ia mesti mempunyai teks alt kosong (alt = ""), untuk mengelakkan pengulangan. Tetapi berhati-hatilah jika itu didalam
      – lihat Bagaimana anda mencari? untuk lebih.
    • Sekiranya gambar adalah satu-satunya kandungan pautan (contohnya, logo organisasi anda dapat diklik untuk pergi ke laman utama) teks alternatif harus menerangkan tujuan pautan tersebut. Sebagai contoh, alt = "laman utama".
    • Jangan gunakan fon ikon; mereka boleh menjadi buruk bagi orang-orang disleksia. Sekiranya anda menggunakannya, menukarnya menjadi SVG.

    Teks Alternatif Video dan Audio

    Jangan lupa bahawa kandungan audio memerlukan teks alternatif untuk orang yang mempunyai masalah pendengaran. Ini bermaksud transkrip podcast, dan sari kata pada video. Dan sekali lagi: jangan mainkan media secara automatik.

    9) Tambahkan Bahasa Dokumen yang Betul

    Ringkasnya: biarkan teknologi bantu mengetahui bahasa yang digunakan teks anda.

    30% halaman utama tidak menyatakan bahasa yang ditulisnya, yang boleh membuatnya membingungkan bagi pengguna pembaca skrin. Ini penting kerana perkataan “six” diucapkan sangat berbeza jika ayatnya dalam bahasa Inggeris atau Perancis, misalnya.

    Sangat mudah untuk menyelesaikannya dengan menambahkan atribut lang pada elemen HTML anda:

    “En” memberitahu pembaca skrin (atau perisian terjemahan) bahawa halaman ini dalam bahasa Inggeris. “Es” adalah Sepanyol, “fr” adalah Perancis, dan sebagainya. Bagi kebanyakan bahasa, tanda bahasa cukup mudah ditentukan. W3C mempunyai panduan untuk Memilih Tag Bahasa.

    Sekiranya halaman mengandungi kandungan dalam bahasa selain dari yang dinyatakan utama, tambahkan atribut bahasa ke elemen yang mengelilingi kandungan itu. Contohnya, dalam halaman yang dinyatakan sebagai bahasa Inggeris:

    Sekiranya anda ingin berbual a matador, dalam beberapa sejuk cabana
    Dan berjumpa senoritas mengikut skor, Espana por nikmat

    10) Bantu Pelawat Mengenai Kandungan Anda

    Secara ringkas: gunakan elemen mercu tanda HTML untuk membantu pengguna teknologi bantu memahami dan menavigasi kandungan anda.

    Apabila pengunjung yang melihat ke laman anda, mereka dapat mengimbasnya secara visual untuk memahami di mana navigasi berada, dan di mana kandungan utama bermula. Pengguna pembaca skrin tidak dapat melakukan ini. Walau bagaimanapun, HTML5 memberi kami beberapa tag baru untuk menandai kawasan ini, dan teknologi bantu mempunyai jalan pintas yang dapat melangkau ke (atau melangkau) mercu tanda seperti kepala, tapak kaki, pelayaran dan seumpamanya.

    Berikut adalah video enam minit yang saya buat dengan Léonie Watson, seorang pembangun web dan pengguna pembaca skrin, tentang bagaimana dia menggunakan pembaca skrinnya untuk memeriksa semantik ini untuk menavigasi laman web peribadi saya:

    • Bungkus kandungan utama anda, iaitu, perkara yang bukan tajuk, navigasi utama atau footer, di
      unsur. Dalam hampir semua kes, hanya ada satu
      setiap muka surat. Semua penyemak imbas (IE9 +) membolehkan anda menggayakannya, dan teknologi bantu tahu apa yang harus dilakukan dengannya.
    • Bungkus tajuk anda (logo jenama, tali, tajuk halaman) dengan huruf a
      unsur.
    • Bungkus footer anda (barang undang-undang, maklumat hubungan, notis hak cipta, dll) di a
    • Tandakan navigasi utama anda menggunakan
        dibalut dengan a unsur. Ini boleh bersarang di dalam
        jika itu sesuai dengan reka bentuk visual halaman.
      • Kandungan iklan dan tidak penting harus dibungkus dalam
      • Sekiranya anda mempunyai lebih daripada satu produk / video / item berita / catatan blog di halaman, bungkus masing-masing di dalam
        unsur.

      Di dalam tinjauan pengguna pembaca skrin, WebAIM mendapati bahawa 26% pengguna pembaca skrin kerap atau selalu menggunakan mercu tanda ini semasa menavigasi halaman.

      Selain itu, membungkus kepingan isi diskrit dalam

      membantu WatchOS Apple memaparkan kandungan dengan optimum. Lihat artikel saya Nilai praktikal HTML semantik untuk lebih lanjut mengenai perkara ini.

      11) Gunakan HTML dengan betul

      Secara ringkas: memahami semantik dan tingkah laku lalai elemen HTML; gunakan elemen yang betul untuk kandungan anda.

      Tema umum dalam artikel ini adalah menggunakan elemen HTML yang betul. Menggunakan a label mempunyai tingkah laku penyemak imbas terbina dalam yang memfokus bidang input yang berkaitan; menggunakan

      lebih disukai daripada

      kerana ia membolehkan pengguna pembaca skrin melompat langsung ke kandungan penting sambil sama sekali tidak mengganggu mereka yang tidak menggunakan pembaca skrin.

      Contoh lain ialah menggunakan a

      Like this post? Please share to your friends:
Adblock
detector
map