Intinya...

Fokus harus mengikuti urutan yang logis dan bermakna, menjaga hubungan antar elemen dan sesuai dengan cara alami halaman tersebut dibaca, terlepas dari tata letak atau arah baca bahasanya.

Apa itu WCAG 2.4.3?

Konten interaktif seperti tautan, kolom formulir, atau tombol menerima fokus ketika pengguna menavigasi halaman menggunakan keyboard. Pengguna yang mengandalkan navigasi keyboard atau teknologi bantu mengharapkan urutan tab atau navigasi mereka mengikuti urutan logis.

Untuk memenuhi kriteria ini dengan sukses, konten interaktif halaman harus menyediakan cara untuk menavigasi semua elemen yang bisa difokuskan dengan cara yang masuk akal untuk halaman dan kontennya. Hal ini berlawanan dengan urutan tab yang melompat-lompat tanpa alasan yang jelas atau urutan yang tidak masuk akal.

Catatan singkat: meskipun pedoman WCAG 1.3.2 Urutan yang Bermakna membantu dengan mengoreksi urutan pembacaan semua konten, pedoman 2.4.3 Urutan Fokus lebih berfokus pada urutan elemen interaktif yang menerima fokus. Meskipun konten secara keseluruhan bisa terstruktur dan memenuhi pedoman 1.3.2, urutan tab bisa tetap rusak dan gagal memenuhi pedoman 2.4.3 Urutan Fokus.

Ilustrasi pengguna menggunakan tab

Ilustrasi halaman web di mana panah menunjukkan ke link dan tombol yang mendemonstrasikan urutan tabulasi elemen interaktif saat tangan menekan tombol tab pada keyboard.

Mengapa ini penting?

Ketika urutan fokus pada halaman web tidak masuk akal atau tersebar, hal ini dapat menyebabkan kebingungan bagi pengguna yang mengandalkan navigasi keyboard. Pengguna dapat merasa terdesorientasi dan frustrasi karena harus melompat-lompat di seluruh halaman tanpa alur logis untuk elemen interaktif yang mereka navigasikan.

Akibatnya, pengguna harus lebih banyak berusaha untuk menavigasi elemen interaktif dan mungkin kehilangan konteks dari konten atau berakhir pada situasi di mana mereka tidak tahu bagaimana mengakses elemen tertentu karena pola navigasi yang diharapkan telah rusak.

Siapa yang terpengaruh?

Pengguna dengan mobilitas terbatas, pengguna dengan disabilitas kognitif, pengguna low vision, dan pengguna netra.

Pengguna dengan mobilitas terbatas yang mengandalkan navigasi keyboard akan sangat diuntungkan ketika urutan fokus elemen mengikuti urutan yang wajar di seluruh halaman. Jika tidak, mereka bisa merasa frustrasi karena harus berusaha lebih keras untuk memindahkan fokus ke link tertentu yang ingin mereka tuju atau formulir yang ingin mereka isi.

Pengguna dengan disabilitas kognitif, khususnya yang mempengaruhi kemampuan membaca, bisa merasa kesulitan mengikuti jika tabulasi membawa fokus ke arah yang tidak terduga. Mengikuti urutan fokus yang logis membuat tabulasi melalui halaman menjadi lebih lancar dan kurang membingungkan.

Pengguna low vision yang menggunakan pembesar layar pada tingkat pembesaran yang lebih tinggi biasanya hanya dapat melihat sebagian kecil dari halaman pada satu waktu. Urutan fokus yang tersebar membuatnya sulit untuk memahami konten ketika halaman melompat-lompat atau tidak mengikuti pola yang wajar.

Pengguna netra dan yang mengandalkan screen reader dapat menemukan hal ini sangat membantu, terutama ketika mereka berinteraksi dengan formulir. Memastikan urutan fokus setiap kolom formulir masuk secara logis membantu mereka memahami struktur dan mengetahui kapan kolom tersebut dikelompokkan bersama.

Cara menerapkan WCAG 2.4.3

Bagian ini menawarkan penjelasan yang disederhanakan dan contoh-contoh untuk membantu kamu memulai. Untuk panduan lengkap, selalu rujuk ke dokumentasi resmi WCAG.

Saat kamu mengimplementasikan pedoman ini, mungkin terdapat beberapa urutan fokus logis yang ada di halaman. Untuk memenuhi kriteria ini, hanya diperlukan satu urutan navigasi logis untuk elemen interaktif di halaman. Urutan ini juga harus dapat digunakan baik oleh screen reader maupun navigasi keyboard.

Sesuaikan source code HTML dengan urutan tabulasi yang diharapkan

Halaman web kadang mengandalkan CSS untuk menyesuaikan tata letak visual atau struktur konten. Namun, metode pengaturan ulang elemen ini bisa menyebabkan urutan tabulasi yang tidak teratur karena urutan fokus dikendalikan oleh susunan kode sumber HTML.

Oleh karena itu, urutan fokus dapat diselesaikan dengan memperbaiki bagaimana konten interaktif atau elemen-elemen disusun langsung dalam kode sumber HTML, bukan dengan menggunakan CSS untuk menyusun ulang bagian atau elemen. Dengan cara ini, elemen interaktif akan mencocokkan urutan tabulasi yang diharapkan di halaman.

