Peningkatan UX Untuk Aksesibilitas Keyboard

Bagaimana kami dapat memberikan pengalaman pengguna yang dapat diakses untuk pengguna keyboard saja dan teknologi bantu tanpa memengaruhi pengalaman pengguna lain? Kami dengan hormat meminta Aaron Pearlman, Desainer UX Utama di Deque Systems, untuk membagikan beberapa alat dan teknik praktis guna memastikan bahwa kami semua memberikan pengalaman yang inklusif dan dapat diakses bagi pengguna kami.

Sebagai bagian dari Keanggotaan Smashing kami, kami menjalankan Smashing TV, serangkaian webinar langsung, setiap minggu. Tanpa basa-basi — hanya webinar yang praktis dan dapat ditindaklanjuti dengan tanya jawab langsung, dijalankan oleh praktisi yang disegani dari industri ini. Memang, jadwal Smashing TV sudah terlihat cukup padat, dan gratis untuk Anggota Smashing, bersama dengan rekaman — tentu saja .

Kami harap Anda akan menikmati webinar seperti yang kami lakukan!

Aaron Pearlman: Anda seharusnya bisa melihat layar saya. Oke, sekarang, biarkan aku... Ini dia, sangat bagus. Nah, halo semuanya. Seperti yang saya katakan, saya Aaron Pearlman, Perancang Pengalaman Pengguna Utama untuk Deque. Dan saya pikir— Uh, biarkan saya bergerak— Zoom cenderung menempatkan sedikit UI di jalan, jadi saya minta maaf jika saya terlihat seperti panik bergerak dan mouse mudah-mudahan tidak muncul. Jadi, hari ini kita akan berbicara tentang jenis pengoptimalan yang dapat Anda lakukan untuk pengguna Keyboard-Only dan Assistive Technology. Seperti yang saya sebutkan beberapa saat yang lalu, jenis pengoptimalan ini, hal-hal semacam ini tidak akan menghalangi orang lain untuk menggunakan Anda… mereka juga tidak akan digunakan oleh orang lain. Mereka hanya cenderung menjadi hal-hal yang akan lebih menguntungkan bagi pengguna yang dominan menggunakan sistem dengan Keyboard Only User Assistive Technology.

Aaron Pearlman: Bagi mereka yang tidak akrab dengan apa artinya, apa itu Keyboard-Only User Assistive Technology— pengguna keyboard saja adalah seseorang yang biasanya menggunakan keyboard Anda untuk melintasi sistem. Jadi mereka akan sering menggunakan tab dan Shift tab dan tombol panah untuk melintasi sistem Anda, jadi fokus cukup penting bagi mereka. Anda mungkin menemukan orang yang satu ini mungkin memiliki masalah keterampilan motorik, mungkin juga memiliki kekurangan penglihatan, pengguna hanya keyboard, dan kemudian pengguna teknologi bantu juga menggunakan keyboard untuk melintasi sistem Anda, mereka mungkin menggunakan teknologi bantu lainnya juga seperti layar meter seperti VoiceOver atau pembaca braille atau semacamnya.

Aaron Pearlman: Jadi, itulah yang kami fokuskan — pengguna kami yang sifatnya seperti itu karena sebagian besar individu penyandang disabilitas cenderung masuk ke dalam kelompok ini. Itu tidak berarti semua orang. Tentu saja, ada banyak sekali disabilitas dan gradasi yang berbeda di antaranya, tetapi untuk tujuan ini, inilah yang akan kita fokuskan hari ini.

Aaron Pearlman: Jadi, sedikit gambaran umum tentang apa yang akan kita bahas: kita akan membicarakan sedikit proses desain dengan banyak kemungkinan melakukan sedikit jenis latihan yang kita mungkin masuk ke, mungkin tidak, sebelum kita pergi ke link lewati. Lalu lewati tautan akan menjadi salah satu fitur yang akan kita bahas, cara mengoptimalkan modal Anda, dan cara menangani fokus. Jadi, ini akan menjadi tiga kategori besar yang akan kita bahas dan kemudian kita akan punya waktu untuk pertanyaan ketika kita sudah selesai.

Aaron Pearlman: Untuk memulai, saya pikir kita bisa melakukan sedikit gambaran proses desain UX. Saya berada di bengkel dan hal yang berbeda, saya menemukan bahwa ada banyak sekali individu berbeda yang ada di sana dari banyak disiplin ilmu yang berbeda, tidak semua orang adalah perancang pengalaman pengguna, jadi mereka mungkin tidak terbiasa dengan proses yang digunakan oleh banyak perancang UX. Jadi untuk ini, saya pikir kita akan membahasnya secara singkat, kita tidak akan menghabiskan banyak waktu untuk itu, tetapi saya merasa perlu membahasnya secara singkat. Juga karena itu akan mengikat ke dalam desain yang mudah diakses juga. Jadi, sebagian besar desain UX cenderung melalui proses yang disebut penemuan, tidak selalu disebut penemuan, kadang disebut ide cepat, iterasi cepat. Banyak orang memiliki nama yang berbeda untuk itu, tetapi intinya adalah bahwa itu adalah bagian dari proses desain di mana banyak fabrikasi terjadi.

Aaron Pearlman: Sering kali kami juga memiliki ide dan pengumpulan persyaratan yang berbeda, ini adalah saat di mana banyak penelitian dan sintesis itu dengan tujuan organisasi Anda dan menyaringnya dengan semua informasi itu, dan apa yang keluar darinya biasanya artefak yang memungkinkan kita untuk dapat membangun sistem yang akan kita buat atau fitur yang kita buat. Itu cenderung — tidak selalu — tetapi mereka cenderung seperti prototipe, terkadang Anda akan melihat model mental yang akan keluar darinya juga. Tetapi prototipe dalam beberapa tingkat kesetiaan yang merupakan cerminan dari bagaimana pengguna target Anda akan mencapai tujuan mereka. TLDR adalah desain yang mengulangi dan kami menguji dengan pengguna dan mengulangi, menguji dengan pengguna, mengulangi, menguji dengan pengguna, dan pada akhirnya, itu akhirnya akan dibangun.

Aaron Pearlman: Menurut Anda itu penting, pertimbangan untuk aksesibilitas adalah bahwa kami ingin memikirkan dan melakukan aksesibilitas selama proses desain itu. Dan tingkat kesetiaan yang berbeda dapat bermanfaat, memikirkan berbagai jenis hal, itu benar-benar tergantung. Tidak akan membahas banyak hal itu, tetapi secara umum, kami ingin menggabungkan heuristik dan metode tersebut, dan kami akan sebagai desainer menumbuhkan kekuatan aksesibilitas kami dari waktu ke waktu, sama seperti kami menumbuhkan kekuatan kami untuk menjadi yang baik. desainer pengalaman pengguna dari waktu ke waktu. Tidak ada harapan di awal bahwa Anda akan pergi dan membaca WCAG 2.1, kemudian Anda akan membaca spesifikasi ARIA, dan kemudian Anda akan selesai dan Anda tidak akan membuat kesalahan lagi, atau Anda tidak akan melewatkan apa pun dalam hal desain dan desain yang mudah diakses. Itu belum tentu masuk akal dengan imajinasi apa pun.

