Merancang Untuk Aksesibilitas Dan Inklusi

"Aksesibilitas diselesaikan pada tahap desain." Ini adalah ungkapan yang Daniel Na dan timnya dengar berulang kali saat menghadiri konferensi. Mendesain untuk aksesibilitas berarti inklusif terhadap kebutuhan pengguna Anda . Ini termasuk pengguna target Anda, pengguna di luar demografi target Anda, pengguna dengan disabilitas, dan bahkan pengguna dari budaya dan negara yang berbeda. Memahami kebutuhan tersebut adalah kunci untuk menciptakan pengalaman yang lebih baik dan lebih mudah diakses bagi mereka.

Salah satu masalah paling umum saat mendesain untuk aksesibilitas adalah mengetahui kebutuhan apa yang harus Anda desain. Bukannya kami sengaja mendesain untuk mengecualikan pengguna, hanya saja "kami tidak tahu apa yang tidak kami ketahui". Jadi, dalam hal aksesibilitas, ada banyak hal yang perlu diketahui.

Bagaimana kita memahami banyak sekali pengguna dan kebutuhan mereka? Bagaimana kita bisa memastikan bahwa kebutuhan mereka terpenuhi dalam desain kita? Untuk menjawab pertanyaan-pertanyaan ini, saya telah menemukan bahwa akan sangat membantu untuk menerapkan teknik analisis kritis dalam melihat desain melalui lensa yang berbeda.

“Desain [dapat diakses] yang baik terjadi ketika Anda melihat [desain] Anda dari berbagai perspektif, atau lensa.”

— Seni Desain Game: Buku Lensa

Lensa adalah "filter yang dipersempit di mana suatu topik dapat dipertimbangkan atau diperiksa." Sering digunakan untuk memeriksa karya seni, sastra, atau film, lensa meminta kita untuk meninggalkan pandangan dunia kita dan sebaliknya melihat dunia melalui konteks yang berbeda.

Misalnya, melihat seni melalui lensa sejarah meminta kita untuk memahami “iklim sosial, politik, ekonomi, budaya, dan/atau intelektual saat itu.” Ini memungkinkan kita untuk lebih memahami pengaruh dunia apa yang memengaruhi seniman dan bagaimana hal itu membentuk karya seni dan pesannya.

Lensa aksesibilitas adalah filter yang dapat kita gunakan untuk memahami bagaimana berbagai aspek desain memengaruhi kebutuhan pengguna. Setiap lensa menyajikan serangkaian pertanyaan untuk ditanyakan kepada diri sendiri selama proses desain. Dengan menggunakan lensa ini, Anda akan menjadi lebih inklusif terhadap kebutuhan pengguna Anda, memungkinkan Anda merancang pengalaman pengguna yang lebih mudah diakses untuk semua.

Lensa Aksesibilitas adalah:

• Lensa Animasi dan Efek
• Lensa Audio dan Video
• Lensa Warna
• Lensa Kontrol
• Lensa Font
• Lensa Gambar dan Ikon
• Lensa Keyboard
• Lensa Tata Letak
• Lensa Kejujuran Material
• Lensa Keterbacaan
• Lensa Struktur
• Lensa Waktu

Anda harus tahu bahwa tidak setiap lensa akan berlaku untuk setiap desain. Sementara beberapa dapat berlaku untuk setiap desain, yang lain lebih situasional. Apa yang bekerja paling baik dalam satu desain mungkin tidak bekerja untuk yang lain.

Pertanyaan yang diberikan oleh setiap lensa hanyalah alat untuk membantu Anda memahami masalah apa yang mungkin muncul. Seperti biasa, Anda harus menguji desain Anda dengan pengguna untuk memastikannya dapat digunakan dan diakses oleh mereka.

Lensa Animasi Dan Efek

Animasi yang efektif dapat membantu menghidupkan halaman dan merek, memandu fokus pengguna, dan membantu mengarahkan pengguna. Tapi animasi adalah pedang bermata dua. Penyalahgunaan animasi tidak hanya dapat menyebabkan kebingungan atau gangguan, tetapi juga berpotensi mematikan bagi sebagian pengguna.

Efek berkedip cepat (didefinisikan sebagai berkedip lebih dari tiga kali per detik) atau efek dan pola intensitas tinggi dapat menyebabkan kejang, yang dikenal sebagai 'epilepsi fotosensitif'. Fotosensitifitas juga dapat menyebabkan sakit kepala, mual, dan pusing. Pengguna dengan epilepsi fotosensitif harus sangat berhati-hati saat menggunakan web karena mereka tidak pernah tahu kapan sesuatu dapat menyebabkan kejang.

Efek lain, seperti efek paralaks atau gerakan, dapat menyebabkan beberapa pengguna merasa pusing atau mengalami vertigo karena sensitivitas vestibular. Sistem vestibular mengontrol keseimbangan dan indra gerak seseorang. Ketika sistem ini tidak berfungsi sebagaimana mestinya, itu menyebabkan pusing dan mual.

“Bayangkan sebuah dunia di mana giroskop internal Anda tidak berfungsi dengan baik. Sangat mirip dengan mabuk, hal-hal tampaknya bergerak dengan sendirinya, kaki Anda tampaknya tidak pernah cukup stabil di bawah Anda, dan indra Anda bergerak lebih cepat atau lebih lambat dari tubuh Anda.”

