Kesalahan popular dalam reka bentuk web sejagat

Dengan "Web 2.0" dan dunia media sosial yang bersaing dan kompetitif, Reka Bentuk Universal banyak kali dilupakan. Ia membingungkan mengapa kerana terdapat banyak sebab sosial, teknikal, kewangan, dan undang -undang yang menyokong amalan reka bentuk sejagat. Mari kita bincangkan beberapa isu yang lebih lazim di laman web hari ini, dan bagaimana ia berkaitan dengan prinsip reka bentuk sejagat utama.

Takeaways Key

Reka bentuk web sejagat sering diabaikan walaupun manfaat sosial, teknikal, kewangan, dan undang -undang. Kesalahan biasa termasuk teks yang sukar dibaca, pautan teks yang tidak jelas, bunyi visual yang berlebihan, kekurangan akses papan kekunci, dan teks alternatif yang hilang untuk imej.
Pembacaan teks adalah penting untuk reka bentuk sejagat. Teks bersaiz kecil dan kontras warna rendah boleh membuat tipografi web sukar dibaca. Menggunakan saiz relatif dalam CSS dan bukannya saiz tetap dapat membantu memastikan pengguna dapat mengubah saiz teks seperti yang diperlukan.
Akses papan kekunci adalah penting untuk reka bentuk sejagat. Banyak laman web gagal menyediakan ini, mewujudkan halangan untuk pengguna. Amalan yang baik termasuk menyediakan: Fokus keadaan dalam CSS Jika: kelas pseudo hover digunakan, dan memastikan bahawa jika peristiwa tetikus direka, akses yang sama untuk papan kekunci disediakan.
Menyediakan teks alternatif untuk imej adalah satu lagi aspek utama reka bentuk sejagat. Jika imej menyediakan kandungan yang relevan, ia mesti disertakan dengan teks alternatif untuk memastikan kebolehcapaian untuk semua pengguna, termasuk mereka yang mengalami masalah visual atau sambungan internet yang perlahan.

Prinsip

Pertama, mari kita semak tujuh prinsip reka bentuk sejagat termasuk beberapa contoh yang berkaitan dengan web. Perlu diingat bahawa prinsip -prinsip ini digunakan, tentu saja, kepada banyak industri di luar komputer dan web, seperti kejuruteraan awam (bangunan, laluan pejalan kaki), hiburan (teater filem, taman tema), dan pengangkutan (bas, kereta api).

1. Penggunaan yang saksama: Berguna dan boleh dipasarkan kepada orang yang mempunyai kebolehan yang pelbagai.
   Contoh: Laman web kerajaan tempatan direka supaya dapat diakses oleh mereka yang menggunakan teknologi bantuan seperti pembaca skrin.
2. Fleksibiliti yang digunakan: Menempatkan pelbagai pilihan dan kebolehan individu.
   Contoh: Reka bentuk laman web penerbangan mengekalkan estetika visual dalam pelbagai saiz paparan komputer.
3. Mudah dan intuitif: Mudah difahami, tanpa mengira pengalaman pengguna, pengetahuan, kemahiran bahasa, atau tahap kepekatan semasa.
   Contoh: Kawalan utama aplikasi web dilabelkan dengan kedua -dua teks dan simbol.
4. Maklumat yang dapat dilihat: Berkomunikasi maklumat yang diperlukan dengan berkesan kepada pengguna, tanpa mengira keadaan ambien atau kebolehan deria pengguna.
   Contoh: Video pengajaran dengan kapsyen menyediakan pilihan untuk membaca dialog sebagai tambahan kepada mendengar.
5. Toleransi untuk kesilapan: Meminimumkan bahaya dan akibat buruk dari tindakan yang tidak disengajakan atau tidak diingini.
   Contoh: Ralat teknikal apabila mengemukakan borang memberikan penjelasan dan pilihan yang jelas untuk meneruskan.
6. Usaha fizikal yang rendah: boleh digunakan dengan cekap dan selesa, dan dengan minimum keletihan.
   Contoh: Reka bentuk laman web mempunyai kontras warna yang mencukupi dan saiz teks yang meminimumkan ketegangan mata.
7. Saiz dan ruang untuk pendekatan dan penggunaan: Saiz dan ruang yang sesuai disediakan untuk pendekatan, jangkauan, manipulasi, dan penggunaan tanpa mengira saiz badan, postur, atau mobiliti pengguna.
   Contoh: Laman web direka supaya pengguna cacat fizikal yang tidak dapat menggunakan tetikus masih boleh mengakses semua kandungan dengan papan kekunci (atau papan kekunci pada skrin!).