Aaron Pearlman: Ketahuilah bahwa Anda akan belajar dari waktu ke waktu. Tentu saja saya masih salah dalam aksesibilitas, dan semua yang saya kerjakan dan ini hanya tentang menjadi lebih baik. Jadi, [tidak terdengar] karena saya selalu mendesain dengan mudah. Jadi satu colokan kecil yang relevan dengan apa yang akan kita kerjakan hari ini disebut Trane. Ini adalah pustaka pola kami yang dapat diakses sepenuhnya di Deque, kami menggunakannya untuk membuat produk kami sendiri. Ini adalah kerangka kerja front end HTML, CSS dan JavaScript, sangat mirip dengan Bootstrap, jika Anda pernah menggunakan yang seperti itu. Kami juga memiliki perpustakaan reaksi yang juga merupakan perpustakaan saudara. Tim kami berkembang dalam reaksi. Tapi kita akan melihat beberapa hal di sini hari ini sebagai contoh. Tapi ini open source, tersedia, akan ada tautan ke sana di akhir dek ini, yang akan saya sediakan untuk semua orang.

Aaron Pearlman: Dan Anda bebas menggunakan dan mendapatkan cabang dan menggunakannya sesuka hati Anda atau berkontribusi padanya, kami juga ingin melihat kontribusinya. Jadi hanya steker kecil, tetapi kami akan merujuknya saat kami membahasnya. Jadi hal pertama yang akan kita lihat adalah melewatkan link. Dan bagi mereka yang mungkin tidak akrab dengan apa itu tautan lewati, tautan lewati adalah tautan kecil yang cenderung muncul sebagai perhentian tab pertama di aplikasi web atau situs web. Dan apa yang mereka izinkan untuk Anda lakukan adalah mereka mengizinkan Anda melewati bagian situs web. Mengapa Anda ingin melakukan itu?

Aaron Pearlman: Nah, jika Anda memiliki situs web yang memiliki menu yang sangat kaya, itu mungkin menu billboard besar atau hanya berisi banyak hal, jika Anda adalah Pengguna Keyboard Saja atau Teknologi Bantu, ketika Anda sampai ke sana situs dan VoiceOver Anda mulai membacanya, atau bahkan tidak, bahkan, mungkin Anda adalah pengguna yang dapat melihat, Anda hanya menggunakan keyboard saja, Anda harus menelusuri semua item yang berbeda untuk turun ke isi atau ke ruang kerja yang Anda inginkan untuk memulai apa pun aktivitas yang Anda lakukan di sana. Jadi, apa yang dapat dilakukan oleh tautan lewati adalah dengan melewati biasanya, biasanya navigasi untuk sampai ke area ruang kerja aplikasi itu.

Aaron Pearlman: Terkadang ada banyak tautan dan biasanya hanya satu, tetapi kami memiliki beberapa contoh. Saya akan menunjukkan contoh di mana Anda dapat menggunakan beberapa tautan lewati juga. Jadi saya pikir kita dapat melihat beberapa jenis tautan Lewati atau beberapa jenis tautan lewati yang berbeda, dan kemudian kita akan melihat halaman lain yang tidak memiliki tautan lewati, dan mungkin berbicara sedikit tentang di mana salah satunya. mungkin berguna di sana. Yang pertama akan kita lihat, semoga Anda bisa melihat layar saya. Yang pertama akan kita lihat adalah link lewati yang kita gunakan di deque.com dan apa itu, adalah apa yang saya sebut sebagai elemen perpindahan yang menggantikan halaman. Jadi ketika saya tab ke sini, saya dapat melihat tautan lewati ada di sana dan itu akan memberitahu saya untuk melompat ke konten.

Aaron Pearlman: Dan ketika saya memilih itu, itu akan mengirim saya ke konten di bawah ini, dan saya menyebutnya perpindahan karena secara harfiah memasukkan dan menyembunyikan dirinya dan memasukkan dirinya ke sana dan menggantikannya. Ini adalah tautan lewati yang kami pilih untuk digunakan pada konten kami, tetapi itu adalah salah satu yang sangat umum. Anda akan melihatnya menyisipkan dirinya di bagian atas situs web atau aplikasi web. Yang berikutnya akan kita lihat adalah satu di situs yang saya yakin banyak dari Anda telah menggunakan atau cukup sering menggunakannya. Ini Amazon, kita akan melihat tautan lewati mereka. Ketika saya tab di sana, jika Anda melihat di sudut kiri atas sana, Anda akan melihatnya overlay, ini adalah gaya overlay, ini sangat, sangat umum di mana itu akan overlay konten, dan sering melewatkan apa pun di belakangnya untuk menunjukkan kepada Anda lompatan ke konten utama di sana.

Aaron Pearlman: Pro dan kontra antara menggusur versus overlay dapat diabaikan. Jika Anda menemukan bahwa konten Anda adalah sesuatu yang Anda tidak pernah ingin mengaburkan, maka Anda mungkin ingin memasukkan sesuatu dan hanya menggunakannya, perpindahan satu, sebaliknya, tidak masalah, tidak apa-apa juga. Jika Anda mendesain konten yang dibaca dari kanan ke kiri, seperti konten berbahasa Arab, Anda dapat meletakkan tautan lewati di sudut kanan atas, mungkin hal itu pantas dilakukan. Itu benar-benar turun ke apa yang pantas. Tetapi pada akhirnya, kebijaksanaan itu akan menjadi milik desainer di tim mereka. Jadi, ini adalah contoh dari dua tautan lewati yang merupakan satu tautan lewati, dan saya pikir saya akan menunjukkan kepada Anda satu di mana ada beberapa opsi di dalam tautan lewati.

Aaron Pearlman: Saya akan mengambil contoh itu, ini dari perpustakaan pola kami. Sekarang untuk contoh khusus ini, saya tidak akan benar-benar mendesain sesuatu yang memiliki banyak tautan lewati untuknya karena itu tidak benar-benar pantas untuk itu, tetapi kami hanya melakukannya untuk tujuan mendemonstrasikannya. Jadi saya akan masuk ke tab dan di sudut kiri atas, kami menggunakan overlay yang menunjukkan dua tautan lewati di sini. Dan ini adalah tab stop di dalam sini, jadi jika saya menekan tab lagi, kita akan tab ke tab berikutnya dan jika saya tab pergi, itu akan pergi. Jika saya tab lagi, itu akan pergi dan itu akan masuk ke header di bagian atas sana. Saya akan menggeser tab kembali, menggeser tab kembali sehingga kita dapat melihat bahwa kita dapat bergerak masuk dan keluar dari sini.

Aaron Pearlman: Dan kemudian saya akan pergi ke depan dan memasuki salah satunya hanya agar Anda dapat melihatnya. Dan apa yang terjadi saat ini ketika saya memilihnya, itu mengirim saya ke area ruang kerja dan itu benar-benar memfokuskan area ruang kerja itu. Apa yang akan Anda lihat untuk banyak aplikasi web adalah mereka tidak benar-benar menunjukkan fokus itu sendiri, kami ingin menunjukkan bahwa dalam aplikasi kami, ini bukan fokus elemen, tetapi ini adalah sesuatu yang dapat mengambil fokus. Dan kemudian dari sini, kita akan fokus dan kemudian kita bisa pergi ke berbagai item di dalam sana yang merupakan fokus dari semua elemen yang ada di dalam sana, elemen [tidak terdengar 00:12:28]. Nah, itulah beberapa contoh beberapa cara yang dapat Anda lakukan untuk melewatkan link.