— A Primer Untuk Gangguan Vestibular

Animasi atau gerakan yang konstan juga dapat mengganggu pengguna, terutama bagi pengguna yang sulit berkonsentrasi. GIF sangat bermasalah karena mata kita tertuju pada gerakan, membuatnya mudah terganggu oleh apa pun yang terus diperbarui atau bergerak.

Ini bukan untuk mengatakan bahwa animasi itu buruk dan Anda tidak boleh menggunakannya. Sebaliknya Anda harus memahami mengapa Anda menggunakan animasi dan bagaimana merancang animasi yang lebih aman. Secara umum, Anda harus mencoba mendesain animasi yang mencakup jarak kecil, mencocokkan arah dan kecepatan objek bergerak lainnya (termasuk gulir), dan relatif kecil untuk ukuran layar.

Anda juga harus memberikan kontrol atau opsi untuk memenuhi pengalaman bagi pengguna. Misalnya, Slack memungkinkan Anda menyembunyikan gambar animasi atau emoji baik sebagai pengaturan global maupun per gambar.

Untuk menggunakan Lens of Animation and Effects , tanyakan pada diri Anda pertanyaan-pertanyaan ini:

• Apakah ada efek yang bisa menyebabkan kejang?
• Apakah ada animasi atau efek yang dapat menyebabkan pusing atau vertigo melalui penggunaan gerakan?
• Apakah ada animasi yang dapat mengganggu dengan terus bergerak, berkedip, atau memperbarui otomatis?
• Apakah mungkin untuk memberikan kontrol atau opsi untuk menghentikan, menjeda, menyembunyikan, atau mengubah frekuensi animasi atau efek apa pun?

Lensa Audio Dan Video

Memutar video dan audio secara otomatis bisa sangat mengganggu. Mereka tidak hanya memecah konsentrasi pengguna, tetapi juga memaksa pengguna untuk memburu media yang menyinggung dan menonaktifkan atau menghentikannya. Sebagai aturan umum, jangan memutar media secara otomatis.

“Gunakan putar otomatis dengan hemat. Autoplay dapat menjadi alat interaksi yang kuat, tetapi juga dapat mengganggu pengguna jika suara yang tidak diinginkan diputar atau mereka menganggap penggunaan sumber daya yang tidak perlu (misalnya data, baterai) sebagai akibat dari pemutaran video yang tidak diinginkan.”

— Pedoman Google Autoplay

Anda sekarang mungkin bertanya, "Tetapi bagaimana jika saya memutar video secara otomatis di latar belakang tetapi tetap tidak membisukannya?" Meskipun menggunakan video sebagai latar belakang mungkin menjadi tren yang berkembang dalam desain web saat ini, video latar belakang mengalami masalah yang sama seperti GIF dan animasi bergerak yang konstan: mereka dapat mengganggu. Karena itu, Anda harus memberikan kontrol atau opsi untuk menjeda atau menonaktifkan video.

Bersama dengan kontrol, video harus memiliki transkrip dan/atau subtitel sehingga pengguna dapat menggunakan konten dengan cara yang paling sesuai untuk mereka. Pengguna tunanetra atau yang lebih suka membaca daripada menonton video memerlukan transkrip, sedangkan pengguna yang tidak dapat atau tidak ingin mendengarkan video memerlukan subtitle.

Untuk menggunakan Lensa Audio dan Video , tanyakan pada diri Anda pertanyaan berikut:

• Apakah ada audio atau video yang dapat mengganggu pemutaran otomatis?
• Apakah mungkin memberikan kontrol untuk menghentikan, menjeda, atau menyembunyikan audio atau video apa pun yang diputar otomatis?
• Apakah video memiliki transkrip dan/atau subtitel?

Lensa Warna

Warna memegang peranan penting dalam sebuah desain. Warna membangkitkan emosi, perasaan, dan ide. Warna juga dapat membantu memperkuat pesan dan persepsi merek. Namun kekuatan warna hilang ketika pengguna tidak dapat melihatnya atau merasakannya secara berbeda.

Buta warna mempengaruhi sekitar 1 dari 12 pria dan 1 dari 200 wanita. Deuteranopia (buta warna merah-hijau) adalah bentuk paling umum dari buta warna, mempengaruhi sekitar 6% pria. Pengguna dengan buta warna merah-hijau biasanya menganggap warna merah, hijau, dan jeruk sebagai kekuningan.

Makna warna juga bermasalah bagi pengguna internasional. Warna memiliki arti yang berbeda di berbagai negara dan budaya. Dalam budaya Barat, merah biasanya digunakan untuk mewakili tren negatif dan tren positif hijau, tetapi sebaliknya berlaku dalam budaya Timur dan Asia.

Karena warna dan artinya dapat hilang baik karena perbedaan budaya atau buta warna, Anda harus selalu menambahkan pengenal non-warna. Pengidentifikasi seperti ikon atau deskripsi teks dapat membantu menjembatani perbedaan budaya sementara pola bekerja dengan baik untuk membedakan warna.

