adriantirusli

A Lesson Learned in A11Y (with Vue)

Peringatan: Artikel mengandung GIF

Internet telah mengubah cara pandang dunia dengan menjangkau teman-teman yang mengalami disabilitas. Bayangkan saja, dahulu penyandang disabilitas penglihatan tidak dapat membaca koran dan penyandang disabilitas motorik tidak dapat membalik halaman pada koran.

Berkat kemajuan teknologi, golongan disabilitas tersebut sekarang dapat mengakses koran online dan membaca isinya melalui penggunaan screen reader dan keyboard Braille. Namun, terlepas dari besarnya potensi yang dimiliki internet bagi para penyandang disabilitas, kita masih saja gagal.

Statistik

Berdasarkan data yang diambil oleh SUSENAS (Survei Sosial Ekonomi Nasional) pada tahun 2018 tentang jumlah penyandang disabilitas di Indonesia, terdapat ~180.000.000 penduduk berusia produktif (19–59 tahun) di Indonesia yang menyandang disabilitas yang mana jumlah ini merupakan 12% dari total penduduk Indonesia berusia produktif.

Bayangkan hambatan yang harus dihadapi individu tersebut saat menyelesaikan tugas sehari-hari ataupun hanya sekedar berinteraksi dengan masyarakat. Tujuan kita haruslah meringankan hambatan dan menciptakan kesempatan yang setara dan akomodasi yang layak untuk semua kalangan.

To exclude no one.

Web Accessibility

Web Accessibility dapat diartikan bahwa situs web, alat, dan teknologi dirancang dan dikembangkan sehingga para penyandang disabilitas dapat melihat, memahami, menavigasi, dan berinteraksi dengan web bahkan bisa ikut mengambil andil dalam berkontribusi pada web.

The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.

-Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Kita masih saja saja gagal

Ketika sebuah situs didesain dan dikodekan dengan benar, individu yang mengalami disabilitas tentu dapat menggunakannya dengan benar dan mendapat manfaat dari penggunaannya. Sayangnya, banyak situs web masih memiliki sejumlah hambatan dan tidak sesuai dengan Web Content Accessibility Guidelines (WCAG) yang menyebabkan sulitnya atau bahkan tidak mungkin digunakan bagi penyandang disabilitas, yang tidak berkontribusi pada masyarakat yang setara dan adil.

Menurut penelitian yang dilakukan oleh Tenon di tahun 2018, rata-rata 279 level A dan 106 level AA kesalahan pada A11Y dapat ditemukan pada halaman web.

Kenali Pengguna-mu

Agar bisa dikategorikan accessible, sebuah situs haruslah berjalan pada beberapa perangkat yang memiliki ukuran layar yang berbeda dan dapat bekerja dengan input yang berbeda seperti penggunaan screen reader. Terlebih lagi, situs harus mencakup semua kelompok pengguna, tanpa terkecuali termasuk penyandang disabilitas. Dibawah ini merupakan beberapa kategori disabilitas yang mungkin dimiliki oleh pengguna-mu.

  • Penglihatan: Penglihatan rendah, Buta, Buta warna, Katarak.
  • Pendengaran: Penglihatan rendah, Tuli, Infeksi telinga.
  • Mobilitas: Patah tulang, Cedera tulang belakang.
  • Kognitif: Ketidakmampuan belajar, Mengantuk atau terganggu, Migrain, Autisme, Kejang.
  • Berbicara: Kebisingan sekitar, Radang tenggorokan, Kesulitan bicara, Tidak dapat berbicara.
  • Gangguan Mental: Depresi, PTSD, Bipolar, Kecemasan.
Gif “Now What” from Finding Nemo scene

Sudah mengenali pengguna, sekarang saatnya berbenah…

Masalah Penglihatan

Pengguna dengan tipe ini adalah kelompok pengguna yang memiliki masalah mulai dari ketidakmampuan untuk membedakan warna hingga tidak bisa melihat sama sekali.

  • Teks dapat diubah ukurannya tanpa bantuan teknologi hingga 200 persen tanpa kehilangan konten atau fungsionalitasnya.
  • Pastikan persentasi konten teks memenuhi standar minimum kontras. DevTool yang terdapat pada beberapa browser seperti Chrome, Firefox dan Edge dapat menampilkan tooltip properti CSS yang mencakup pengecekan cepat untuk rasio kontras warna.
Contoh Pengecekan Kontras dengan Chrome DevTool

Masalah Pendengaran

Pengguna dengan keterbatasan untuk mendengar konten pada suatu halaman.

Pastikan konten media dapat dimengerti dengan menambahkan alternatif berupa teks (script atau caption) pada konten yang sifatnya bukan text.

Masalah Mobilitas

Mencakup kelompok pengguna yang memiliki ketidakmampuan untuk menggunakan mouse, keyboard atau layar sentuh.

  • Hindari membuat konten dinamis yang membutuhkan hanya mendukung gerakan menggunakan mouse
  • Pastikan area yang dapat diklik besar. Contohnya pada penggunaan radio button atau checkbox

Masalah Kognitif

Mencakup kelompok pengguna yang memiliki keterbatasan kemampuan belajar.

Gunakan animasi dengan bijak. Hindari presentasi visual yang berulang atau berkedip karena ini dapat menyebabkan beberapa masalah pengguna.

Audit

Tanyakan pada dirimu sendiri beberapa pertanyaan dibawah ini saat melakukan auditing

Apakah komponen UI dapat berfungsi jika hanya menggunakan keyboard?