Aaron Pearlman: Seperti yang saya katakan, ada contoh di dalam pustaka pola, Anda boleh menggunakannya, kami juga memiliki versinya, saya yakin di sini ada kesalahan. Kami juga memiliki satu contoh tautan lewati, dan Anda dapat menggunakannya juga. Jadi kami memiliki beberapa contoh berbeda di sini. Tetapi itu adalah contoh cara umum yang dapat Anda gunakan untuk melewatkan tautan. Dan mereka terutama bermanfaat bagi individu yang hanya menggunakan keyboard mereka untuk melintasi sistem ketika mereka menggunakan teknologi sistem sebagai akibatnya.

Aaron Pearlman: Tetapi terkadang, ada kasus lain di mana tautan lewati berpotensi bermanfaat. Saya telah melihatnya berpotensi bermanfaat. Anda dapat membayangkan sebuah contoh di mana ruang kerja besar situs Anda mungkin adalah sekumpulan hasil pencarian dan itu melakukan skor malas di mana Anda akan menggulir ke bawah dan kemudian itu akan memuat lebih banyak hasil, dan gulir ke bawah dan itu' akan memuat lebih banyak hasil, Anda gulir ke bawah, dan itu akan memuat lebih banyak hasil.

Aaron Pearlman: Nah, bagaimana Anda sampai ke footer? Dan saya pernah mengalami masalah ini sebelumnya, di mana saya pergi ke mesin pencari dan saya tidak pernah bisa sampai ke footer. Dan yang lebih baik adalah link lewati yang benar-benar membiarkan saya melompat ke footer, karena saya sedang mencari informasi di footer. Jadi ada cara agar tautan lewati dapat bermanfaat untuk itu. Ini bukan satu-satunya cara Anda dapat memecahkan masalah itu. Tentu saja, Anda dapat menggunakan tombol keras atau menu pintasan juga. Ada banyak teknik berbeda untuk mencapai tujuan ini, tetapi teknik itulah yang cenderung sangat bagus untuk melewati tautan [tidak terdengar 00:14:13]. Beberapa hal yang perlu diingat ketika merancang tautan lewati adalah, biasanya itu akan menjadi perhentian tab pertama di aplikasi web situs web Anda.

Aaron Pearlman: Dan biasanya di sanalah itu ditemukan, jadi jika saya berteriak atau hanya pengguna keyboard, saya bisa langsung membukanya. Ini adalah hal pertama yang dapat saya lakukan ketika saya masuk. Jadi jika itu adalah aplikasi web yang sering saya gunakan, saya bisa langsung melakukan apa yang saya coba lakukan. Itu juga harus digambarkan secara visual di tempat yang seharusnya dalam informasi, pada dasarnya AI, sehingga Anda dapat menempatkan tautan lewati dan bagian lain dari aplikasi Anda juga, seperti saya dapat meletakkannya di sini jika saya mau, temukan panjang menggulir situs tumpukan dan saya ingin melakukan itu, dan saya ingin memiliki tautan lewati di dalam sesuatu. Saya cukup yakin bahwa Anda dapat berlabuh ke hal-hal yang berbeda seperti itu, tetapi itu harus diwakili secara visual di tempat yang seharusnya, di dalam aplikasi.

Aaron Pearlman: Secara umum, itu sangat tidak biasa. Sebagian besar tautan lewati selalu berada di perhentian tab pertama. Secara umum, jangan lakukan itu. Saya pikir Anda secara teknis bisa, tetapi saya akan mengatakan tidak. Dan kemudian hal terakhir adalah itu adalah elemen interaktif dan itu adalah kontras warna masa lalu, jadi pastikan itu benar, jika Anda memutuskan untuk menggunakan seperti gambar atau sesuatu di dalamnya, saya akan melakukannya, tetapi jika Anda melakukannya, itu harus memiliki nama yang dapat diakses yang tepat bersama dengan itu juga. Secara umum, kebanyakan orang menggunakan teks dan tautan, jadi itu akan ditandai sebagai tautan. Pastikan saja melewati kontras warna sehingga [tidak terdengar 00:16:07]. Baik sekali. Jadi hanya itu yang kami miliki untuk tautan lewati.

Aaron Pearlman: Ini adalah pola yang cukup ringkas tetapi sangat umum yang Anda lihat di mana-mana dan itu adalah sesuatu yang dapat Anda tambahkan dengan adil, ini cukup mudah untuk ditambahkan ke aplikasi web Anda, tetapi ini dapat membuat perbedaan besar bagi individu yang menggunakan keyboard atau teknologi sistem. Jadi izinkan saya melanjutkan dan menutup ini dan mari beralih ke pengoptimalan modal. Memilih untuk melakukan ini karena modals sangat, sangat, sangat, sangat umum di antara sebagian besar aplikasi web dan mereka datang di banyak forum yang berbeda, banyak cara yang berbeda bahwa modals dibentuk dan dibuat.

Aaron Pearlman: Tetapi beberapa hal umum yang saya lihat muncul di lebih banyak hal yang dapat kami perbaiki, hingga ada beberapa pengoptimalan yang dapat kami lakukan untuk menjadikannya pengalaman yang lebih baik bagi pengguna Keyboard-Only dan Assistive Technology. Dan secara umum, saya pikir modal Anda jauh lebih baik. Satu hal yang saya pikir akan saya tunjukkan di sini dengan sangat cepat adalah, satu hal penting yang perlu dilakukan Modal adalah ia harus mampu menjebak fokus di dalamnya. Saya ingin menunjukkan contoh ... itu di sini. Omong-omong, saya suka menggiring bola, jadi ini bukan upaya melawan mereka. Ini mungkin hanya kelalaian kecil di sini. Saya menggunakannya sepanjang waktu sebagai situs yang menyenangkan dan memiliki hal-hal indah di dalamnya.

Aaron Pearlman: Jadi jika saya harus masuk, oops, maaf, daftar. Inilah modal di sini dan sesuatu yang kadang-kadang bisa terjadi. Jika Anda perhatikan dengan seksama, saya menekan tab, tab, tab, tab, tab. Seperti yang Anda lihat di balik layar, agak sulit untuk dilihat. Anda dapat melihat fokus belum cukup terperangkap di dalam Modal dan ini kadang-kadang bisa terjadi. Jadi jika saya adalah pengguna yang menggunakan teknologi Assistive atau Keyboard-Only, akan sangat sulit bagi saya untuk kembali ke ini.

Aaron Pearlman: Ini adalah sesuatu yang terjadi sangat, sangat, sangat, sangat umum, dan itu pasti bisa terjadi ketika Anda memasukkan hal-hal menarik yang berbeda ke dalam Modal. Jadi sesuatu yang ingin kami pastikan, dan alasan saya mengangkatnya, alasan yang sebenarnya sangat, sangat penting adalah ketika modal dibangkitkan, ia perlu mengumumkan dirinya sendiri kepada individu yang membangkitkannya, tahu apa mereka pada dasarnya baru saja dibuka, tetapi mereka benar-benar membuka hal yang benar.

Aaron Pearlman: Jadi, cara itu dapat mengumumkan dirinya sendiri adalah, baik tubuh modal perlu difokuskan atau berpotensi header modal dapat difokuskan sehingga kami dapat memberi tahu individu yang membangkitkan modal, bahwa itu adalah apa yang terjadi. Jadi jika mereka memiliki suara, mereka menggunakan misalnya, VoiceOver di dalamnya, itu akan memberi tahu mereka apa yang mereka lihat. Jadi saya pikir saya akan memberikan beberapa contoh cara tubuh dapat difokuskan dan kemudian contoh bagaimana model dapat memfokuskan header sebagai gantinya dan kemudian apa yang dapat kita lakukan dengan itu.