Warna yang terlalu jenuh, warna kontras yang tinggi, dan bahkan warna kuning saja bisa membuat tidak nyaman dan meresahkan bagi sebagian pengguna, terutama mereka yang memiliki spektrum autisme. Sebaiknya hindari konsentrasi tinggi dari jenis warna ini untuk membantu pengguna tetap nyaman.

Kontras yang buruk antara warna latar depan dan latar belakang membuat lebih sulit untuk dilihat oleh pengguna dengan penglihatan rendah, menggunakan monitor kelas bawah, atau yang hanya berada di bawah sinar matahari langsung. Semua teks, ikon, dan indikator fokus apa pun yang digunakan untuk pengguna yang menggunakan keyboard harus memenuhi rasio kontras minimum 4,5:1 dengan warna latar belakang.

Anda juga harus memastikan desain dan warna Anda bekerja dengan baik di berbagai pengaturan mode Kontras Tinggi Windows. Perangkap umum adalah bahwa teks menjadi tidak terlihat pada latar belakang mode kontras tinggi tertentu.

Untuk menggunakan Lens of Color , tanyakan pada diri Anda pertanyaan-pertanyaan ini:

• Jika warna dihilangkan dari desain, makna apa yang akan hilang?
• Bagaimana saya bisa memberikan makna tanpa menggunakan warna?
• Apakah ada warna yang terlalu jenuh atau memiliki kontras tinggi yang dapat menyebabkan pengguna menjadi terlalu bersemangat atau tidak nyaman?
• Apakah warna latar depan dan latar belakang semua teks, ikon, dan indikator fokus memenuhi pedoman rasio kontras 4,5:1?

Lensa Kontrol

Kontrol, juga disebut 'konten interaktif,' adalah elemen UI apa pun yang dapat berinteraksi dengan pengguna, baik itu tombol, tautan, input, atau elemen HTML apa pun dengan pendengar acara. Kontrol yang terlalu kecil atau terlalu berdekatan dapat menyebabkan banyak masalah bagi pengguna.

Kontrol kecil sulit untuk diklik untuk pengguna yang tidak dapat akurat dengan penunjuk, seperti mereka yang gemetar, atau mereka yang mengalami penurunan ketangkasan karena usia. Ukuran default kotak centang dan tombol radio, misalnya, dapat menimbulkan masalah bagi pengguna yang lebih tua. Bahkan ketika label disediakan yang dapat diklik, tidak semua pengguna tahu bahwa mereka dapat melakukannya.

Kontrol yang terlalu berdekatan dapat menyebabkan masalah bagi pengguna layar sentuh. Jari-jarinya besar dan sulit untuk tepat. Menyentuh kontrol yang salah secara tidak sengaja dapat menyebabkan frustrasi, terutama jika kontrol itu membuat Anda menjauh atau membuat Anda kehilangan konteks.

Kontrol yang bersarang di dalam kontrol lain juga dapat menyebabkan kesalahan sentuh. Tidak hanya itu tidak diizinkan dalam spesifikasi HTML, itu juga memudahkan untuk secara tidak sengaja memilih kontrol induk alih-alih yang Anda inginkan.

Untuk memberi pengguna ruang yang cukup untuk memilih kontrol secara akurat, ukuran minimum yang disarankan untuk kontrol adalah 34 kali 34 piksel independen perangkat, tetapi Google merekomendasikan setidaknya 48 kali 48 piksel, sedangkan spesifikasi WCAG merekomendasikan setidaknya 44 kali 44 piksel. Ukuran ini juga mencakup bantalan apa pun yang dimiliki kontrol. Jadi kontrol secara visual bisa menjadi 24 kali 24 piksel tetapi dengan tambahan 10 piksel padding di semua sisi akan membuatnya menjadi 44 kali 44 piksel.

Juga disarankan agar kontrol ditempatkan cukup jauh untuk mengurangi kesalahan sentuhan. Microsoft merekomendasikan setidaknya 8 piksel spasi sementara Google merekomendasikan kontrol spasi setidaknya 32 piksel terpisah.

Kontrol juga harus memiliki label teks yang terlihat. Pembaca layar tidak hanya memerlukan label teks untuk mengetahui apa yang dilakukan kontrol, tetapi juga ditunjukkan bahwa label teks membantu semua pengguna lebih memahami tujuan kontrol. Ini sangat penting untuk input formulir dan ikon.

Untuk menggunakan Lens of Controls , tanyakan pada diri Anda pertanyaan-pertanyaan ini:

• Apakah ada kontrol yang tidak cukup besar untuk disentuh seseorang?
• Apakah ada kontrol yang terlalu berdekatan sehingga mudah untuk menyentuh yang salah?
• Apakah ada kontrol di dalam kontrol lain atau wilayah yang dapat diklik?
• Apakah semua kontrol memiliki label teks yang terlihat?

Lensa Font

Pada hari-hari awal web, kami merancang halaman web dengan ukuran font antara 9 dan 14 piksel. Ini bekerja dengan baik saat itu karena monitor memiliki ukuran layar yang relatif dikenal. Kami merancang dengan berpikir bahwa jendela browser adalah konstan, sesuatu yang tidak dapat diubah.