Memiliki strategi navigasi keyboard yang baik untuk sebuah aplikasi menciptakan pengalaman yang lebih baik untuk semua orang. Mulai dari pengguna yang memiliki penglihatan rendah yang susah untuk menemukan atau melacak indikator pointer pada layar hingga pengguna yang memiliki hand tremor yang kesusahan untuk menggunakan mouse dan memilih untuk menggunakan keyboard.

Menggunakan tabindex

Atribut tabindex memungkinkan elemen/komponen UI untuk mengatur fokus saat menggunakan keyboard. Pengguna keyboard dan pengguna teknologi bantu menggunakan fokus keyboard pada elemen saat melakukan interaksi. Pada dasarnya elemen secara implisit sudah focusable, sehingga tidak diperlukan atribut tabindex kecuali jika ingin merubah posisi elemen saat melakukan tab.

  • tabindex=”0″ merupakan yang paling umum dan tidak akan merubah urutan dari tab order “natural”.
  • tabindex > 0 akan didahulukan sebelum urutan tab “natural”. Jika ada beberapa elemen dengan tabindex lebih besar dari 0, urutan tab dimulai dari nilai terendah lebih besar dari nol dan diurutkan ke nilai tertinggi.
  • tabundex=”-1″ menghilangkan elemen dari urutan navigasi tab default (yaitu, pengguna tidak dapat mengarahkan tab), tetapi memungkinkannya untuk mengatur fokus dengan menggunakan focus(). Dapat sangat berguna untuk elemen-elemen yang tidak boleh di-tab, tetapi diperlukan untuk fokus.

Atribut tabindex tidak boleh memiliki nilai lebih dari 0 untuk mencegah urutan tab yang tidak terduga yang dapat menyebabkan tampilan melewatkan beberapa elemen yang seharusnya tidak dilewatkan.

Menggunakan autofocus

Atribut autofocus digunakan untuk memfokuskan elemen tertentu saat halaman dimuat. Contoh menggunakan VueJS

// Register a global custom directive called `v-focus`
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
})

Apakah halaman dapat dibaca menggunakan screen reader?

Dengan menggunakan elemen heading dan landmark yang benar akan meningkatkan pengalaman navigasi pada situs untuk pengguna assitive technology.

Pentingnya Heading Level

Developer seringkali tidak memperhatikan penggunaan tingkatan dari heading dan memilih untuk menggunakan style default dari browser yang paling mendekati desain mereka.

Alih-alih mengandalkan ukuran font default browser untuk heading, sebaiknya gunakan CSS, dan perhatikan aturan heading level.

Gunakan elemen h1-h6 untuk menciptakan sebuah garis besar struktur dari sebuah halaman. Tujuannya adalah untuk membuat kerangka dari halaman agar dapat dinavigasikan menggunakan heading.

Umumnya adalah h1 digunakan untuk judul atau logo utama pada halaman, h2 untuk menunjukkan bagian utama, dan h3 dalam mendukung subbagian:

<h1>Title of a blog post</h1>
<section>  
   <h2>Section Heading</h2>  
   …  
   <h3>Sub-section Heading</h3>
</section>

Memperhatikan Landmark

Elemen HTML5 seperti navigation, main dan aside akan bertindak sebagai landmark atau bagian khusus pada halaman dimana screen reader akan menggunakannya sebagai navigasi dari keseluruhan halaman.

Daripada menggunakan tag div untuk semua kebutuhan, gunakanlah tag HTML5 yang dapat bertindak sebagai landmark untuk mendefinisikan bagian-bagian utama dari sebuah halaman

Menggunakan ARIA

Elemen native memiliki informasi semantik yang sudah terintegrasi oleh browser, tetapi untuk komponen khusus diperlukan untuk menggunakan ARIA untuk menambahkan informasi di dalamnya.

Developer harus menetapkan role ARIA dan status serta properti yang sesuai untuk suatu elemen selama siklus hidupnya, kecuali jika elemen tersebut sudah memiliki semantik ARIA yang sesuai (melalui penggunaan elemen HTML yang sesuai).

HTML 5ARIA RoleLandmark Roles
<header>role=”banner”Site-orientated content: Nama website / Judul halaman / logo.
<nav>role=”navigation”Area yang memuat link navigasi pada site
<main>role=”main”Konten utama atau sentral dari dokumen.
<footer>role=”contentinfo”Konten yang memuat informasi berupa: footnotes/copyrights/link menuju privacy statement
<aside>role=”complementary”Konten pendukung untuk konten utama

Tabel diatas adalah ARIA role dari beberapa elemen HTML5, selengkapnya dapat dilihat disini.

Accessibility Tooling

Berikut merupakan tools yang dapat digunakan untuk men-debug komponen UI dari sisi aksesibilitas.

Contoh Hasil Audit menggunakan Lighthouse untuk Accessibility
  • vue-axe merupakan audit accessibility untuk aplikasi Vue yang bekerja dengan menjalankan dequelabs/axe-core pada halaman yang sedang dilihat.
Contoh Hasil Audit menggunakan vue-axe untuk Accessibility

Penutup

Web Accessibility mungkin kelihatannya menakutkan tetapi mudah untuk dimulai.

Saat mempelajari tentang accessibility, ada baiknya untuk memahami diversity pengguna yang ada di dunia dan jenis topik accessibility yang memengaruhi kelompok tersebut.

Resources

  1. Accessible to all
  2. Using ARIA: Roles, states, and properties
  3. Vue a11y
  4. WCAG 2.0

Slides & Repository

  1. Demo with Vue
  2. Slide Repository
  3. Live for Slide