Sekarang kita sudah biasa dengan prinsip -prinsip, mari kita periksa beberapa isu reka bentuk web yang berkaitan.

sukar dibaca

Kesilapan popular pertama dalam reka bentuk sejagat adalah kandungan teks yang, kerana reka bentuknya, sukar bagi banyak orang untuk dibaca. Ini berkaitan dengan Prinsip 1, penggunaan yang saksama; dan 6, usaha fizikal yang rendah, khususnya, ketegangan mata. Perhatikan bahawa kognitif kesukaran membaca adalah isu yang berasingan bukan dalam skop artikel ini. Pembacaan yang baik menjadikan laman web lebih mudah digunakan dan estetika menyenangkan. Dengan cara ini, lihat aplikasi Web Readability.com untuk bacaan yang sangat mudah. Jadi apa masalahnya? Teks bersaiz kecil dan kontras warna rendah adalah dua masalah utama yang membuat tipografi web sukar dibaca. Dalam contoh di bawah, kandungan teks utama adalah kelabu di atas latar belakang hitam yang gagal perbezaan kecerahan dan perbezaan warna ujian. Saiz teks ditetapkan kepada 12 piksel yang agak kecil untuk ramai pengguna, termasuk saya sendiri. Apabila mengeluarkan saiz teks dari CSS , penyemak imbas memaparkan saiz lalai yang sedikit lebih besar, dan lebih mudah dibaca! Jadi, bukannya menetapkan teks lalai kepada 12px atau .75em, cuba sedikit lebih tinggi seperti 16px atau .95em. Satu lagi amalan terbaik yang berkaitan dengan teks adalah menggunakan saiz relatif dalam CSS (EMS atau peratusan) daripada saiz tetap (piksel atau mata) untuk membantu memastikan pengguna dapat mengubah saiz teks dalam penyemak imbas seperti yang diperlukan dan mempunyai skala susun atur dengan teks. Garis panduan lain yang baik termasuk menyediakan tajuk mesra pengguna dan jarak jauh.

sukar untuk menentukan pautan teks

Secara lalai, teks hiperpautan diberikan dengan garis bawah. Ini adalah konvensyen lama dalam pelayaran web. Mengeluarkan Konvensyen ini bukan sahaja memecahkan jangkaan pengguna, tetapi boleh membuat pautan tidak dapat diakses oleh mereka yang mempunyai buta warna atau penglihatan yang rendah. Banyak kali menggabungkan masalah ini adalah apabila pautan ditakrifkan dengan warna gelap di kalangan teks hitam. Begitu juga dengan isu di atas, ini berkaitan dengan Prinsip 1 dan 6. Optometrist saya memberitahu saya bahawa bermula pada usia 40 tahun, penglihatan lelaki mula kehilangan keupayaannya untuk membezakan antara warna. Dan budak lelaki itu betul! Banyak laman web mempunyai pautan biru gelap tanpa garis bawah, dan saya pasti perlu menangkis mata saya untuk menentukan pautan teks. Contoh di bawah adalah dari cerita berita. Bolehkah anda melihat pautan teks? Ia agak sukar bagi saya.

Laman web berita seolah -olah terkenal kerana menggunakan pautan biru dengan garis bawah yang dikeluarkan, walaupun dari laman web Telegraph. Untuk menyelesaikan, hanya keluarkan halangan dengan mengembalikan garis bawah. Blog Nomensa adalah contoh yang baik. Secara pilihan, gunakan teks berani, atau denotasi visual lain untuk pautan teks seperti latar belakang berwarna. bunyi visual

Susun atur dan kelebihan kandungan yang bertaburan bukan sahaja tidak menarik secara visual, tetapi tidak boleh digunakan atau tidak dapat diakses. Ini secara langsung berkaitan dengan Prinsip 3, mudah dan intuitif. Di laman web kerajaan tempatan California, ditunjukkan di bawah, terdapat banyak kawasan navigasi, dua imej spanduk subseksyen besar, dan hanya penampilan yang tidak teratur dan bertaburan. Akibatnya, kandungan utama tidak bermula sehingga "lipatan" halaman, yang jelas tidak sesuai. Juga, tidak ada titik fokus, tiada hierarki visual, menyebabkan pengguna lebih cenderung untuk mencari halaman untuk apa yang pengguna perlukan.