Teknologi saat ini sangat berbeda dengan 20 tahun yang lalu. Saat ini, browser dapat digunakan di perangkat apa pun dengan ukuran berapa pun, mulai dari jam tangan kecil hingga layar 4K yang besar. Kami tidak dapat lagi menggunakan ukuran font tetap untuk mendesain situs kami. Ukuran font harus responsif seperti desain itu sendiri.

Tidak hanya ukuran font yang harus responsif, tetapi desain harus cukup fleksibel untuk memungkinkan pengguna menyesuaikan ukuran font, tinggi baris, atau spasi huruf ke tingkat membaca yang nyaman. Banyak pengguna menggunakan CSS khusus yang membantu mereka mendapatkan pengalaman membaca yang lebih baik.

Font itu sendiri harus mudah dibaca. Anda mungkin bertanya-tanya apakah satu font lebih mudah dibaca daripada yang lain. Kebenaran dari masalah ini adalah bahwa font tidak benar-benar membuat perbedaan untuk keterbacaan. Sebaliknya, gaya fontlah yang memainkan peran penting dalam keterbacaan font.

Gaya font dekoratif atau kursif lebih sulit dibaca bagi banyak pengguna, tetapi terutama bermasalah bagi pengguna dengan disleksia. Ukuran font kecil, teks miring, dan semua teks huruf besar juga menyulitkan pengguna. Secara keseluruhan, teks yang lebih besar, panjang baris yang lebih pendek, tinggi baris yang lebih tinggi, dan peningkatan spasi huruf dapat membantu semua pengguna mendapatkan pengalaman membaca yang lebih baik.

Untuk menggunakan Lens of Font , tanyakan pada diri Anda pertanyaan-pertanyaan ini:

• Apakah desainnya cukup fleksibel sehingga font dapat dimodifikasi ke tingkat membaca yang nyaman oleh pengguna?
• Apakah gaya font mudah dibaca?

Lensa Gambar dan Ikon

Mereka berkata, "Sebuah gambar bernilai seribu kata." Tetap saja, gambar yang tidak bisa Anda lihat tidak bisa berkata-kata, bukan?

Gambar dapat digunakan dalam desain untuk menyampaikan makna atau perasaan tertentu. Di lain waktu mereka dapat digunakan untuk menyederhanakan ide-ide yang kompleks. Apa pun kasusnya untuk gambar, pengguna yang menggunakan pembaca layar perlu diberi tahu apa arti gambar tersebut.

Sebagai desainer, Anda paling memahami makna atau informasi yang disampaikan oleh gambar. Karena itu, Anda harus membubuhi keterangan desain dengan informasi ini agar tidak ketinggalan atau disalahartikan nanti. Ini akan digunakan untuk membuat teks alt untuk gambar.

Cara Anda mendeskripsikan gambar bergantung sepenuhnya pada konteks, atau seberapa banyak informasi tekstual yang sudah tersedia yang menjelaskan informasi tersebut. Itu juga tergantung pada apakah gambar itu hanya untuk hiasan, menyampaikan makna, atau mengandung teks.

"Anda hampir tidak pernah menggambarkan seperti apa gambar itu, sebaliknya Anda menjelaskan informasi yang terkandung dalam gambar itu."

— Lima Aturan Emas untuk Teks Alt yang Sesuai

Karena mengetahui bagaimana menggambarkan suatu gambar bisa jadi sulit, ada pohon keputusan yang berguna untuk membantu saat memutuskan. Secara umum, jika gambar adalah hiasan atau ada teks di sekitarnya yang sudah menjelaskan informasi gambar, tidak diperlukan informasi lebih lanjut. Jika tidak, Anda harus menjelaskan informasi gambar. Jika gambar berisi teks, ulangi juga teks dalam deskripsi.

Deskripsi harus ringkas. Disarankan untuk menggunakan tidak lebih dari dua kalimat, tetapi jika memungkinkan, usahakan satu kalimat yang ringkas. Ini memungkinkan pengguna untuk memahami gambar dengan cepat tanpa harus mendengarkan deskripsi yang panjang.

Sebagai contoh, jika Anda mendeskripsikan gambar ini untuk pembaca layar, apa yang akan Anda katakan?

Karena kami menggambarkan informasi dari gambar dan bukan gambar itu sendiri, deskripsinya bisa jadi The Starry Night karya Vincent van Gogh karena tidak ada konteks lain di sekitarnya yang menggambarkannya. Yang tidak boleh Anda cantumkan adalah deskripsi gaya lukisan atau seperti apa gambar itu.

Jika informasi gambar memerlukan deskripsi yang panjang, seperti bagan yang rumit, Anda tidak boleh meletakkan deskripsi itu di teks alternatif. Sebagai gantinya, Anda tetap harus menggunakan deskripsi singkat untuk teks alternatif dan kemudian memberikan deskripsi panjang sebagai keterangan atau tautan ke halaman lain.

Dengan cara ini, pengguna masih bisa mendapatkan informasi yang paling penting dengan cepat tetapi memiliki kemampuan untuk menggali lebih jauh jika mereka mau. Jika gambar adalah bagan, Anda harus mengulangi data bagan seperti yang Anda lakukan untuk teks pada gambar.

Jika platform yang Anda rancang memungkinkan pengguna untuk mengunggah gambar, Anda harus menyediakan cara bagi pengguna untuk memasukkan teks alternatif bersama dengan gambar. Misalnya, Twitter memungkinkan penggunanya untuk menulis teks alternatif ketika mereka mengunggah gambar ke tweet.