Pada contoh di bawah ini, kita memiliki sebuah wadah dengan dua tautan, “Link Two” dan “Link One”. Dalam HTML, mereka terdaftar dalam urutan terbalik di mana “Link Two” mendahului “Link One”, namun CSS digunakan untuk mengubah urutan mereka. Meskipun ini akan memberikan urutan yang diharapkan secara visual, urutan tabulasi tetap akan memfokuskan pada “Link Two” terlebih dahulu, diikuti oleh “Link One”. Cara terbaik untuk memperbaiki urutan tabulasi di sini adalah dengan mengubah urutan elemen <a> langsung di dalam HTML.

<div id="link-list">
    <a id="two" href="<a href="https://link-one.com">https://link-two.com</a>
    <a id="one" href="<a href="https://link-one.com">https://link-one.com</a>
</div>

#link-list { display:flex; flex-direction: column; }
#two { order: 2; }
#one { order: 1; }

Ilustrasi urutan tab yang berubah karena susunan kode HTML

Link One dan Twp disusun dalam urutan terbalik melalui HTML, sementara CSS menukar urutan mereka secara visual. Panah digunakan untuk menggambarkan urutan tabulasi mereka, yang tidak logis karena kedua tautan tersebut ditukar.

Periksa tabindex

Sebagian besar elemen HTML interaktif dapat dipilih dengan tab secara default; ini termasuk tag berikut: <a>, <area>, <button>, <input>, <object>, <select>, dan <textarea>. Namun, ada kasus di mana elemen memerlukan penggunaan atribut tabindex untuk membuatnya dapat dipilih.

Ini terutama diperlukan saat menggunakan elemen antarmuka pengguna kustom seperti checkbox kustom atau menu pilih kustom. Nilai tabindex, dikombinasikan dengan ARIA, membuat elemen-elemen ini dapat diakses.

Ketika atribut tabindex ada di halaman, ia harus diperiksa dengan cermat, terutama saat menggunakan nilai selain 0, karena ini dapat menyebabkan urutan fokus yang terpecah. Ketika tabindex disetel ke integer positif, elemen-elemen menerima fokus dalam urutan menaik, yang dapat menyebabkan masalah di kemudian hari ketika konten diedit atau dipindahkan di halaman.

Praktik terbaik adalah mengatur tabindex ke 0 saja dan jangan pernah menggunakan integer positif. Integer positif mengganggu urutan tab di halaman, tetapi 0 mempertahankan urutan tab yang diharapkan.

Urutkan elemen interaktif

Saat meninjau konten, elemen seperti tautan dan kontrol formulir juga harus dipastikan menerima fokus dalam urutan yang logis. Tabulasi melalui elemen interaktif harus mengikuti urutan alami konten dan tidak memutuskan hubungan mereka satu sama lain.

Misalnya, tabulasi melalui formulir tidak boleh secara acak memindahkan pengguna melintasi kolom-kolom. Sebaliknya, kolom-kolom tersebut harus mengikuti urutan berurutan yang masuk akal, terutama ketika ada kelompok kolom, seperti pengumpulan alamat.

Atau, pikirkan menu navigasi di mana pengguna menabulasikan melalui tautan-tautan. Periksa bahwa urutannya masuk akal dan tidak secara sembarangan melalui item submenu dan item menu induk atau pergi ke tempat yang benar-benar berbeda di halaman.

Ilustrasi penggunaan tab pada formulir

Formulir online di mana urutan tab mengikuti urutan logis. Panah digunakan untuk menggambarkan urutan tabulasi dari kolom 'Name' dan 'Email' ke tombol 'Submit'.

Atur dialog atau popup

Konten dinamis seperti dialog yang dipicu dan popup adalah kasus unik, di mana source code HTML untuk kontennya tidak disematkan di halaman selama pemuatan awal.

Karena hal ini, beberapa fungsionalitas atau skrip tambahan perlu diterapkan untuk menangani urutan fokus dan memastikan bahwa kode sumber HTML untuk elemen-elemen baru ini langsung mengikuti tombol atau tautan yang memicunya. Dengan cara ini, urutan fokus dapat dipertahankan, dan tekan tombol tab pengguna berikutnya akan langsung membawa mereka ke konten dialog atau popup.

Ringkasan, berikut adalah hal-hal yang perlu diperhatikan saat menggunakan dialog atau modal:

  • Ketika dialog atau popup dibuka, fokus berpindah ke modal.
  • Selama dibuka, fokus terjebak di dalam modal, dan pengguna tidak dapat fokus pada elemen lain di halaman.
  • Setelah dialog atau popup ditutup, fokus dikembalikan ke elemen yang memicu pembukaan modal tersebut.

Kesimpulan

Menciptakan urutan fokus yang logis di halaman web sangat penting bagi pengguna yang mengandalkan navigasi keyboard. Ketika urutan fokus sesuai dengan struktur konten, ini membantu pengguna membangun peta mental yang jelas tentang situs dan menavigasi dengan lebih mudah.

Pengguna yang mengandalkan teknologi bantu dapat menjadi bingung dan frustrasi jika fokus melompat secara tidak terduga. Menerapkan urutan fokus yang logis, baik melalui mencocokkan kode sumber HTML dengan tata letak visual atau menggunakan tabindex dengan tepat, meningkatkan pengalaman pengguna dan aksesibilitas untuk semua orang.