Daftar Periksa Aksesibilitas Web

Aksesibilitas adalah praktik memastikan situs web sama-sama tersedia bagi penyandang cacat sehingga mereka memiliki akses yang sama ke barang dan layanan yang disediakan situs tersebut. Ini merupakan bagian integral dari desain dan pengembangan web profesional.


Contents

Mengapa Harus Anda Peduli? Aksesibilitas?

Ada banyak alasan mengapa pengembang, perancang, dan atasan / klien mereka harus memastikan bahwa aksesibilitas merupakan bagian awal dan integral dari proses pengembangan web..

  • Di banyak wilayah, seperti Amerika Serikat, Uni Eropa, Inggris, Israel, dan Jepang, merupakan persyaratan hukum untuk tidak mendiskriminasi orang karena kecacatan mereka. Di AS tahun lalu, 2.235 tuntutan hukum Situs Web ADA baru diajukan di pengadilan federal. Itu satu per jam.
  • Situs yang dapat diakses cenderung memiliki kode yang lebih baik, lebih kuat, dan berperingkat baik di mesin pencari.
  • Situs yang mudah diakses cenderung lebih bermanfaat bagi pengunjung non-cacat, mengarah pada kepuasan dan konversi yang lebih besar.
  • Situs yang tidak dapat diakses buruk untuk bisnis. Pada 2019, a Survei Inggris menemukan bahwa lebih dari 4 juta orang meninggalkan situs web ritel karena hambatan aksesibilitas yang mereka temukan. Bisnis yang hilang itu, ‘Click-Away Pound’, bernilai £ 17,1 miliar. Itu milyar. Di Inggris saja.
  • Adalah bisnis yang buruk untuk secara sukarela menolak pelanggan potensial.

Standar Umum dan Masalahnya

Untungnya, W3C (badan yang menghasilkan banyak standar yang diandalkan web) memiliki standar tentang cara membuat situs web dapat diakses. Ini disebut Pedoman Aksesibilitas Konten Web (WCAG). Ada tiga tingkat kesesuaian (A, AA, AAA) dengan ‘A’ adalah tingkat aksesibilitas terendah. Saya sarankan Anda bertujuan untuk level AA.

Sayangnya, WCAG adalah bacaan yang panjang, kering, dan sangat teknis, jadi mari kita lihat apa yang dapat Anda lakukan dengan relatif mudah dan dapatkan keuntungan terbesar dari uang Anda. Ini bukan daftar centang Semua yang Perlu Anda Ketahui; ini adalah daftar periksa untuk kesalahan yang paling umum, dan kesalahan yang dikatakan oleh para penyandang cacat adalah pemblokir utama mereka, dengan saran praktis untuk menyelesaikan masalah. Semua tautan eksternal terbuka di tab baru.

Dalam survei Pound Click-Away, responden dengan disabilitas ditanya apa blok utama mereka dalam menyelesaikan pembelian. Inilah penghalang teratas (beberapa jawaban diizinkan):

  1. Halaman penuh sesak dengan terlalu banyak konten – 66%
  2. tes reCAPTCHA – 59%
  3. Buruk keterbacaan (kontras, tata letak teks) 56%
  4. Gangguan gambar dan grafik bergerak – 53%
  5. Informasi tautan buruk – 59% (77% untuk pengguna pembaca layar)
  6. Mengisi formulir 56%

Cara Meningkatkan Aksesibilitas Situs Web

Pertama, perhatikan bahwa tidak satupun dari 5 teratas adalah masalah teknis – itu adalah kesalahan desain atau copywriting.

1) Konten Terlalu Banyak

Secara singkat: pisahkan teks menjadi beberapa bagian dengan judul dan daftar berpoin. Gunakan bahasa yang sederhana.

Sudah diketahui umum bahwa ketika jumlah pilihan meningkat, begitu pula dengan upaya yang diperlukan untuk mengumpulkan informasi dan membuat keputusan yang baik. Itu sama dengan terlalu banyak konten — itu segera menjadi luar biasa. Mengurangi konten menjadi hal yang esensial adalah pekerjaan yang menghabiskan waktu; sebagaimana Mark Twain (diduga) menulis: “Saya tidak punya waktu untuk menulis surat pendek, jadi saya menulis surat yang panjang.”