Sebaliknya, lihat laman web Kerajaan Australia dan USA.gov; Lebih luas dan teratur yang mewujudkan pengalaman yang lebih mudah digunakan. Lebih banyak contoh yang mencipta "bunyi visual" adalah:

• Navigasi: Terlalu banyak bahagian navigasi pada halaman (seperti contoh di atas) dan terlalu banyak tahap navigasi boleh mengelirukan serta mimpi ngeri reka bentuk.
• Tooltips Redundant: Atribut Tajuk pada Pautan Teks yang mempunyai kandungan yang sama dengan pautan itu sendiri mencipta alat yang menonjol dan tidak diperlukan.
• Imej yang tidak bermakna: Hanya gunakan imej dalam kandungan apabila ia mempunyai nilai; ia harus menyampaikan makna penting kepada kandungan teks.

tiada akses papan kekunci

Akses papan kekunci, keupayaan untuk menavigasi skrin dan berinteraksi dengan objek yang fokus menggunakan papan kekunci sahaja, adalah penting. Malangnya, banyak laman web tidak menyediakan ini. Lebih tepatnya dinyatakan, banyak laman web membuat halangan kepada pengguna papan kekunci sejak HTML sememangnya boleh diakses oleh papan kekunci. Jika anda merancang untuk acara tetikus, pastikan anda menyediakan akses yang sama untuk papan kekunci. Ini mewujudkan kemerdekaan peranti; Itulah perkara yang baik! Isu ini berkaitan dengan Prinsip 1, penggunaan yang saksama; dan 2, fleksibiliti yang digunakan. Apabila pengekodan laman web, terdapat beberapa amalan yang baik untuk dipertimbangkan. Dalam CSS , jika: kelas pseudo hover digunakan, pastikan bahawa: keadaan fokus juga disediakan. Juga, seseorang tidak boleh mengeluarkan garis besar pada elemen utama, iaitu {garis besar: 0} (Berhati -hati: Kebanyakan CSS Reset Stylesheets Keluarkan garis besar jangkar - pastikan untuk menambahnya kembali dalam CSS anda sendiri kemudian!). Jika ia benar -benar perlu, maka beberapa jenis kesan visual mesti menggantikannya. Dalam JavaScript, jangan gunakan pengendali klik dua kali (ondblclick) kerana papan kekunci tidak dapat melaksanakan tingkah laku ini. Sekiranya pengendali OnMouseover dan Onmouseout JavaScript digunakan, acara OnFocus dan OnBlur juga mesti dilaksanakan untuk membolehkan akses papan kekunci.

teks alternatif yang hilang untuk gambar

Jika imej menyediakan kandungan yang relevan, ia mesti disertakan dengan teks alternatif. Apabila imej tidak dapat dilihat-seperti yang akan berlaku dengan pengguna buta, pengguna band rendah, dan pautan imej yang rosak-maka "kandungan" imej masih perlu diakses. Isu ini, seperti di atas, berkaitan dengan Prinsip 1 dan 2. Kaedah yang paling popular untuk menyediakan teks alternatif adalah memasuki teks dalam atribut alt elemen imej. Banyak imej seperti carta grafik, komik, dan maklumat grafik di web tidak memberikan "keterangan panjang" dalam teks alt dan oleh itu menghalang banyak pengguna kandungannya. Blog Web Ax membetulkan beberapa contoh ini dalam siri "Memperbaiki Alt". Untuk lebih lanjut mengenai deskripsi panjang, lihat artikel dua bahagian saya Longdesc & penyelesaian penerangan imej panjang yang lain.

Berikut adalah beberapa garis panduan untuk teks alternatif:

• Jika teks tertanam dalam imej, tambahkannya ke atribut alt.
• Jika imej hanya hiasan, ia harus mengandungi atribut alt kosong. (mis. ).
• Untuk beberapa imej, seperti carta dan karya seni, deskripsi yang lebih lama diperlukan.
• Jika imej dengan pautan mengandungi kandungan, maka teks alternatif harus menerangkan fungsi pautan, bukan imej itu sendiri.

Takeaway

Prinsip Reka Bentuk Tujuh Universal adalah sumber yang sangat baik apabila mereka bentuk laman web, serta produk lain. Orang menggunakan komputer secara berbeza, dan mengakses web secara berbeza. Dengan mengekalkan fikiran ini, pereka web akan lebih berjaya dalam mewujudkan laman web yang menarik, mesra pengguna dan boleh diakses oleh semua orang.

bacaan selanjutnya