Aaron Pearlman: Saya akan membuka ini dengan sangat cepat di sini. Baik sekali. Dan modal yang mereka miliki untuk ini, saya pikir ini adalah situs pakaian di sini. Dan yang terjadi adalah itu memfokuskan tubuh dan saya dapat menunjukkan yang terbaik dengan… Saya akan mengaktifkan VoiceOver dengan sangat cepat. Aku akan menariknya.

VoiceOver: VoiceOver di Chrome.] Bonobo, [tidak terdengar 00:20:10]-

Aaron Pearlman: Dan Anda tidak akan bisa mendengarnya-

VoiceOver: Google Chrome, [email protected]

Aaron Pearlman: Tapi Anda akan bisa melihatnya.

VoiceOver: Tutup kartu, kartu Anda kosong, grup memiliki fokus keyboard. Anda saat ini berada di grup dalam membuka kartu Anda, menutup kartu, kartu Anda adalah grup kosong. Saat ini Anda berada di grup di dalam konten web, VoiceOver nonaktif.

Aaron Pearlman: Jadi di sana ketika saya memfokuskannya, itu membacakan sedikit dari semua yang terjadi pada kartu Anda tertutup dan kartu Anda kosong karena pembelian difokuskan pada saat itu. Dan itu benar-benar valid. Itu cara yang valid untuk memfokuskan modals Anda. Ini tidak masalah sama sekali. Dan kemudian dari sana Anda dapat menelusuri semua yang ada di dalamnya. Cara umum lainnya ketika modal dibangkitkan adalah dengan memfokuskan header.

Aaron Pearlman: Dan itulah yang kami lakukan pada modal yang kami gunakan untuk aplikasi kami adalah kami memfokuskan header. Jadi saya akan membangkitkan modal, dan seperti yang Anda lihat di sini, fokus ada di sini di mana dikatakan modal dengan formulir, fokus ada di header. Kami sebenarnya, alih-alih menunjukkan bahwa seperti indeks, kami memfokuskannya secara terprogram. Dan alasan kami memfokuskan secara terprogram bahwa saat saya melewati tab siklus di sini, sekarang akan ke tombol tutup, juga di header, lalu ke elemen interaktif pertama, yaitu bidang ke bidang berikutnya, ke bidang berikutnya, ke bidang berikutnya, tab lagi untuk menyimpan, tab lagi untuk membatalkan.

Aaron Pearlman: Dan dari sini ketika saya menekan tab, jika header itu adalah tab stop, itu akan mengarah ke sana, tapi kami memilih untuk tidak melakukannya. Sebaliknya, kami menutup dan alasan kami melakukannya adalah jika seseorang menggunakan Voice Over karena Anda mungkin telah melihat beberapa dari apa yang sedang ditulis dan masuk ke telinga saya pada saat yang sama, itu sebenarnya sangat sedikit. mengganggu karena berbicara sangat cepat, agak cerewet. Jadi, salah satu pengoptimalan yang ingin kami lakukan untuk pengalaman di sini adalah membuatnya sedikit tidak banyak bicara. Jadi ya, kami mengumumkannya, begitulah, kami secara terprogram memfokuskan modal dengan bentuk ketika mereka pertama kali sampai di sana, sehingga ini memberi tahu mereka bahwa modal yang mereka bangkitkan sebenarnya itulah yang mereka fokuskan saat ini.

Aaron Pearlman: Tapi kami tidak perlu mengumumkannya lagi dan lagi dan lagi jika mereka ingin melewati shift ini dengan bersepeda melalui modal ini. Jadi ini adalah pengoptimalan kecil yang kemungkinan besar tidak akan terlihat oleh sebagian besar pengguna hanya mouse yang Anda kutip. Tapi optimasi kecil itu, Anda bisa bayangkan jika saya sering menggunakan modals untuk mengisi formulir dan saya adalah pengguna yang menggunakan Keyboard-Only atau Assistive Technology yang optimasinya akan bertambah seiring waktu. Jadi, pengalaman pengguna kecil yang dapat kami lakukan, yang dapat membuat perbedaan yang signifikan secara keseluruhan dalam perawatan yang dapat kami berikan ke dalam desain kami, sehingga itu adalah pengalaman paling sering yang dapat kami berikan.

Aaron Pearlman: Berbicara tentang penanganan fokus, hal terakhir yang akan kita bahas adalah penanganan fokus itu sendiri. Dan kami melihat salah satu contohnya, apa yang bisa terjadi jika fokus bisa hilang dalam jenis penanganan tertentu? Tetapi alih-alih hanya menjadi sesuatu yang bisa menjadi masalah penting, cara Anda menangani fokus dapat mengubah secara signifikan pengalaman yang akan dimiliki seseorang. Benar-benar aturan tentang penanganan fokus, terutama dengan dua contoh yang akan kita lihat sekarang, yaitu, menghapus dan menambahkan elemen ke ruang kerja Anda atau apa pun yang Anda kerjakan adalah ... Itu pasti dapat mengubah cara seseorang berinteraksi dengannya. Jadi kami ingin membuatnya mengikuti pengalaman yang diharapkan yang akan Anda miliki untuk seseorang yang merupakan pengguna Mouse-Only atau pengguna yang dapat melihat, pengguna Mouse-Only harus saya katakan.

Aaron Pearlman: Dalam contoh ini kita akan melihat ... karena di sini kita akan melihat ... Oke, izinkan saya menyeretnya. Tunggu satu detik. Aku harus membawa ini keluar dari sini untuk sementara. Di sana kita pergi. Jadi Anda seharusnya tidak dapat melihat contoh modal yang telah saya rancang, ini sebenarnya adalah modal tunggal, kami memiliki dua jenis gambar dan hanya satu yang menunjukkan apa yang ada di balik flip daripada membuatnya benar-benar , benar-benar salah atau saya hanya membaginya sehingga Anda dapat melihat apa yang ada di lipatan bawah. Dan di sisi kanan, jika Anda melihat, ada ikon tempat sampah yang sedang difokuskan. Jadi ketika kita mengklik ikon tempat sampah itu, dengan asumsi tidak ada dialog yang mengatakan, "Apakah Anda yakin ingin menghapusnya?"

Aaron Pearlman: Anggap saja bukan itu masalahnya. Pertanyaan sebenarnya kemudian pergi, apa yang terjadi dengan fokus di sana? Karena ketika ikon tempat sampah itu dipukul atau dipilih, itu akan menghapus instruksi yang ada di sini, dan itu juga akan menghapus dirinya sendiri. Jadi kemana fokusnya? Jadi kami sebagai desainer, kami ingin memilih ke mana fokus pergi karena jika tidak, browser akan memilih fokus jika Anda membuat aplikasi web di dalam aplikasi web dan kami tidak ingin browser memilih ke mana fokus karena itu cenderung membuang sesuatu ke tubuh. Jadi dalam hal ini, di mana kita benar-benar ingin fokus pergi adalah kita ingin fokus pergi ke elemen yang dapat difokus berikutnya, belum tentu ... apa yang saya sebut analog untuk itu, yang akan memfokuskan tong sampah berikutnya, tong sampah untuk instruksi untuk alih-alih kami memfokuskan instruksi untuk dirinya sendiri.

