Get best of the week

QA dan perannya dalam menciptakan sumber daya bagi penyandang cacat



Dalam artikel ini saya ingin menarik perhatian pada kenyataan bahwa masalah aksesibilitas situs dan aplikasi untuk orang-orang penyandang cacat lebih akut daripada yang terlihat. Di bawah kucing adalah daftar alat yang berguna untuk menguji dan mengaudit beberapa situs terkenal.

Pertama, mari kita tentukan persyaratannya.

HIA - pilihan kesehatan terbatas. Orang-orang semacam itu mungkin memiliki penyimpangan dalam perkembangan fisik dan / atau mental dari spektrum yang sangat berbeda. Menurut laporan WHO (World Health Organization) tentang HIA 2018:

  • Lebih dari 1 miliar orang, sekitar 15% dari populasi dunia, memiliki beberapa bentuk kecacatan.
  • Dari 110 hingga 190 juta orang dewasa memiliki kesulitan mobilitas, masalah penglihatan / pendengaran, dll.
  • Lebih dari 12 juta orang cacat tinggal di Rusia (kebanyakan dari mereka adalah orang dewasa).

Berkat teknologi, pengguna dengan disabilitas dapat lebih atau kurang sepenuhnya bekerja, mengembangkan dan bersenang-senang, memesan pakaian dan produk, secara umum, melakukan segalanya seperti orang lain.
Untuk mempermudah orang-orang ini di Internet, Anda harus lebih memperhatikan ketersediaan layanan dan produk digital.

Dan inilah QA dan apa yang bisa kita lakukan


Tujuan utama QA adalah untuk memastikan kualitas suatu layanan atau produk. Saya ingin konsep "kualitas" semakin masuk ke dalam "aksesibilitas". Menurut manual yang saya tulis di bawah ini, aksesibilitas adalah implementasi konten di web sedemikian rupa sehingga pengguna dengan jangkauan seluas mungkin dapat bekerja dengannya, termasuk penyandang disabilitas.

Ngomong-ngomong, rekomendasi ini akan membantu membuat situs lebih mudah diakses bagi pengguna yang tidak memiliki batasan tertentu. Bagaimana saya bisa berdebat untuk pengembangan produk dalam percakapan dengan klien?

  • Banyak penyandang cacat ada di Internet setiap hari, dan revisi semacam itu akan memungkinkan mereka untuk menggunakan produk tanpa masalah,
  • Adaptasi akan membantu produk menonjol di antara pesaing,
  • Produk yang diadaptasi dapat secara positif memengaruhi jumlah pengguna dan memengaruhi peringkat perusahaan secara keseluruhan,
  • , , , . ,
  • “accessibility id” ( iOS) iOS ,
  • , .

?


Kriteria terperinci untuk kepatuhan produk dijelaskan dalam Panduan Aksesibilitas Konten Web (WCAG).

Dari utama: ada tiga tingkatan kepatuhan yang bergantung pada situasi dan user kelompok tertentu: yang terendah , menengah dan tertinggi . Tingkatan dibagi menjadi empat prinsip utama: persepsi, kontrol, kelayakan, keandalan.

Masing-masing prinsip mencakup persyaratan konten yang berbeda, misalnya, penting untuk menyediakan versi teks dari elemen non-teks, untuk memastikan kontrol penuh dari keyboard saja, atau untuk menghindari elemen desain yang berbahaya bagi kesehatan. Daftar lengkap persyaratan level dapat ditemukan di WCAG 2.1 yang sama.

Di Internet, paling sering Anda dapat menemukan panel pengaturan tampilan untuk orang-orang cacat. Ngomong-ngomong, ada semacam cerita dengan panel HIA. Anda masih dapat memeriksa bagaimana implementasinya cocok dengan tata letak. Tetapi bagaimana memahami seberapa baik seorang tunanetra membaca informasi ini atau itu sudah menjadi pertanyaan.

Misalnya, bagaimana Anda tahu jika seseorang dengan deuteranomaly ( kondisi penglihatan yang ditandai dengan sedikit penurunan sensitivitas terhadap gelombang spektrum hijau ) normal untuk melihat elemen halaman? Untuk mengatasi masalah ini, alat NoCoffee cocok.