Untuk menggunakan Lens of Images and Icons , tanyakan pada diri Anda pertanyaan-pertanyaan ini:

• Apakah ada gambar yang berisi informasi yang akan hilang jika tidak dapat dilihat?
• Bagaimana saya bisa memberikan informasi dengan cara non-visual?
• Jika gambar dikendalikan oleh pengguna, apakah mungkin menyediakan cara bagi mereka untuk memasukkan deskripsi teks alternatif?

Lensa Keyboard

Aksesibilitas keyboard adalah salah satu aspek terpenting dari desain yang dapat diakses, namun juga salah satu yang paling diabaikan.

Ada banyak alasan mengapa pengguna akan menggunakan keyboard daripada mouse. Pengguna yang menggunakan pembaca layar menggunakan keyboard untuk membaca halaman. Pengguna dengan tremor dapat menggunakan keyboard karena memberikan akurasi yang lebih baik daripada mouse. Bahkan power user akan menggunakan keyboard karena lebih cepat dan efisien.

Pengguna yang menggunakan keyboard biasanya menggunakan tombol tab untuk menavigasi ke setiap kontrol secara berurutan. Urutan logis untuk urutan tab sangat membantu pengguna mengetahui ke mana penekanan tombol berikutnya akan membawa mereka. Dalam budaya barat, ini biasanya berarti dari kiri ke kanan, atas ke bawah. Perintah tab yang tidak terduga mengakibatkan pengguna menjadi tersesat dan harus mencari dengan panik ke mana fokusnya pergi.

Urutan tab berurutan juga berarti bahwa mereka harus melakukan tab melalui semua kontrol yang ada sebelum yang mereka inginkan. Jika kontrol itu berjarak puluhan atau ratusan penekanan tombol, itu bisa menjadi titik sakit yang nyata bagi pengguna.

Dengan membuat arus pengguna yang paling penting lebih dekat ke urutan tab teratas, kami dapat membantu memungkinkan pengguna kami menjadi lebih efisien dan efektif. Namun, ini tidak selalu memungkinkan dan tidak praktis untuk dilakukan. Dalam kasus ini, menyediakan cara untuk melompat dengan cepat ke aliran atau konten tertentu masih memungkinkan mereka menjadi efisien. Inilah sebabnya mengapa tautan "lompat ke konten" sangat membantu.

Contoh bagusnya adalah Facebook yang menyediakan menu navigasi keyboard yang memungkinkan pengguna untuk melompat ke bagian situs tertentu. Ini sangat mempercepat kemampuan pengguna untuk berinteraksi dengan halaman dan konten yang mereka inginkan.

Saat menelusuri desain, gaya fokus harus selalu terlihat atau pengguna dapat dengan mudah tersesat. Sama seperti urutan tab yang tidak terduga, tidak memiliki indikator fokus yang baik mengakibatkan pengguna tidak mengetahui apa yang sedang difokuskan dan harus memindai halaman.

Mengubah tampilan indikator fokus default terkadang dapat meningkatkan pengalaman pengguna. Indikator fokus yang baik tidak hanya mengandalkan warna untuk menunjukkan fokus (Lens of Color), dan harus cukup jelas agar pengguna dapat menemukannya dengan mudah. Misalnya, cincin fokus biru di sekitar tombol biru berwarna serupa mungkin tidak terlihat jelas untuk membedakan bahwa itu fokus.

Meskipun lensa ini berfokus pada aksesibilitas keyboard, penting untuk dicatat bahwa lensa ini berlaku untuk semua cara pengguna dapat berinteraksi dengan situs web tanpa mouse. Perangkat seperti stik mulut, tombol akses sakelar, tombol hisap dan isap, dan perangkat lunak pelacakan mata, semuanya memerlukan halaman agar dapat diakses dengan keyboard.

Dengan meningkatkan aksesibilitas keyboard, Anda mengizinkan berbagai pengguna mengakses situs Anda dengan lebih baik.

Untuk menggunakan Lens of Keyboard , tanyakan pada diri Anda pertanyaan-pertanyaan ini:

• Urutan navigasi keyboard apa yang paling masuk akal untuk desainnya?
• Bagaimana pengguna keyboard bisa mendapatkan apa yang mereka inginkan secepat mungkin?
• Apakah indikator fokus selalu terlihat dan berbeda secara visual?

Lensa Tata Letak

Tata letak berkontribusi besar pada kegunaan situs. Memiliki tata letak yang mudah diikuti dengan konten yang mudah ditemukan membuat semua perbedaan bagi pengguna Anda. Tata letak harus memiliki urutan yang bermakna dan logis bagi pengguna.

Dengan munculnya CSS Grid, dapat mengubah tata letak menjadi lebih bermakna berdasarkan ruang yang tersedia menjadi lebih mudah dari sebelumnya. Namun, mengubah tata letak visual menimbulkan masalah bagi pengguna yang mengandalkan tata letak struktural halaman.