Aaron Pearlman: Dan alasan kami ingin melakukan itu, adalah Anda dapat membayangkan jika seseorang secara tidak sengaja memukul, menggunakan keyboard mereka hanya mereka menekan kembali, lalu mereka menekan kembali lagi. Itu hanya akan menghapus dua set instruksi, bukan satu. Dan kami ingin, kami mencegahnya untuk pengguna hanya mouse dengan benar-benar memisahkan benda-benda itu secara fisik. Tapi kami juga ingin bisa mencegahnya karena fokus adalah apa yang mereka gunakan untuk melintasi ini. Jadi saya pikir saya akan menunjukkan contoh lain tentang apa yang kita lakukan ketika kita menghapus item terakhir di seluruh bagian di sini.

Aaron Pearlman: Sekarang kita punya instruksi memasak, instruksi terakhir untuk instruksi satu, kemana fokusnya di sini? Sekarang untuk yang satu ini, itu akan mengikuti apa yang sebelumnya, yang akan benar-benar naik ke fokus berikutnya tetapi diisi lagi, yang merupakan bahan satu untuk alasan yang sama bahwa kita tidak ingin membuang itu ke tempat sampah lagi karena kemudian jika seseorang menekan pilih lagi atau menekan kembali lagi, kita akan ... Mereka secara tidak sengaja menghapus dua hal yang tidak mereka inginkan, tidak mau.

Aaron Pearlman: Untuk alasan yang sama, kami tidak ingin membuangnya ke salah satu tautan ini di sini karena kami akan memiliki masalah sebaliknya di mana mereka juga secara tidak sengaja menambahkan sesuatu. Dan kami tidak ingin itu masuk ke badan, karena kami masuk ke badan dan pengguna Voice Over Anda, pengguna Teknologi Asisten Anda, akan mulai mengobrol tentang modal lagi atau daripada membiarkan Anda terus berinteraksi dan lakukan apa yang ingin Anda lakukan.

Aaron Pearlman: Dan akhirnya, contoh terakhir yang saya miliki di sini adalah apa yang kita lakukan ketika kita akan menghapus item terakhir dalam kasus ini, dalam modal di sini, tidak ada yang tersisa. Ke mana saya akan mengirimkannya? Dan ini pasti tergantung pada kebijaksanaan para desainer ke mana ia harus pergi. Tidak ada, itu tidak akan dapat diakses jika Anda memilih untuk mengirimnya ke pakaian atau mengirim ke fokus mungkin ke batal. Itu tidak selalu membuatnya tidak dapat diakses, hanya saja, itu benar-benar bermuara pada apa yang Anda harapkan? Informasi apa yang ingin Anda sampaikan? Narasi apa yang ingin Anda sampaikan kepada pengguna itu dan ke mana kami memilih untuk mengirimnya saat kami memilih untuk mengirimnya kembali ke header untuk memberi tahu pengguna bahwa mereka masih menggunakan modal, mereka masih di sana, kami belum' t ditutup pada mereka, misalnya di sana.

Aaron Pearlman: Jadi itu sebenarnya perubahan program karena seperti yang saya katakan, itu bukan suara yang buruk. Ini bukan elemen fokus yang mengerikan seperti itu. Jadi kami secara terprogram mengalihkan fokus ke itu dalam contoh khusus ini. Jadi itulah beberapa contoh bagus tentang apa yang harus dilakukan dengan fokus saat Anda menghapus item. Jadi saya pikir Anda bisa ... Saya akan menunjukkan contoh apa yang Anda lakukan saat menambahkan item. Jadi saya punya contoh yang sangat cepat di sini untuk retensi fokus.

Aaron Pearlman: Dan di sini, kita akan menekan ini tambahkan yang lain ... Anda bisa fokus di sini, menambahkan bahan lain dan fokus kemudian beralih ke bahan yang sebenarnya dalam hal ini, bidang yang Anda tambahkan karena dua alasan, satu, karena asumsinya adalah dengan menambahkan bidang berikutnya bahwa kami ingin berinteraksi dengannya dan itu akan menjadi perilaku yang diharapkan jika saya adalah pengguna Mouse-Only, saya akan menambahkan itu mungkin sehingga saya benar-benar dapat mulai mengetik teks ke dalamnya.

Aaron Pearlman: Dan sekali lagi, kami tidak ingin tetap fokus pada bahan lain untuk alasan yang sama bahwa jika mereka menekan kembali lagi, kami tidak ingin menambahkan dua bahan, bukan satu. Ini harus menjadi masalah kebalikan dari contoh sebelumnya. Dan yang terakhir, contoh terakhir yang ingin saya tunjukkan, karena saya pikir itu mungkin berguna untuk ditunjukkan adalah ... sebenarnya saya punya contoh itu, saya mungkin menariknya sedikit. Tapi saya bisa menggambarkannya dengan cantik, cukup tepat dalam hal itu, jika Anda memiliki apa yang Anda lakukan ketika Anda membangkitkan modal? Misalnya, Anda menyimpan sesuatu, modalnya hilang, ke mana fokus sekarang pergi dan apa yang cenderung kita lakukan, tetapi aturan praktisnya adalah Anda ingin mengirimnya kembali ke elemen apa pun [tidak terdengar 00:31:03] mendapat.

Aaron Pearlman: Jadi jika Anda membayangkan jika Anda memiliki sedikit pensil edit dan Anda memilihnya, membuka modal, Anda mengisi modal itu, Anda menekan simpan, Anda ingin mengirim fokus kembali ke elemen interaktif yang cenderung … atau kita lakukan. Mungkin ada contoh di mana Anda ingin mengirimnya ke tempat lain. Jika itu adalah penyihir dan pergi ke tempat lain setelah itu, sekali lagi untuk kebijaksanaan desainer, untuk narasi apa yang Anda coba beri tahu kami ke mana harus pergi. Tetapi untuk hal-hal yang seperti itu … contoh yang baru saja saya jelaskan, yang sangat umum. Anda membangkitkan modal, atau Anda melakukan sesuatu dengannya dan itu diberhentikan sebagai akibatnya dan konteksnya tidak selalu berubah.

Aaron Pearlman: Dan Anda tidak ingin mengembalikan fokus itu ke tempat semula. Dan alasan untuk melakukan itu adalah agar, pengguna Keyboard-Only atau Assistive Technology dapat mengambil kembali dengan tempat mereka berada. Karena ingat mereka berada di ruang itu dan ruang itu agak linier tentang bagaimana mereka melintasi dan terutama ketika Anda menggunakan kota untuk melewati semuanya. Jadi, saya pikir kita hanya sekitar 40 menit, kita hampir tepat waktu untuk semua contoh dan hal-hal yang saya miliki. Jadi saya akan memberikannya kembali ke Scott.

Scott: Terima kasih Harun. Itu cukup luar biasa, dan kami memiliki banyak pertanyaan dari peserta serta beberapa dari individu yang tidak dapat hadir hari ini karena dia bepergian. Jadi Poan yang merupakan peserta reguler webinar kami bertanya, "Saat Anda menghapus item, bukankah kita seharusnya memiliki pengakuan tindakan dan memindahkan fokus ke sana dan kemudian pindah ke elemen berikutnya?"