Nocoffee- Ekstensi gratis untuk browser (Chrome, Firefox), simulator cacat visual. Sangat mudah digunakan dan efektif. Alat ini populer, memperoleh banyak ulasan positif, lebih dari 20.000 unduhan pada platform yang berbeda dengan peringkat rata-rata tinggi 4 dari 5.
gambar
Bagaimana NoCoffee bekerja

dengan NoCoffee, Anda dapat memeriksa tampilan untuk orang-orang dengan semua jenis kebutaan warna: protanomaly, protanopia, deuteranomialia, deuteranopia, tritanomaly , tritanopia, achromatopsia, tetrachromatia. Dimungkinkan untuk mensimulasikan berbagai cacat visual / penyakit mata dan faktor eksternal lainnya: ketajaman visual yang rendah, katarak, kontras puncak rendah, nystagmus, cacat bidang visual.

Saya beruntung (atau tidak beruntung), saudara lelaki saya menderita deuteranomaly, saya memintanya untuk menggambarkan warna yang dia lihat di situs tempat saya menerapkan filter deuteranomaly. Setelah itu, saya memeriksa hasil kami, dan hasilnya ternyata sama, plus atau minus.

Contoh panel "pengaturan untuk HIA"


Dana Pensiun Rusia

gambar

Di portal Dana Pensiun "panel pengaturan HIA" ada beberapa bug tata letak. Tetapi ada nilai tambah: ia memiliki pemain sendiri untuk memainkan teks yang dipilih. Ini adalah alternatif untuk pembaca layar. Pembaca layar adalah program membaca dari layar komputer atau smartphone, yang dirancang untuk tunanetra dan tunanetra. Dia menyuarakan teks, elemen antarmuka, dan juga memberikan umpan balik suara dan getaran.

Situs ini berfokus pada karya pembaca layar, dan sangat disesuaikan untuk pekerjaan mereka, tetapi lebih pada nanti.

VTB

gambar

Bank VTB Bank telah menerapkan "panel pengaturan HIA", ada beberapa masalah dengan menampilkan elemen ketika mengubah pengaturan panel ini sendiri. Tetapi secara umum, perlu membayar upeti - Saya tidak menemukan fungsi seperti itu di bank lain.

Masyarakat Penyandang Cacat All-Rusia

gambar

Tetapi di situs web Masyarakat Penyandang Cacat All-Rusia, “panel pengaturan HIA” ternyata, tetapi kemampuannya minimal dan ada masalah dalam tata letak. Tentu saja, saya ingin sumber daya seperti itu lebih disesuaikan bagi penggunanya.

WorldSkills Ticket to the Future

gambar

Kami bekerja di situs web WorldSkills Ticket to the Future. Di sini kami menerapkan pengaturan untuk menampilkan elemen halaman untuk penyandang cacat. Selain mengubah warna elemen, ada juga desain terpisah (berbeda dari standar) untuk menampilkan elemen saat mengganti warna.

Selain menyesuaikan tema warna, pada panel HIA biasanya ada fungsi untuk meningkatkan ukuran teks, fungsi menghidupkan / mematikan tampilan gambar ( ini ada dalam semua contoh di atas ).

Yang kurang umum adalah kemampuan untuk menyesuaikan tampilan teks: interval antara karakter dan font serif, pengaturan tersebut dirancang untuk orang dengan disleksia ( disleksia adalah ketidakmampuan belajar spesifik yang berasal dari neurologis, ditandai oleh kesulitan dengan pengenalan kata yang fasih atau lancar dan kemampuan membaca dan menulis yang tidak memadai ) . Ini, kebetulan, dilaksanakan di situs web VTB dan Dana Pensiun Rusia.

Sayangnya, tidak ada simulator gangguan neurologis dan praktis satu-satunya cara untuk memeriksa kebenaran tampilan teks dengan serif atau dengan peningkatan interval antar karakter adalah dengan memeriksa fungsionalitas seseorang dengan disleksia.