Tata letak struktural adalah apa yang digunakan oleh pembaca layar dan pengguna yang menggunakan keyboard. Ketika tata letak visual berubah tetapi bukan tata letak struktural yang mendasarinya, para pengguna ini dapat menjadi bingung karena urutan tab mereka tidak lagi logis. Jika Anda harus mengubah tata letak visual, Anda harus melakukannya dengan mengubah tata letak struktural sehingga pengguna yang menggunakan keyboard mempertahankan urutan tab yang berurutan dan logis.

Tata letak harus dapat diubah ukurannya dan fleksibel hingga minimal 320 piksel tanpa bilah gulir horizontal sehingga dapat dilihat dengan nyaman di ponsel. Tata letak juga harus cukup fleksibel untuk diperbesar hingga 400% (juga tanpa bilah gulir horizontal) bagi pengguna yang perlu meningkatkan ukuran font untuk pengalaman membaca yang lebih baik.

Pengguna yang menggunakan pembesar layar mendapat manfaat saat konten terkait saling berdekatan. Pembesar layar hanya memberi pengguna tampilan kecil dari keseluruhan tata letak, sehingga konten yang terkait tetapi jauh, atau berubah jauh dari tempat interaksi terjadi sulit ditemukan dan dapat luput dari perhatian.

Untuk menggunakan Lens of Layout , tanyakan pada diri Anda pertanyaan-pertanyaan ini:

• Apakah tata letak memiliki urutan yang bermakna dan logis?
• Apa yang akan terjadi pada tata letak saat dilihat di layar kecil atau diperbesar hingga 400%?
• Apakah konten yang terkait atau berubah karena interaksi pengguna berdekatan satu sama lain?

Lensa Kejujuran Materi

Kejujuran material merupakan nilai desain arsitektur yang menyatakan bahwa suatu material harus jujur ​​pada dirinya sendiri dan tidak digunakan sebagai pengganti material lain. Artinya beton harus terlihat seperti beton dan tidak dicat atau dipahat agar terlihat seperti batu bata.

Kejujuran material menghargai dan merayakan sifat dan karakteristik unik dari setiap material. Seorang arsitek yang mengikuti kejujuran material tahu kapan setiap material harus digunakan dan bagaimana menggunakannya tanpa menodai dirinya sendiri.

Kejujuran materi bukanlah aturan yang keras dan cepat sekalipun. Itu terletak pada sebuah kontinum. Seperti semua nilai, Anda diperbolehkan untuk melanggarnya saat Anda memahaminya. Seperti kata pepatah, mereka "lebih apa yang Anda sebut "pedoman" daripada aturan yang sebenarnya.

Ketika diterapkan pada desain web, kejujuran material berarti bahwa satu elemen atau komponen tidak boleh terlihat, berperilaku, atau berfungsi seolah-olah itu adalah elemen atau komponen lain. Melakukannya akan menipu pengguna dan dapat menyebabkan kebingungan. Contoh umum dari ini adalah tombol yang terlihat seperti tautan atau tautan yang terlihat seperti tombol.

Tautan dan tombol memiliki perilaku dan kemampuan yang berbeda. Tautan diaktifkan dengan tombol enter, biasanya membawa Anda ke halaman lain, dan memiliki menu konteks khusus pada klik kanan. Tombol diaktifkan dengan tombol spasi, digunakan terutama untuk memicu interaksi pada halaman saat ini, dan tidak memiliki menu konteks seperti itu.

Saat tautan ditata agar terlihat seperti tombol atau sebaliknya, pengguna bisa menjadi bingung karena tidak berperilaku dan berfungsi seperti yang terlihat. Jika "tombol" menavigasi pengguna secara tidak terduga, mereka mungkin menjadi frustrasi jika kehilangan data dalam prosesnya.

“Pada pandangan pertama, semuanya terlihat baik-baik saja, tetapi tidak akan tahan terhadap pengawasan. Segera setelah situs web semacam itu diuji stres oleh penggunaan aktual di berbagai browser, fasadnya runtuh. ”

— Desain Web yang Tangguh

Di mana ini menjadi yang paling bermasalah adalah ketika tautan dan tombol ditata sama dan ditempatkan bersebelahan. Karena tidak ada yang membedakan keduanya, pengguna dapat secara tidak sengaja menavigasi ketika mereka mengira tidak akan melakukannya.

Saat komponen berperilaku berbeda dari yang diharapkan, itu dapat dengan mudah menyebabkan masalah bagi pengguna yang menggunakan keyboard atau pembaca layar. Menu pelengkapan otomatis yang lebih dari menu pelengkapan otomatis adalah salah satu contohnya.

Pelengkapan otomatis digunakan untuk menyarankan atau memprediksi sisa kata yang diketik pengguna. Menu pelengkapan otomatis memungkinkan pengguna untuk memilih dari daftar besar opsi ketika tidak semua opsi dapat ditampilkan.

Menu pelengkapan otomatis biasanya dilampirkan ke bidang input dan dinavigasi dengan tombol panah atas dan bawah, menjaga fokus di dalam bidang input. Saat pengguna memilih opsi dari daftar, opsi itu akan menimpa teks di bidang input. Menu pelengkapan otomatis dimaksudkan sebagai daftar teks saja.