Aaron Pearlman: saat menghapus item, haruskah Anda memiliki ... yang Anda maksud seperti pemberitahuan seperti bersulang atau apakah Anda mengatakan haruskah Anda memiliki wilayah langsung yang memberi tahu Anda apa yang terjadi? Jika Anda mengalihkan fokus untuk menghapus item, seperti yang baru saja saya tunjukkan dalam contoh tertentu, kebangkitan penghapusan itu misalnya, harus cukup memadai untuk memberi tahu mereka bahwa mereka sebenarnya dihapus.

Aaron Pearlman: Itu harus hilang. Juga, jika mereka menggunakan Voice Over, itu akan mengambilnya juga. Jika Anda berinteraksi dengan sesuatu dan itu membuat perubahan di tempat lain, misalnya, seperti Anda melakukan sesuatu dan kemudian mengubah beberapa metrik di suatu tempat misalnya, Anda mungkin ingin menggunakan wilayah langsung yang melakukan sesuatu dengan sopan untuk membiarkannya tahu bahwa itu terjadi. Itu sesuatu yang agak di luar lingkup tempat Anda bekerja secara khusus. Saya harap itu menjawab pertanyaan Anda. Mungkin menyelam ke sesuatu yang sedikit lebih teknis. Saya mungkin perlu menindaklanjuti sedikit lebih banyak dengan beberapa di antaranya, jika kita akan masuk ke hal-hal implementasi teknis yang mendalam.

Scott: Sempurna.

Aaron Pearlman: Pengembang saya, jadi mereka tidak mengarahkan Anda tiba tetapi secara umum cenderung demikian. Contoh yang saya tunjukkan harus memadai. Jika Anda menginginkannya karena ini adalah penghapusan, Anda dapat memiliki bagian sementara di mana Anda memberikan peringatan dan berkata, "Apakah Anda yakin ingin dia menghapus ini?" Kasus mana yang Anda hanya memperkuat lebih lanjut apa yang terjadi.

Scott: Hebat. Jadi, ya, coba dan fokuskan pertanyaan pada pengalaman pengguna. Jadi dari sudut pandang pengalaman pengguna, bagaimana Anda mengelola fokus untuk pesan notifikasi?

Aaron Pearlman: Fokus untuk notifikasi? Saya dapat menunjukkannya kepada Anda jika Anda ingin melihatnya.

Scott: Tentu.

Aaron Pearlman: Kami dapat memilih kembali secara acak karena kami memiliki toast, yang merupakan notifikasi. Jadi saya akan membuka bersulang di sini. Jadi ini sebenarnya sedang difokuskan sekarang. Toast ini dibangkitkan dan sedang difokuskan sekarang dan Anda sebenarnya dapat, seperti yang Anda lihat, Anda dapat tab ke dalam klausa di sini. Jadi, itu tergantung. So, if I finished something and I wanted to notify them that it's been finished and I toasted it, then I want to focus it so that they can see that it's been … that I'm communicating that information to them. So you want to shift focus to it.

Scott: Melanie is asking, “Do you have any tips for tips or resources for navigating slideshows?”

Aaron Pearlman: For navigating slideshows?

Scott: [crosstalk 00:36:00]. Very specific.

Aaron Pearlman: Yes. So navigating slideshows. We don't use them very often, so I'm going to answer this as best as I can. So one slideshows especially ones that are like carousels, they need to have a control so that you can stop them. I think that's an accessibility need, is that they have to have some control and a mechanism so that they can be stopped. Anything that's an animation wise can't animate for more than five seconds at a time and then the animation has to stop.

Aaron Pearlman: That may not be relevant to what you're doing, but it is moving. And those controls then need to be focusable most carousels have … A lot of fancy new ones. we'll have menus that can come up when they get hovered over or focused on, just consider that all those controls need to be traversable, and then their very image heavy. A lot of carousels and slideshows need to be, so that you're going to need to have proper alternative texts on them. Just the things that you would expect.

Aaron Pearlman: Off the top of my head, I don't know of any fully accessible carousel that I can think of. But let me see if I can find a better example and I will try and pass it along through smashing and have that available if I can find it. It's a great question because they come up a lot. I ended up tending to solve that problem in a slightly different way because I think they're tricky, but that doesn't mean that they can't be done.

Scott: Rebecca is asking, “Can you give a use case for skip links?” And then similar early related, Patricia's asking, “Do you know how to solve the issue with skip links in Safari plus the VoiceOver?” [crosstalk 00:38:18]. Again, maybe more technical than user experience related.

Aaron Pearlman: Yes. The second one, I'm not entirely sure what actually is going on that, that there may be an issue there. Again, I can try and see if that's something that our developers have encountered before and how they've gotten around it. So we'll make a note of that and I'll try and circle back. But for the first one what's a use case for Skip links? I want to avoid giant banner menus and I want to get straight to a sale that I heard that there is today and I don't want to have to do that.

Aaron Pearlman: If I was a sighted a mouse only user, I would just visually ignore it and then go move my mouse over and just click on the sale item. If I'm a keyboard only ora assisted technology user, I would have to tab through all of that menu, potentially bunch of banner items as well before I could finally get to the workspace. that has maybe the sale items. So that would be a great use for a Skip link to get right to the content. Skip to main content is a phrase you see very, very common. Skip to main content.

Scott: Okay. That's a good, good point. And I think in terms of all the user related questions from the attendees that covers them. We do have some general questions that we like to ask. So, low hanging fruit for people that are trying to build an accessible website. If somebody wants to put together a site in a few hours and make sure it's accessible, what are some the easy things that just they can check off the list right away.

Aaron Pearlman: Sure. So some things that you can do immediately with any site or application that you're working on, you can review your font choices for things like color contrast, there are plenty of color, if you put in color contrast, selector, picker or something like that, you'll get it and you'll just put it in the Hex value or the RGB value of what your font is and then what the background, whatever element the background color is sitting on and make sure that it's meeting at 4.5 to one.

Aaron Pearlman: So that's one that you can do immediately. Check your color Palette, you want to do color contrast where I see that color contrast fails a lot is when people use the endless shades of gray to have various levels of first class, second class, third class elements and things like that. Just make sure that if it's an interactive element that it's a passing color contrast.

Aaron Pearlman: Another thing, check your the images that are important, that are non decorative images. Make sure that they have all texts. Just one that you can add immediately. And then check your review, your heading structure, make sure that your h1 tags, h2 tags, h3 tags, h4 tags and so on. They all make sense with the structure of it and make sure that the content is properly paired with those heading tags.

Aaron Pearlman: That's things that you can do immediately. And then also you can just, this is a small blog but you can download AX, that's our accessibility engine. It's totally free. It's a little extension for chrome and Firefox and just hit the run button and see what you find. It's a lot of things that you can help alleviate immediately or change immediately. You can also turn on VoiceOver, for example, if you're on a Mac and start to go through your site and see what it sounds like for somebody who uses just a technology. It's a great thing that we can do immediately.

Scott: Okay. Janat, has a question here. So what is it about accessibility that interests you and how did you know you've been doing design and UX for so long, but you've only been doing accessibility for smaller period of time, so that catch your attention?

Aaron Pearlman: It had been something that had been on the purview of some of the design that I had done in a later part of my design career till I got here. In my design career, I've always wanted to work on things that I felt in some way tried to make the world a slightly better place and I felt that working. And accessibility was one way to make … Very much believe in the core value of universal design or more importantly adapted design. Design that adapts itself to two different types of individuals to provide what we call GQ like digital equality. We want everyone to be able to use everything as best as we can possibly provide that universal experience that we can have. I don't know as a person that very much appeals to me. And so it was just a good fit to learn design. That's really cool.