• Reka Bentuk Universal untuk Aplikasi Web (O'Reilly Media) oleh Wendy Chisholm, Matt May.
• kebolehgunaan sejagat, buku dalam talian oleh Sarah Horton.
• Reka Bentuk Universal Arahan, Program Universiti Washington Do-It.
• Prinsip Reka Bentuk Universal, Kolej Reka Bentuk, North Carolina State University.
• Fail Reka Bentuk Universal: Merancang untuk Orang -orang dari Semua Umur dan Kebolehan (Jurnal) oleh Molly Story, James Mueller, Ron Mace.

soalan yang sering ditanya mengenai reka bentuk web sejagat

Apakah reka bentuk web sejagat dan mengapa penting? Ia penting kerana ia memastikan bahawa semua orang, termasuk orang kurang upaya, boleh mengakses dan menggunakan kandungan web dengan berkesan. Ia juga meningkatkan pengalaman pengguna secara keseluruhan, menjadikan laman web lebih mesra pengguna dan lebih mudah untuk menavigasi. Sebaliknya, Reka Bentuk Web Universal mengambil kira keperluan pelbagai pengguna, termasuk mereka yang kurang upaya. Ia menekankan kebolehcapaian, kebolehgunaan, dan keterangkuman, memastikan bahawa kandungan web boleh diakses dan boleh digunakan oleh semua orang, tanpa mengira kebolehan mereka atau peranti yang mereka gunakan. Garis panduan dan piawaian aksesibiliti. Kesalahan ini boleh membawa kepada pengalaman pengguna yang lemah dan mengehadkan kebolehcapaian dan kebolehgunaan laman web.

Bagaimana saya boleh menjadikan laman web saya lebih mudah diakses dan mesra pengguna?

Terdapat beberapa cara untuk menjadikan laman web anda lebih mudah dan mesra pengguna. Ini termasuk menggunakan bahasa yang jelas dan mudah, menyediakan teks alternatif untuk imej, memastikan laman web ini boleh dilayari dengan papan kekunci, menggunakan susun atur yang logik dan konsisten, dan memberikan kapsyen untuk video. Ia juga penting untuk menguji laman web anda pada peranti dan pelayar yang berbeza untuk memastikan ia berfungsi dengan baik untuk semua pengguna. Ia memberi kesan kepada reka bentuk web sejagat kerana pelayar yang berbeza boleh mentafsir dan memaparkan kandungan web secara berbeza. Oleh itu, penting untuk menguji laman web anda pada penyemak imbas yang berbeza untuk memastikan ia berfungsi dengan baik dan kelihatan baik pada mereka semua. Ciri -ciri ini menjadikan laman web ini lebih mudah diakses dan boleh digunakan untuk semua pengguna, termasuk mereka yang kurang upaya. Dengan membuat laman web mereka lebih mudah diakses dan mesra pengguna, perniagaan dapat mencapai khalayak yang lebih luas, termasuk orang kurang upaya. Ini boleh membawa kepada peningkatan lalu lintas, kadar penukaran yang lebih tinggi, dan kesetiaan pelanggan yang lebih baik. Ini termasuk tutorial dalam talian, webinar, buku, dan kursus. Sesetengah organisasi yang bereputasi yang menyediakan sumber -sumber mengenai reka bentuk web sejagat termasuk Konsortium Web Web Wide Web (W3C), Inisiatif Kebolehcapaian Web (WAI), dan Pusat Kebangsaan mengenai Hilang Upaya dan Akses kepada Pendidikan (NCDAE). Ini mungkin termasuk menambah teks alternatif untuk imej, menjadikan laman web dilayari dengan papan kekunci, menggunakan susun atur yang logik dan konsisten, dan memberikan kapsyen untuk video. Ia juga penting untuk menguji laman web pada peranti dan pelayar yang berbeza untuk memastikan perubahan telah meningkatkan pengalaman pengguna.

Apakah masa depan reka bentuk web sejagat?

Masa depan reka bentuk web sejagat mungkin melibatkan lebih banyak penekanan terhadap akses dan keterangkuman, kerana lebih banyak perniagaan mengiktiraf pentingnya membuat laman web mereka dapat diakses oleh semua pengguna. Kemajuan dalam teknologi, seperti kecerdasan buatan dan pembelajaran mesin, juga boleh memainkan peranan dalam membuat laman web lebih mudah dan mesra pengguna. Di samping itu, mungkin terdapat lebih banyak peraturan dan piawaian untuk memastikan laman web boleh diakses dan boleh digunakan oleh semua orang.

Atas ialah kandungan terperinci Kesalahan popular dalam reka bentuk web sejagat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!