Kembali ke pengujian aksesibilitas


Alat pengujian lain yang bagus adalah kapak .

kapak dirancang untuk memverifikasi kepatuhan situs atau aplikasi dengan pedoman WCAG 2. Ini adalah ekstensi untuk peramban, saat ini diinstal lebih dari 100.000 kali dan memiliki peringkat 4,5.

Cara Kerja Kapak

Alat ini mudah digunakan. Anda harus menginstal ekstensi di browser. Manajemen dilakukan dari panel pengembang - setelah instalasi, tab kapak baru akan muncul. Ketika Anda beralih ke sana, kita akan melihat banyak iklan, panggilan untuk "membeli versi pro", tetapi yang paling penting adalah tombol analisis.

Analisis dari salah satu halaman Layanan Negara mengungkapkan 10 ketidakpatuhan dengan persyaratan WCAG. Kita dapat mengasumsikan bahwa situs tersebut diadaptasi dengan baik untuk para penyandang cacat:
gambar

Tetapi ketika menganalisis salah satu halaman FIU, 29 inkonsistensi ditemukan. Perbaikan jelas diperlukan di sini, terutama mengingat fakta bahwa para penyandang cacat dan orang lanjut usia menggunakan sumber daya secara tepat.
gambar

Situs Masyarakat Penyandang Cacat All-Rusia memiliki 69 inkonsistensi dengan rekomendasi WCAG.
gambar

Apa yang kita dapatkan setelah menganalisis kapak:
  • . : , WCAG 2.
  • .


Untuk menyesuaikan situs kepada orang-orang dengan masalah dengan keterampilan motorik halus dan mereka yang tidak dapat menggunakan mouse, perlu untuk menerapkan elemen halaman sehingga pengguna dapat beralih di antara mereka dengan tombol Tab.

Contoh yang baik adalah "Gosulugi":
gambar

Gambar menunjukkan bagaimana cara menelusuri elemen halaman secara berurutan dan dalam urutan yang benar menggunakan tombol Tab.

Situs Masyarakat Penyandang Cacat Semua-Rusia kurang diadaptasi untuk beralih dengan tombol Tab.
gambar

Tidak ada tampilan elemen halaman yang disorot. Transisi antar elemen dilakukan secara bertahap dan tidak konsisten. Ini dapat sangat mempersulit kehidupan pengguna dengan disabilitas.

Operasi pembaca layar yang benar terutama dipengaruhi oleh: tidak menggunakan atribut alt untuk gambar, tag untuk header, menggunakan elemen untuk menandai formulir, tooltips, dan banyak lagi.

Semua masalah di atas akan membantu menemukan kapak. Jika Anda menghilangkan sebagian besar masalah yang diidentifikasi oleh kapak saat menganalisis halaman atau aplikasi web, pembaca layar akan bekerja dengan benar. Secara alami, hasil yang ideal tidak akan pernah ada, tetapi perbedaan antara hasil tes membaca teks oleh pembaca layar sebelum memperbaiki masalah yang diidentifikasi oleh kapak, dan setelah itu akan sangat besar.

Bahan yang berguna


Pedoman Aksesibilitas Konten Web (WCAG) 2.0 - dokumen peraturan berdasarkan perangkat lunak mana yang dikembangkan untuk penyandang cacat;

WebLind adalah sumber yang bagus tentang pengembangan situs web untuk orang-orang tunanetra;

Pedoman - sumber daya untuk pengembang, manajer, desainer tentang implementasi situs untuk penyandang cacat.

Total


Secara umum, bidang untuk meningkatkan sumber daya dalam hal aksesibilitas sangat besar. Saya berharap bahwa segera akan ada lebih banyak alat seperti itu, serta QA dan pengembang yang dapat menjelaskan kepada bisnis perlunya adaptasi seperti itu. Ini adalah hal yang baik untuk semua orang: penyandang cacat dapat sepenuhnya menggunakan sumber daya, dan bisnis akan menerima pengguna baru.

Bagaimana situs atau aplikasi Anda dapat diakses? Apakah Anda menggunakan alat pengujian?

More articles:


All Articles