Aaron Pearlman: Designing accessibly is a one way street. Like once you start to design accessible, you never don't not design accessible anymore. It's like UX designers don't design unless you're being tongue in cheek, you're not going to design something to have a really poor user experience. It's going to be part of your vernacular from that point forward. And once you begin to design accessibly, it never goes away. I can't like not think about accessibility as I do designing and that's a really, really cool thing.

Aaron Pearlman: It also affords you to start to think about things that you didn't think you had access to. Like, did you know that your focus on your page, you can design focus to look differently for different elements on the page? That blew my mind when I found that out and I thought that was so cool that gave me a little bit more control, I knew you could create really cool Hover States, but I didn't know focus was a state that you had full control over as well.

Scott: Our industry there's always a new trend that's just kind of how it goes, that's the web. Are there any design trends right now that you know that are inhibiting accessibility? And if so, is there any recommendations you can make to avoid that?

Aaron Pearlman: I don't know if there's anything that's super trendy right now when I look at different sites and web applications that couldn't be designed excessively. I think there are pitfalls that that we've been falling into longer than any one trend as existed or at least has existed for some time. I just mentioned one, what I call the endless shades of gray. That's one. In general, just being mindful of the contrast for your text. It is rampant.

Aaron Pearlman: It is by an order of magnitude, the most accessibility issues, if you were to like run an engine against it, like AX, it'll be color contrast almost always. So just being really, really, really mindful of that regardless of where your text is on the page. Again, I mentioned it again, just being careful with your images. If you have an image that's conveying important information to a sited user, that information needs to be conveyed to the user. That is user as well.

Aaron Pearlman: And what I mean by information that's conveyed is if what's being conveyed is that the person is doing something that's, you wouldn't necessarily describe it as a man standing. It could be that they're playing baseball. Maybe that's the important part. So make sure that the, that the, the alternative text matches with the intended information that's trying to be conveyed, received out a lot too. Even when all texts is there, it just doesn't accurately describe what is trying to be portrayed.

Aaron Pearlman: And then the other one too is progressive disclosure menus, many times you see on Hover Menus and stuff like that. They don't do a great job of being evoked on focus as well. And they don't always do a good job of … So that is a trend I do see. I do see a lot of menus coming up on Hover, when you hover over something you get the secondary menu that was hidden before that now finds itself to the front.

Aaron Pearlman: Also making that be able to Hover or a mechanism that allows you to evoke it and that will properly capture focus inside there so that you can use it. Those are a few things off the top of my head that I can say I would see a lot.

Aaron Pearlman: So as a graphic designer, you obviously work with development teams and a lot of the times when we're doing wireframes and design of the onset of the project, they're inherently not inaccessible. It doesn't really become an issue, it seems until it comes to the development stage and people start taking that design and turning it into code. So how do you work with developers to make sure that the design that is being made from the start is going to be accessible when they're done with it. Do you do audits throughout the process, at the end of the process? Like what's the workflow with developers?

Aaron Pearlman: Sure. So the workflow for our development team is going to be, I think somewhat similar to a lot of other organizations. We work in scrum, so we work in sprints and scrum and I'll go through a discovery process. They're going to be privy to that, they're not going to see it when the design is fully finished.

Aaron Pearlman: They're going to see it throughout the design. I'll have opportunities to talk with them a little bit about what the intent of the design is. They will probably set in on some of the user research that I've done, some of these ability testing that I've done. So, hopefully at that point nothing's really new to them that I'm not going to get any 11th hour that we can't even do this thing. I still have to deal with all the other things outside of accessibility that every other designer has to deal with, like is this feasible? Apakah itu berharga? Is it all of those things that we have to deal with.

Aaron Pearlman: With regards specifically to accessibility, sometimes I will annotate the designs in a particular way that will indicate where tab focus should go. At the end of the slide deck that I have, there's a great resource that one of the designers from Adobe put together. I know there's like a pdf, there may be. There's like a sketch file as well in there, there may be an XD file as well.

Aaron Pearlman: I don't think, maybe just sketch. But it shows you like all of these different ways that you can annotate things like, accessible names, tab order and basically are little objects that you can place on your design to indicate some of those things as you go through. It's a really, really wonderful resource. It's all included in here as well. That's a great way of saying, “Here's part of my prototype and here's the expected tab, order for it.” So that you have that as part of your artifact as part of the digital documentation or annotation that goes along with it.

Aaron Pearlman: Jadi satu hal yang kami lakukan adalah saya membubuhi keterangan desain saya cukup banyak. Semuanya, mulai dari ukuran bagaimana hal-hal tertentu seharusnya hingga kode Hex atau nilai RGBA untuk apa yang seharusnya terlihat dan terasa. Tetapi juga, ada anotasi aksesibilitas yang dapat Anda tambahkan juga.

Aaron Pearlman: Dan kemudian hanya berkomunikasi, melihat melalui build saat mereka melewatinya, memastikan hal-hal seperti jika Anda membuat fokus kustom apa pun yang menjadi fokus kustom tersebut, tampak hebat, periksa kontras warna, pastikan bahwa itu masuk, bahwa font pilihan yang Anda miliki ada beberapa font yang ketika bobotnya lebih tinggi dan lebih besar. Kontras warna mereka tidak harus 4,5. Ini sebenarnya bisa sedikit lebih rendah, tetapi Anda hanya ingin mengawasi hal-hal itu. Sama seperti Anda akan mengawasi hal-hal pengalaman juga. Anda akan ingin mengawasi hal-hal yang telah Anda perhatikan dan anotasi dalam desain Anda.

Scott: Jadi kita punya beberapa menit lagi di sini. Jadi saya akan mengajukan satu pertanyaan lagi. Beberapa orang merasa aksesibilitas dapat melumpuhkan kreativitas selama proses desain. Apakah itu sesuatu yang Anda temui? Bagaimana menurut Anda kreativitas cocok dengan desain yang dapat diakses?

Aaron Pearlman: Tentu. Itu adalah salah satu reaksi awal saya karena harus mendesain dengan mudah, adalah bahwa seseorang pada dasarnya memborgol saya dan berkata, "Ada kotak yang jauh lebih kecil yang harus Anda tempati." Memang benar bahwa mendesain dengan mudah berarti akan ada lebih banyak tantangan karena ada lebih banyak aturan yang harus Anda ikuti. Tetapi pada akhirnya, saya menemukan bahwa pengalaman itu berakhir menjadi lebih baik dan saya belum ... Setelah saya menghapus nama yang salah itu dan mulai melakukan lebih banyak dan lebih banyak desain yang dapat diakses yang dapat diakses oleh WCAG 2.0 AA, saya perhatikan bahwa saya dapat melakukan banyak hal yang ingin saya lakukan.

Aaron Pearlman: Saya hanya perlu kadang-kadang mengungkapkan atau memecahkan masalah dengan cara yang sedikit berbeda dari yang saya lakukan sebelumnya. Saya pikir banyak orang ketika mereka berpikir tentang mendesain dengan mudah ... Saya akan memberi Anda contoh yang sangat spesifik. Ketika mereka berpikir tentang merancang aksesibilitas, mereka berpikir, “Oh, well, saya tidak bisa melakukan semua visualisasi mewah ini, misalnya. Saya tidak akan dapat melakukan semua hal itu karena mereka tidak akan dapat diakses, karena jika seseorang tidak dapat melihatnya, saya tidak akan dapat melakukan itu.”