Buku terbaru Menulis Itu Merancang menyarankan

Orang ingin dapat membaca sekilas blok teks yang panjang, terlepas dari penglihatan atau audio, sehingga sangat penting untuk menyusun tulisan bentuk panjang Anda dengan header, paragraf pendek, dan praktik terbaik desain konten lainnya..

Begitu:

  • Hanya punya satu

    di halaman.

  • Gunakan sub-judul secara bebas; itu memecah ‘slab’ teks untuk pengguna yang terlihat, sementara pengguna teknologi bantu seperti pembaca layar dapat menggunakan tombol pintasan untuk melompat di antara judul atau mendapatkan peta mental konten dari struktur heading.
  • Jangan lewati level judul. Misalnya, jika Anda menggunakan

    , pastikan itu didahului oleh

    .

  • Gunakan daftar berpoin (seperti ini!) Yang ditandai dengan benar dalam HTML sebagai
      ,
    • . Pembaca layar akan mengumumkan “Daftar 10 item” (dan memungkinkan pengguna untuk melompati mereka).

    Gunakan Bahasa Inggris Biasa

    Bank Monzo Panduan “Nada bicara kami” menjelaskan pentingnya bahasa sederhana:

    Pada 2010, pengacara AS Sean Flammer menjalankan percobaan. Dia meminta 800 hakim pengadilan wilayah untuk berpihak pada argumen ‘legalese’ tradisional, atau argumen yang disebutnya ‘bahasa Inggris biasa’.

    Para juri sangat menyukai versi bahasa Inggris biasa (66% hingga 34%), dan preferensi itu tetap berlaku terlepas dari usia atau latar belakang mereka..

    Catatan Flammer (PDF) dari versi bahasa Inggris polos:

    Itu lebih pendek dengan hampir satu halaman, jadi itu jelas menghilangkan kalimat dan kata-kata yang tidak perlu. Kalimatnya rata-rata 17,8 kata, berbeda dengan 25,2 kata.

    Dia menyimpulkan:

    Kami sekarang memiliki 25 tahun penelitian empiris yang mengarah pada kesimpulan yang tak terhindarkan: jika Anda ingin menyenangkan dan membujuk pembaca Anda, tulis dalam bahasa Inggris yang sederhana.

    2) ReCAPTCHA

    Singkatnya: jangan membuat pengguna Anda melompat melewati rintangan yang mungkin mustahil untuk menghemat waktu pengembang.

    Para responden sering berbicara tentang yang lama Versi ReCAPTCHA:

    versi reCAPTCHA dengan teks goyah yang harus Anda ketik ulang

    Saya kesulitan dengan gambar dan harus mengetik angka atau huruf. Dalam jenis di mana saya harus mengklik gambar mana yang memiliki toko atau apa pun, saya selalu kehilangan beberapa atau menjadi bingung dan menghabiskan energi yang saya tidak punya …

    Gaya huruf reCAPTCHA yang goyah sekarang sudah tidak digunakan lagi. Jauh lebih umum untuk melihat inkarnasi yang lebih baru yang disebut “No CAPTCHA reCAPTCHA” (juga dikenal sebagai “Saya bukan robot ”Kotak Centang) yang mengharuskan pengguna untuk mencentang kotak yang mengonfirmasi bahwa mereka bukan robot dan yang menggunakan voodoo rahasia untuk menilai pengguna. Jika mereka lewat, tidak ada interaksi lebih lanjut yang diperlukan. Namun, jika gagal, tantangan lebih lanjut akan ditampilkan:

    Tangkapan layar sebagian captcha yang meminta pengguna mengklik semua kotak yang menunjukkan jeruk

    Ingatlah bahwa jenis CAPTCHA yang mengharuskan pengguna mengklik semua kotak dengan (katakanlah) tanda jalan belum tentu internasional. Seperti yang ditulis Terence Eden, CAPTCHA tidak membuktikan Anda manusia – mereka membuktikan Anda Amerika.

    Bentuk reCAPTCHA yang paling mudah diakses adalah reCAPTCHA v3 yang tidak memerlukan interaksi pengguna, tetapi mengharuskan Anda melakukan lebih banyak pekerjaan untuk menangani kunjungan yang gagal dalam tes:

    Ini adalah JavaScript API murni yang mengembalikan skor, memberi Anda kemampuan untuk mengambil tindakan dalam konteks situs Anda: misalnya membutuhkan faktor tambahan otentikasi, mengirim pos ke moderasi, atau melambatkan bot yang mungkin mengikis konten.

    3) keterbacaan yang buruk

    Secara singkat: pastikan teks memiliki kontras yang memadai, dapat dibaca dan tidak dibenarkan.

    • Pastikan kontras yang memadai. Salah satu pemblokir akses yang paling umum di web adalah kontras yang buruk antara teks dan latar belakang. Pedoman W3C memerlukan rasio kontras minimal 4,5: 1, kecuali untuk teks skala besar dan gambar teks skala besar yang harus memiliki rasio kontras minimal 3: 1 (logo dan teks ‘insidental’ dikecualikan). Ada banyak utilitas yang dapat mengukur rasio kontras untuk Anda; favorit pribadi saya adalah luar biasa Ada Rose Cannon widget kontras, yang merupakan bookmarklet peramban yang berguna yang menyoroti area-area yang kontrasnya tidak cukup pada halaman Anda.
    • Jangan memiliki judul semua modal. Ada bukti bahwa mereka lebih sulit dibaca karena huruf kapital semuanya sama tingginya, sehingga kami tidak dapat mengenali bentuk kata-kata umum. Selain itu, beberapa pembaca layar akan mengeja kelompok huruf besar seolah-olah mereka singkatan (seperti BBC, DOJ, dll). Jika Anda harus memiliki semua judul berita utama, tulislah dalam huruf besar normal di HTML dan ubah dengan CSS text-transform: huruf besar.
    • Teks rata kiri. (Untuk halaman dalam bahasa kanan-ke-kiri seperti Arab atau Ibrani, luruskan teks.) Jangan membenarkannya, karena hal ini mempersulit orang dengan disleksia untuk membaca. Itu Panduan gaya Asosiasi Disleksia Inggris juga menyarankan

      Gunakan font sans serif, seperti Arial dan Comic Sans, karena huruf bisa terlihat kurang ramai. Alternatif termasuk Verdana, Tahoma, Abad Pertengahan Gotik, Trebuchet, Calibri, Open Sans.

    4) Mengganggu Gambar dan Grafik

    Singkatnya: izinkan pengguna untuk menghentikan gerakan apa pun; menghormati pengaturan sistem operasi mereka; jangan putar video secara otomatis.

    Salah satu responden untuk survei Pound Click-Away menulis,

    Situs yang saya gunakan dengan sedikit masalah sekarang menjadi masalah karena mereka sekarang mengambil iklan bergerak dan terus memuat lebih banyak iklan saat Anda berbelanja.

    Level paling dasar dari WCAG memerlukan “Untuk informasi pemindahan, kedip, atau gulir yang (1) dimulai secara otomatis, (2) berlangsung lebih dari lima detik, dan (3) disajikan secara paralel dengan konten lain, ada mekanisme untuk pengguna untuk menjeda, menghentikan, atau menyembunyikannya kecuali gerakan, berkedip, atau gulir adalah bagian dari aktivitas yang sangat penting ”.

    Gangguan adalah gangguan – terutama untuk orang dengan ADHD atau gangguan kognitif lainnya. Tetapi gerakan dan flashing juga dapat menyebabkan kejang, sehingga pedoman WCAG mengharuskan konten tidak boleh berkedip lebih dari 3 kali dalam periode 1 detik apa pun.

    Hormati Pilihan Pengguna untuk Animasi

    Semua sistem operasi utama memungkinkan pengguna untuk mengekspresikan preferensi untuk gerak yang berkurang di layar — mungkin karena mereka memiliki gangguan spektrum vestibular yang dipicu oleh gerakan. Situs web Anda dapat mendeteksi apakah pengguna telah melakukan ini dengan CSS lebih suka mengurangi gerak permintaan media.

    Di sini, kami hanya mengizinkan tombol untuk menghidupkan jika pengguna tidak menyatakan preferensi:

    @ media (lebih suka gerak dikurangi: tidak ada preferensi) {
    tombol {
    / * keyframe `vibrate` didefinisikan di tempat lain * /
    animasi: bergetar 0,3 detik linear tak terbatas keduanya;
    }
    }

    Jika Anda mencari untuk retrofit situs yang memiliki banyak aturan animasi, berikut ini mungkin hentikan semua animasi CSS yang sebelumnya dinyatakan:

    @ media (lebih suka gerak-berkurang: kurangi) {
    *,
    *::sebelum,
    * :: setelah {
    durasi animasi: 0.001s! penting;
    durasi transisi: 0,001! Penting;
    }
    }

    Pada subjek menghormati preferensi sistem operasi pengguna, Anda mungkin ingin mempertimbangkan mendesain situs web Anda untuk mode gelap.

    5) Informasi Tautan Buruk

    Secara singkat: buat tautan dapat diidentifikasi, dengan teks tautan unik. Peringatkan pengguna jika tautan akan membuka tab atau file baru.

    Salah satu penyebab utama dari tautan yang buruk adalah copywriting yang buruk. Sebagian besar pembaca layar memungkinkan pengguna untuk dengan cepat melihat daftar tautan pada suatu halaman (pada pembaca layar komersial yang paling banyak digunakan, JAWS, pintasan keyboard adalah Ins + F7; di pembaca layar NVDA gratis, pintasan keyboard yang sama menampilkan Daftar Elemen yang mencantumkan tautan halaman, judul, dan landmark).

    Namun, jika setiap tautan memiliki teks yang mengatakan “Klik di sini” atau “Baca lebih lanjut”, tanpa ada yang membedakannya, ini tidak berguna. Cara termudah untuk menyelesaikan ini adalah dengan menulis teks tautan unik, tetapi jika itu tidak memungkinkan, Anda dapat menggunakan teks tautan secara berlebihan untuk teknologi bantuan dengan menggunakan atribut aria-label unik pada setiap tautan.

    Ini contoh yang bagus dari Situs web Joomla:

    Situs web Joomla, menampilkan dua cerita berbeda, masing-masing dengan identik

    Teks tautan yang terlihat hanyalah “baca lebih lanjut”, tetapi Joomla menggunakan label aria atribut untuk membuat setiap teknologi unik menjadi bantu:

    Baca lebih banyak
    
    Baca lebih banyak

    Karena label aria teks akan digunakan sebagai pengganti teks tautan dengan teknologi bantu, W3C merekomendasikan memulai teks yang digunakan dalam aria-label dengan teks yang digunakan dalam tautan karena “ini akan memungkinkan komunikasi yang konsisten antara pengguna”.

    catatan: Beberapa saran buruk yang masih saya lihat di situs lama adalah menambahkan teks penjelasan pada tautan menggunakan judul atribut:

    Baca lebih lanjut>

    Jangan lakukan ini. Itu judul tidak terpapar oleh sebagian besar pembaca layar (pengembang biasa mengisinya dengan kata kunci untuk tujuan “SEO”, jadi vendor pembaca layar menonaktifkannya secara default), dan browser menyajikan atribut judul sebagai ‘tooltips’ yang hanya tersedia untuk pengguna mouse saat mengarahkan kursor.

    Tautan Seharusnya Tampak Seperti Tautan

    Secara default, browser menggarisbawahi tautan. Sebaiknya jangan ubah ini, tetapi jika Anda kalah bertengkar di tempat parkir dengan perancang mengenai hal ini, teks tautan harus memiliki rasio kontras 3: 1 dari teks non-tautan di sekitarnya dan harus memberi beberapa ‘non-color designator’ ”Bahwa mereka adalah tautan saat melayang atau terfokus, misalnya:

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

    Gaya fokus menyebabkan tautan menjadi bergaris bawah ketika pengguna non-mouse memfokuskannya dari keyboard, stylus, atau input suara. Secara umum, setiap kali sesuatu pada halaman memiliki gaya hover, itu juga harus diberikan gaya fokus.

    ‘Non-color designator’ (dalam kasus kami, sebuah garis bawah) memastikan bahwa pengunjung dengan low vision atau buta warna akan melihat perubahan saat mengarahkan atau fokus. (Pembaca layar secara otomatis mengumumkan “Tautan” sebelum teks tautan.)

    Beri tahu Orang-Orang Jika Tautan Membuka Tab / Halaman Baru

    Ini bisa membingungkan bagi pengunjung jika mengaktifkan tautan membuka tab baru atau jendela baru, terutama jika hanya beberapa tautan pada halaman yang melakukan ini (misalnya, hanya tautan eksternal yang membuka tab baru). Jika Anda harus melakukan ini, Anda harus memperingatkan pengguna baik dalam teks tautan, atau menggunakan metode label aria di atas.

    Beri tahu Orang-Orang Jika Tautan Adalah ke File

    Jika tautan menuju file (misalnya, PDF atau video), beri tahu pengguna dalam teks tautan. Jangan sembunyikan di label aria, karena ini dapat bermanfaat bagi banyak pengguna yang melihat (beberapa ponsel tidak dapat membuka file .docx, misalnya). Jika ini file besar, pertimbangkan untuk memberi tahu pengguna tentang ukuran perkiraan; mereka mungkin tidak ingin mengunduh file video besar melalui 3G.

    Anda juga dapat menggunakan unduh atribut, yang menyebabkan browser untuk membuka dialog unduhan file asli sistem operasi. Menyatukan semua ini, kode akan terlihat seperti ini:

    Laporan tahunan (PDF, 240 MB)

    6) Kesalahan Desain Lainnya: Melepaskan Cincin Fokus

    Singkatnya: pastikan pengguna keyboard selalu dapat melihat di mana mereka saat ini fokus.

    Kami sebutkan :fokus gaya sebelumnya. Mereka adalah indikator visual yang sangat berharga bagi orang-orang yang tidak dapat menggunakan mouse untuk alasan apa pun: mungkin mereka memiliki RSI, atau Parkinson atau Multiple Sclerosis. Secara default, browser menampilkan cincin fokus pada elemen yang saat ini difokuskan. Inilah tautan Beranda di situs pribadi saya, yang difokuskan pada peramban Chromium:

    Cuplikan layar dari fokus default Chromium di sekitar tautan (yang juga merupakan gambar)

    Namun, beberapa orang menganggap ini tidak menyenangkan secara estetika ketika mereka menggunakan mouse dan mematikannya dengan CSS, sehingga membuat situs tidak dapat diakses oleh pengguna keyboard..

    Masukkan standar baru, yang dipelopori oleh Firefox, disebut : fokus-terlihat. Ini akan menerapkan cincin fokus ke elemen jika telah dijangkau oleh keyboard atau perangkat penunjuk non-mouse tetapi tidak menunjukkan apa pun kepada pengguna mouse. Karena hanya didukung di Firefox (saat penulisan), Patrick Lauke menyarankan CSS berikut untuk bermain dengan baik dengan semua browser:

    tombol: fokus {/ * beberapa gaya fokus tombol menarik * /}
    tombol: fokus: tidak (: fokus-terlihat) {
    / * batalkan semua gaya tombol fokus di atas
    jika tombol memiliki fokus tetapi browser biasanya tidak
    tampilkan gaya fokus default * /
    }
    tombol: fokus-terlihat {/ * beberapa bahkan * lebih * gaya fokus tombol menarik * /}

    7) Pengisian Formulir

    Singkatnya: bidang formulir desain yang terlihat seperti bidang formulir, masing-masing terkait dengan label. Jangan nonaktifkan isi-otomatis.

    Mengingat pentingnya formulir untuk situs eCommerce, saya heran betapa banyak formulir yang tidak dapat diakses yang saya lihat. Seringkali ini karena browser lama tidak mengizinkan banyak cara penataan elemen bentuk, sehingga pengembang memalsukannya dengan elemen HTML lainnya. Peramban modern memungkinkan kotak centang yang menarik, tombol radio, komponen dan kotak pilihan kustom, kontrol autocomplete yang dapat diakses dan lainnya.

    IsiOtomatis Adalah Teman Anda

    Mengizinkan peramban untuk mengisi formulir secara otomatis mengharuskan pengunjung melakukan lebih sedikit, sehingga mereka lebih cenderung mengisi formulir dan mendaftar / membeli produk Anda. IsiOtomatis pada Browser: Menyelam Dalam adalah artikel hebat dari eBay tentang hal ini (dan mereka seharusnya tahu).

    Selain itu, autocomplete adalah satu-satunya teknik yang cukup saat ini untuk mencapai kepatuhan AA Kriteria Sukses 1.3.5: Identifikasi Tujuan Input.

    Jadikan Form Fields Terlihat Seperti Form Fields

    Secara default, browser menampilkan kolom input formulir sebagai kotak. Dengan segala cara, gaya ini dengan margin, padding, dan perbatasan, tetapi simpan sebagai kotak. Banyak desainer mengikuti pola Desain Bahan pra-2017 Google menggunakan satu baris bagi pengguna untuk memasukkan teks:

    Input desain material lama, dengan garis horizonatal daripada kotak persegi panjang

    Namun, Google menemukan bahwa garis di bawah bidang teks lama tidak jelas bagi beberapa pengguna, sering bingung dengan pembagi, dan mengubah desain. Di sebuah tes kegunaan dengan 600 peserta, mereka menemukan itu

    bidang teks tertutup dengan bentuk persegi panjang (kotak) berkinerja lebih baik daripada bidang dengan garis terjangkau … Hari ini, bidang teks baru ini muncul di seluruh produk Google dari halaman masuk akun ke formulir Google.

    Jika Anda mempertimbangkan untuk mengadopsi perpustakaan UI Desain Material penuh Google, baca Berhenti menggunakan bidang teks Desain Bahan! oleh Matsuko Friedland untuk melihat apakah itu memenuhi kebutuhan Anda.

    Label Semua Bidang Formulir

    Semua bidang formulir (input teks, kotak centang, tombol radio, slider, dll) harus diberi label. Cara terbaik untuk melakukan ini adalah dengan menggunakan HTML ; seperti yang dikatakan WCAG, “kontrol HTML standar sudah memenuhi kriteria keberhasilan ini ketika digunakan sesuai dengan spesifikasi”.

    Ini demo yang saya buat dari bidang formulir unlabelled vs bidang formulir berlabel. Mereka terlihat identik, tetapi yang teratas tidak memiliki label yang tepat, sedangkan yang kedua tidak. Klik pada label teks yang paling bawah, dan Anda akan melihatnya berfokus pada input yang terkait.

    perbandingan label palsu vs nyata

    Ini membuat memfokuskan input jauh lebih mudah bagi seseorang dengan kesulitan kontrol motor – atau mungkin bagi Anda, mencoba untuk memeriksa kotak centang kecil di layar kecil di kereta bergelombang. Ini juga penting bagi pengguna pembaca layar yang akan menabrak bidang dalam formulir (secara default, hanya tautan dan bidang formulir yang dapat difokuskan dengan menabrak); ketika mereka masuk ke kolom input, pembaca layar akan mengumumkan konten label terkait.

    Kode untuk ini sederhana. Kolom input diberikan ID unik, dan label dikaitkan dengannya menggunakan untuk atribut:

    
    

    Menyembunyikan Label

    Kadang-kadang, Anda mungkin tidak ingin label yang terlihat. Atau perancang tidak, dan Anda tidak ingin perkelahian lain di tempat parkir. Ngomong-ngomong, inilah contoh ketika label yang mengatakan “Cari” sebelum input terasa seperti berlebihan.

    Kolom input, dengan tombol berlabel 'search' sesudahnya

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

    
    

    Kita bisa menggunakannya label aria (yang kami temui sebelumnya ketika berbicara tentang tautan):


    Tetapi selalu lebih baik untuk memilih teks yang terlihat pada halaman karena itu akan diterjemahkan jika halaman dijalankan melalui alat terjemahan, sedangkan teks “tersembunyi” dalam atribut HTML tidak akan seperti itu. (Hat-tip untuk Adrian Roselli untuk tip ini, dari artikel bagusnya Prioritas Saya pada Metode Pelabelan Kontrol.)

    Kesalahan Paling Umum pada Jutaan Halaman Utama

    Kami telah melihat hambatan atas situs eCommerce seperti yang dilaporkan oleh pengguna dengan beberapa bentuk penurunan nilai. Sekarang, mari kita lihat sekumpulan situs yang jauh lebih luas — halaman beranda untuk 1.000.000 situs web teratas, dianalisis secara otomatis oleh WebAIM pada Agustus 2019. 98% halaman yang dianalisis memiliki setidaknya satu kesalahan. Kesalahan paling umum adalah

    1. Teks kontras rendah (86,1%)
    2. Teks alternatif tidak ada untuk gambar (67,9%)
    3. Tautan kosong (58,9%)
    4. Label input formulir tidak ada (53,2%)
    5. Bahasa dokumen tidak ada (30,5%)

    Kami telah menangani kontras rendah, tautan, dan bentuk input di atas. Sekarang mari kita lihat bagaimana kita dapat menghindari kesalahan yang sangat umum lainnya.

    8) Berikan Alternatif Teks untuk Semua Gambar, Video, dan Audio

    Singkatnya: informasi apa pun yang dikomunikasikan melalui gambar atau video harus memiliki padanan teks.

    Setiap harus memiliki teks alternatif (“teks alternatif”) yang dapat dikomunikasikan kepada pengunjung dengan gangguan penglihatan atau mereka yang memiliki bandwidth rendah / paket data mahal yang telah mematikan gambar di browser mereka. Ini termasuk gambar teks.

    Berikut adalah aturan dasarnya:

    • Jika gambar murni dekoratif, itu harus memiliki teks alt kosong: alt = "". (Tapi gambar yang murni dekoratif mungkin harus dalam CSS.)
    • Jika gambar dideskripsikan dalam teks isi, gambar tersebut harus memiliki teks alt kosong (alt = ""), untuk menghindari pengulangan. Tapi hati-hati jika itu sebuah di sebuah
      – Lihat Bagaimana menurut Anda?? untuk lebih.
    • Jika gambar adalah satu-satunya konten tautan (misalnya, logo organisasi Anda dapat diklik untuk membuka beranda) teks alternatif harus menggambarkan tujuan tautan. Sebagai contoh, alt = "halaman rumah".
    • Jangan gunakan font ikon; mereka bisa sangat buruk bagi orang-orang yang menderita disleksia. Jika Anda menggunakannya, mengubahnya menjadi SVG.

    Teks Alternatif Video dan Audio

    Jangan lupa bahwa konten audio membutuhkan teks alternatif untuk orang dengan gangguan pendengaran. Itu berarti transkrip podcast, dan terjemahan pada video. Dan, sekali lagi: jangan putar media secara otomatis.

    9) Tambahkan Bahasa Dokumen yang Tepat

    Singkatnya: beri tahu teknologi alat bantu tahu bahasa tempat teks Anda.

    30% halaman beranda tidak mendeklarasikan bahasa yang mereka tulis, yang dapat membuatnya membingungkan bagi pengguna pembaca layar. Ini penting karena kata “six” diucapkan sangat berbeda jika kalimatnya dalam bahasa Inggris atau Perancis, misalnya.

    Sangat mudah untuk menyelesaikan ini dengan menambahkan atribut lang ke elemen HTML Anda:

    “En” memberi tahu pembaca layar (atau perangkat lunak terjemahan) bahwa halaman ini dalam bahasa Inggris. “Es” adalah bahasa Spanyol, “fr” adalah bahasa Prancis, dan sebagainya. Untuk sebagian besar bahasa, tag bahasa cukup mudah ditentukan. W3C memiliki panduan untuk Memilih Tag Bahasa.

    Jika halaman berisi konten dalam bahasa selain yang dideklarasikan utamanya, tambahkan atribut bahasa ke elemen yang mengelilingi konten itu. Misalnya, dalam halaman yang dinyatakan sebagai bahasa Inggris:

    Jika Anda ingin mengobrol a matador, dalam beberapa keren cabana
    Dan bertemu senoritas berdasarkan skor, Espana por favor

    10) Bantu Pengunjung Berkeliling Konten Anda

    Singkatnya: gunakan elemen tengara HTML untuk membantu pengguna teknologi bantu memahami dan menavigasi konten Anda.

    Ketika pengunjung yang terlihat datang ke halaman Anda, mereka dapat dengan mudah memindai secara visual untuk memahami di mana navigasi berada, dan di mana konten utama dimulai. Pengguna pembaca layar tidak bisa melakukan ini. Namun, HTML5 memberi kami beberapa tag baru untuk menandai area ini, dan teknologi bantuan memiliki pintasan yang dapat melewati (atau melewati) landmark seperti tajuk, footer, navigasi dan sejenisnya.

    Berikut adalah video enam menit yang saya buat dengan Léonie Watson, seorang pengembang web dan pengguna pembaca layar, tentang bagaimana dia menggunakan pembaca layarnya untuk memeriksa semantik ini untuk menavigasi situs pribadi saya:

    • Bungkus konten utama Anda, yaitu, hal-hal yang bukan tajuk, navigasi utama atau catatan kaki, di a
      elemen. Dalam hampir semua kasus, seharusnya hanya ada satu
      per halaman. Semua browser (IE9 +) memungkinkan Anda untuk membuatnya, dan teknologi bantuan tahu apa yang harus dilakukan dengannya.
    • Bungkus tajuk Anda (logo merek, tali pengikat, judul halaman) dalam a
      elemen.
    • Bungkus catatan kaki Anda (hal-hal hukum, detail kontak, pemberitahuan hak cipta, dll) di a
    • Tandai navigasi utama Anda menggunakan
        terbungkus a elemen. Ini dapat bersarang di dalam
        jika itu cocok dengan desain visual halaman.
      • Iklan dan konten yang tidak penting harus dibungkus dengan
      • Jika Anda memiliki lebih dari satu produk / video / item berita / posting blog pada halaman, bungkus masing-masing dalam
        elemen.

      Dalam nya survei pengguna pembaca layar, WebAIM menemukan bahwa 26% pengguna pembaca layar sering atau selalu menggunakan landmark ini saat menavigasi halaman.

      Selain itu, membungkus potongan konten diskrit di

      membantu Apple WatchOS menampilkan konten secara optimal. Lihat artikel saya Nilai praktis HTML semantik untuk lebih lanjut tentang ini.

      11) Gunakan HTML dengan Benar

      Singkatnya: pahami semantik dan perilaku default elemen HTML; gunakan elemen yang tepat untuk konten Anda.

      Tema umum dalam artikel ini telah menggunakan elemen HTML yang benar. Menggunakan sebuah label memiliki perilaku browser bawaan yang memfokuskan bidang input terkait; menggunakan

      lebih disukai daripada

      karena memungkinkan pengguna pembaca layar untuk melompat langsung ke konten penting sambil sepenuhnya tidak mengganggu mereka yang tidak menggunakan pembaca layar.

      Contoh lain menggunakan a

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