Masalah muncul ketika menu pelengkapan otomatis mulai mendapatkan lebih banyak perilaku. Anda tidak hanya dapat memilih opsi dari daftar, tetapi Anda dapat mengeditnya, menghapusnya, atau bahkan memperluas atau menciutkan bagian. Menu pelengkapan otomatis tidak lagi sekadar daftar teks sederhana yang dapat dipilih.

Perilaku yang ditambahkan tidak lagi berarti Anda hanya dapat menggunakan panah atas dan bawah untuk memilih opsi. Setiap opsi sekarang memiliki lebih dari satu tindakan, sehingga pengguna harus dapat melintasi dua dimensi, bukan hanya satu. Ini berarti bahwa pengguna yang menggunakan keyboard dapat menjadi bingung tentang cara mengoperasikan komponen.

Pembaca layar paling menderita dari perubahan perilaku ini karena tidak ada cara mudah untuk membantu mereka memahaminya. Banyak pekerjaan akan diperlukan untuk memastikan menu dapat diakses oleh pembaca layar dengan menggunakan cara non-standar. Dengan demikian, itu mungkin akan menghasilkan pengalaman yang tidak setara atau tidak dapat diakses oleh mereka.

Untuk menghindari masalah ini, yang terbaik adalah jujur ​​kepada pengguna dan desain. Alih-alih menggabungkan dua perilaku berbeda (menu pelengkapan otomatis dan fungsi edit dan hapus), biarkan keduanya sebagai dua perilaku terpisah. Gunakan menu pelengkapan otomatis untuk hanya melengkapi otomatis nama pengguna, dan memiliki komponen atau halaman yang berbeda untuk mengedit dan menghapus pengguna.

Untuk menggunakan Lensa Kejujuran Material , tanyakan pada diri Anda pertanyaan-pertanyaan ini:

• Apakah desainnya jujur ​​kepada pengguna?
• Apakah ada elemen yang berperilaku, terlihat, atau berfungsi sebagai elemen lain?
• Apakah ada komponen yang menggabungkan perilaku yang berbeda menjadi satu komponen? Apakah hal itu membuat komponen itu tidak jujur ​​secara material?

Lensa Keterbacaan

Pernahkah Anda mengambil sebuah buku hanya untuk mendapatkan beberapa paragraf atau halaman dan ingin menyerah karena teksnya terlalu sulit untuk dibaca? Konten yang sulit dibaca secara mental melelahkan dan melelahkan.

Panjang kalimat, panjang paragraf, dan kompleksitas bahasa semuanya berkontribusi pada seberapa mudah dibaca teks tersebut. Bahasa yang kompleks dapat menimbulkan masalah bagi pengguna, terutama mereka yang memiliki keterbatasan kognitif atau yang tidak fasih berbahasa.

Selain menggunakan bahasa yang lugas dan sederhana, Anda harus memastikan setiap paragraf berfokus pada satu ide. Paragraf dengan satu ide lebih mudah diingat dan dicerna. Hal yang sama berlaku untuk kalimat dengan lebih sedikit kata.

Kontributor lain untuk keterbacaan konten adalah panjang baris. Panjang garis yang ideal sering dikutip antara 45 dan 75 karakter. Garis yang terlalu panjang menyebabkan pengguna kehilangan fokus dan menyulitkan untuk berpindah ke baris berikutnya dengan benar, sedangkan garis yang terlalu pendek menyebabkan pengguna terlalu sering melompat sehingga menyebabkan kelelahan pada mata.

“Pikiran bawah sadar diberi energi ketika melompat ke baris berikutnya. Di awal setiap baris baru, pembaca terfokus, tetapi fokus ini secara bertahap memudar selama durasi baris”

— Tipografi: Manual Desain

Anda juga harus memecah konten dengan judul, daftar, atau gambar untuk memberikan istirahat mental kepada pembaca dan mendukung gaya belajar yang berbeda. Gunakan heading untuk mengelompokkan dan meringkas informasi secara logis. Judul, tautan, kontrol, dan label harus jelas dan deskriptif untuk meningkatkan kemampuan pemahaman pengguna.

Untuk menggunakan Lens of Readability , tanyakan pada diri Anda pertanyaan-pertanyaan ini:

• Apakah bahasanya lugas dan sederhana?
• Apakah setiap paragraf berfokus pada satu ide?
• Apakah ada paragraf panjang atau blok panjang teks yang tidak terputus?
• Apakah semua judul, tautan, kontrol, dan label jelas dan deskriptif?

Lensa Struktur

Seperti yang disebutkan dalam Lens of Layout, tata letak struktural adalah apa yang digunakan oleh pembaca layar dan pengguna yang menggunakan keyboard. Sementara Lens of Layout berfokus pada tata letak visual, Lens of Structure berfokus pada tata letak struktural, atau HTML dan semantik desain yang mendasarinya.

Sebagai seorang desainer, Anda tidak boleh menulis tata letak struktural desain Anda. Ini seharusnya tidak menghentikan Anda dari memikirkan bagaimana desain Anda pada akhirnya akan terstruktur. Jika tidak, desain Anda dapat mengakibatkan pengalaman yang tidak dapat diakses oleh pembaca layar.

Ambil contoh desain untuk braket turnamen eliminasi tunggal.