Aaron Pearlman: Saya sedang merancang visualisasi yang hanya dasar, hanya semacam grafik garis dan di bawah itu, ada grafik garis, pada sumbu x ada saya pikir sudah waktunya dan pada sumbu y itu penggunaan atau sesuatu seperti itu. Dan ada gradien kecil yang bagus yang turun darinya dan ada semacam garis-garis terang yang berada di belakangnya untuk menggambarkan bulan dan waktu. Dan ketika saya berbicara dengan salah satu pakar materi pelajaran saya tentang membuatnya dapat diakses, ternyata saya yakin dia hanya akan seperti, "Tidak." Namun dia berkata bahwa sebenarnya hanya ada beberapa hal yang perlu saya lakukan untuk membuat grafik yang terlihat bagus ini dapat diakses. Satu, garis di atas itu harus melewati kontras warna karena itulah sebenarnya yang menyampaikan informasi tren dari waktu ke waktu.

Aaron Pearlman: Hal-hal yang bergradasi di bawahnya hanyalah hiasan dan selama itu tidak mengganggu lewatnya kontras warna itu dan garis sumbu y dan x dan akhirnya menjadi baik-baik saja. Garis-garis di belakangnya baik-baik saja, tetapi saya akhirnya menambahkan tanda centang di bagian bawah untuk menunjukkan itu. Dan kemudian ketika saya mengarahkan dan memfokuskan, karena terkadang Anda dapat mengarahkan kursor dan itu akan menambahkan titik ke bagian grafik garis, hanya memastikan bahwa titik itu sendiri akan melewati warna. kontras. Saya melakukannya dengan melakukan semacam donat di mana Anda meletakkan titik putih dengan titik lain atau saya harus mengatakan itu seperti goresan besar di bagian luarnya juga.

Aaron Pearlman: Dan kemudian saya menambahkan sedikit perawatan di sana yang akan membawa garis-garis yang memudar kembali ke depan. Dan semuanya melewati kontras warna dan akhirnya baik-baik saja. Itu benar-benar visualisasi yang indah yang berlalu. Sekarang memang, saya tidak masuk ke semua hal nama yang dapat diakses dan bisa melakukan itu. Banyak perpustakaan ada di sana. Kesampingkan itu, setidaknya kita sebut kontras karena saya pikir banyak desainer berjuang dengan itu. Kamu bisa melakukannya.

Aaron Pearlman: Ini hanya tentang menjadi sangat sadar tentang hal-hal semacam itu, dan mendapatkan lebih banyak contoh dan hanya mencoba dan mencoba hal-hal yang berbeda, dan memiliki orang lain yang dapat Anda ajak untuk mengajukan ide-ide itu dan memantulkannya bolak-balik dan memeriksa lagi, sungguh lakukan itu. Saya tidak berpikir itu benar-benar menghambat apa pun. Itu hanya membuat Anda harus berpikir sedikit lebih jernih tentang bagaimana Anda akan melakukannya dan memastikan bahwa Anda melihat melalui lensa bagaimana seseorang terlibat dengan ini jika mereka memiliki penglihatan yang rendah, atau jika mereka tidak bisa' t melihatnya sama sekali atau tidak dapat mendengar jika Anda sedang membangun aplikasi media.

Scott: Satu pertanyaan lagi, tapi saya pikir kita seharusnya menyentuhnya. Pada tahap apa dalam proses Anda, Anda mulai berpikir tentang aksesibilitas? Saya akan berasumsi sepanjang seluruh proses.

Aaron Pearlman: Ya, itu sepanjang seluruh proses. Saya akan sedikit lebih daripada ... Saya tahu siapa yang saya katakan itu dan kedengarannya sedikit kurang ajar. Jadi, sejak awal ketika Anda melakukan hal-hal seperti pembuatan prototipe fidelitas rendah, Anda akan memikirkan hal-hal seperti beberapa hal pesanan tab. Anda akan berpikir tentang judul dan struktur, hal-hal seperti itu. Itu adalah jenis hal aksesibilitas yang Anda pikirkan. Kemudian seiring semakin tinggi dalam kesetiaan, Anda akan lebih memikirkan hal-hal seperti, warna dan palet Anda yang telah Anda pilih, mungkin nama yang dapat diakses, teks alternatif untuk apa pun yang mungkin pantas untuk itu, yang mungkin Anda pikirkan, jika Anda melakukan fokus khusus, misalnya, mungkin di situlah Anda akan mulai memikirkannya.

Aaron Pearlman: Itu tidak berarti bahwa Anda tidak dapat memikirkannya ketika Anda melakukan kesetiaan yang rendah hanya berarti secara umum, ketika saya menjalani proses saya, hal-hal itu cenderung masuk ke dalam kategori tersebut. Anda memikirkan aksesibilitas sepanjang waktu, tetapi Anda tidak selalu memikirkan semuanya dengan itu karena Anda berada dalam hal-hal dengan fidelitas yang lebih rendah, dan Anda sedang memikirkan, dan Anda hanya memikirkan tentang ide-ide, dan Anda hanya bekerja melalui ide-ide, biarkan hal-hal kreatif berjalan saat Anda menjadi lebih terbiasa dengan aksesibilitas, itu hanya akan masuk secara intrinsik dan akan ada lebih sedikit hal yang disadari.

Scott: Ya. Cukup adil. Nah, dengan catatan itu, kita sudah kehabisan waktu, Aaron. Terima kasih banyak atas waktu Anda dan—

Aaron Pearlman: Itu bagus. Aku punya waktu yang indah.

Scott: Anda akan menghadiri beberapa konferensi Smashing berikutnya, saya pikir.

Aaron Pearlman: Saya akan berada di salah satu di New York. Aku akan berada di satu di New York.

Scott: Oke. Dan apakah kalian melakukan lokakarya di sana?

Aaron Pearlman: Ya, kami.

Scott: Oke. Luar biasa. Sekali lagi terima kasih atas waktu Anda dan hanya untuk melihat anggota yang masih menonton, kami memiliki dua webinar minggu depan. Yang pertama adalah Power of Digital People, dengan Kristina Podnar. Dan kemudian kami memiliki nomor tiga dalam seri kami dengan Andrew Clarke, Inspired Designs Decisions, nomor tiga yang terinspirasi oleh Ernest Journal. Terima kasih banyak semua orang untuk hadir hari ini. Dan sekali lagi, rekaman ini akan tersedia di panel keanggotaan pengiriman setelah kami selesai mengeditnya dan kami berharap dapat melihat Anda semua minggu depan. Jadi sekali lagi terima kasih Erin.

Itu Bungkus!

Kami dengan hormat berterima kasih kepada Anggota Smashing dari lubuk hati kami yang paling dalam atas dukungan mereka yang berkelanjutan dan baik hati — dan kami tidak sabar untuk menyelenggarakan lebih banyak webinar di masa mendatang.

Kami sangat senang menyambut Aaron di SmashingConf New York kami yang akan datang (15-16 Oktober) — kami juga ingin melihat Anda di sana!

Harap beri tahu kami jika menurut Anda rangkaian wawancara ini bermanfaat, dan siapa yang Anda ingin kami wawancarai, atau topik apa yang Anda ingin kami bahas dan kami akan segera membahasnya.