Bagaimana Anda tahu jika desain ini dapat diakses oleh pengguna yang menggunakan pembaca layar? Tanpa memahami struktur dan semantik, Anda mungkin tidak. Seperti berdiri, desain mungkin akan menghasilkan pengalaman yang tidak dapat diakses oleh pengguna yang menggunakan pembaca layar.

Untuk memahami mengapa demikian, pertama-tama kita harus memahami bahwa pembaca layar membaca halaman dan kontennya secara berurutan. Ini berarti bahwa setiap nama di kolom pertama turnamen akan dibaca, diikuti oleh semua nama di kolom kedua, lalu ketiga, lalu yang terakhir.

"George, Fred, Linus, Lucy, Jack, Jill, Fred, Ginger, George, Lucy, Jack, Ginger, George, Ginger, Ginger."

Jika yang Anda miliki hanyalah daftar nama yang tampaknya acak, bagaimana Anda menafsirkan hasil turnamen? Bisakah Anda mengatakan siapa yang memenangkan turnamen? Atau siapa yang memenangkan game 6?

Dengan tidak ada lagi yang bisa dikerjakan, pengguna yang menggunakan pembaca layar mungkin akan sedikit bingung dengan hasilnya. Untuk dapat memahami desain visual, kita harus menyediakan lebih banyak informasi kepada pengguna dalam desain struktural.

Ini berarti bahwa sebagai desainer, Anda perlu mengetahui bagaimana pembaca layar berinteraksi dengan elemen HTML pada halaman sehingga Anda tahu cara meningkatkan pengalaman mereka.

• Elemen Landmark (tajuk, navigasi, utama, dan footer)
  Allow a screen reader to jump to important sections in the design.
• Headings ( h1 → h6 )
  Allow a screen reader to scan the page and get a high level overview. Screen readers can also jump to any heading.
• Lists ( ul and ol )
  Group related items together, and allow a screen reader to easily jump from one item to another.
• Buttons
  Trigger interactions on the current page.
• Links
  Navigate or retrieve information.
• Form labels
  Tell screen readers what each form input is.

Knowing this, how might we provide more meaning to a user using a screen reader?

To start, we could group each column of the tournament into rounds and use headings to label each round. This way, a screen reader would understand when a new round takes place.

Next, we could help the user understand which players are playing against each other each game. We can again use headings to label each game, allowing them to find any game they might be interested in.

By just adding headings, the content would read as follows:

“__Round 1, Game 1__, George, Fred, __Game 2__, Linus, Lucy, __Game 3__, Jack, Jill, __Game 4__, Fred, Ginger, __Round 2, Game 5__, George, Lucy, __Game 6__, Jack, Ginger, __Round 3__, __Game 7__, George, Ginger, __Winner__, Ginger.”

This is already a lot more understandable than before.

The information still doesn't answer who won a game though. To know that, you'd have to understand which game a winner plays next to see who won the previous game. For example, you'd have to know that the winner of game four plays in game six to know who advanced from game four.

We can further enhance the experience by informing the user who won each game so they don't have to go hunting for it. Putting the text “(winner)” after the person who won the round would suffice.

We should also further group the games and rounds together using lists. Lists provide the structural semantics of the design, essentially informing the user of the connected nodes from the visual design.

If we translate this back into a visual design, the result could look as follows:

Since the headings and winner text are redundant in the visual design, you could hide them just from visual users so the end visual result looks just like the first design.

“If the end result is visually the same as where we started, why did we go through all this?” You may ask.

The reason is that you should always annotate your design with all the necessary structural design requirements needed for a better screen reader experience. This way, the person who implements the design knows to add them. If you had just handed the first design to the implementer, it would more than likely end up inaccessible.

To use the Lens of Structure , ask yourself these questions:

• Can I outline a rough HTML structure of my design?
• How can I structure the design to better help a screen reader understand the content or find the content they want?
• How can I help the person who will implement the design understand the intended structure?

Lens Of Time

Periodically in a design you may need to limit the amount of time a user can spend on a task. Sometimes it may be for security reasons, such as a session timeout. Other times it could be due to a non-functional requirement, such as a time constrained test.

Whatever the reason, you should understand that some users may need more time in order finish the task. Some users might need more time to understand the content, others might not be able to perform the task quickly, and a lot of the time they could just have been interrupted.

“The designer should assume that people will be interrupted during their activities”

— The Design of Everyday Things

Users who need more time to perform an action should be able to adjust or remove a time limit when possible. For example, with a session timeout you could alert the user when their session is about to expire and allow them to extend it.

To use the Lens of Time , ask yourself this question:

• Is it possible to provide controls to adjust or remove time limits?

Bringing It All Together

So now that you've learned about the different lenses of accessibility through which you can view your design, what do you do with them?

The lenses can be used at any point in the design process, even after the design has been shipped to your users. Just start with a few of them at hand, and one at a time carefully analyze the design through a lens.

Ask yourself the questions and see if anything should be adjusted to better meet the needs of a user. As you slowly make changes, bring in other lenses and repeat the process.

By looking through your design one lens at a time, you'll be able to refine the experience to better meet users' needs. As you are more inclusive to the needs of your users, you will create a more accessible design for all your users.

Using lenses and insightful questions to examine principles of accessibility was heavily influenced by Jesse Schell and his book “The Art of Game Design: A Book of Lenses.”