Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Accessibility
Code

Hands-on With ARIA: Elemen Homepage dan Navigasi Standar

by
Length:MediumLanguages:
This post is part of a series called Web Accessibility With ARIA.
Site Accessibility: Getting Started With ARIA
Hands-on With ARIA: Accessibility for eCommerce

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Ingin membuat situs web Anda lebih mudah diakses? Ingin menjadi yang pertama sejalan dengan antarmuka online baru yang datang ke market? Tidak jauh berbeda dari ARIA.

Kumpulan standar yang dikelola oleh W3C (World Wide Web Consortium) memberi Anda yang terbaik dari kedua dunia dengan menambahkan sejumlah atribut yang memungkinkan HTML untuk diperpanjang dalam cara yang berarti. Di sini, kita akan berjalan dengan ARIA, melihat bagaimana hal itu dapat bermanfaat bagi situs web informasi, dan melalui kasus penggunaan selangkah demi selangkah dengan contoh kode. Mari kita mulai!

Basic ARIA

ARIA (atau terkadang WAI-ARIA) adalah akronim untuk sekumpulan standar aksesibilitas, yang disebut Web Accessibility Initiative–Accessible Rich Internet Applications. Anda dapat melihat lebih banyak tentang landasan ARIA di artikel saya sebelumnya, tetapi mari kita bahas beberapa pilarnya sekarang.

Mendefinisikan Hubungan Non-Tradisional

Sebagian besar situs web dibangun menggunakan HTML, yang terutama menghubungkan elemen satu sama lain secara hierarkis melalui parent-child. Struktur ini sangat bagus untuk mendefinisikan konten, tetapi gagal ketika mendefinisikan antarmuka pengguna. Misalnya, di banyak situs dan aplikasi web, area konten dikontrol oleh tombol dalam elemen sibling memiliki elemen induk yang sama, tetapi dalam HTML mereka tidak memiliki hubungan langsung satu sama lain. Karena itu, menjadi sulit untuk menentukan elemen User Interface (UI) mana potongan konten ketika menggunakan teknologi assistive.

Ini membawa ke antarmuka yang lebih baru juga. Misalnya, jika Anda mencoba menavigasi situs web melalui perangkat pintar, ini menjadi sulit ketika perubahan elemen tidak terlihat.

ARIA memungkinkan Anda untuk mengikat elemen HTML bersama menggunakan atribut tambahan untuk mewakili jenis kontrol ini.

Klasifikasi Unsur Non-Rigid

Kekurangan lain dari HTML adalah ketidakmampuannya untuk memisahkan struktur dari intent.

Misalnya, Anda mungkin ingin membuat elemen gambar menjadi tombol yang dapat diklik. Namun, HTML masih mendefinisikan bahwa gambar hanya sebagai gambar, dan segala sesuatu di luar itu terjadi di tempat lain.

Dengan ARIA, intent dapat dipisahkan dari elemen, memungkinkan gambar ditandai sebagai tombol atau tautan untuk didefinisikan sebagai tooltip. Ini memberikan kontrol lebih kepada pengembang tentang UI, menciptakan hubungan yang lebih jelas.

Menciptakan daerah Landmark

Selain menandai elemen-elemen dalam UI, ARIA juga memberikan akses ke peran attribute—used untuk menentukan area halaman. Misalnya, Anda dapat menandai menu utama Anda sebagai navigasi dan area konten artikel Anda sebagai konten utama. Hal ini mempermudah pengguna untuk berpindah di seluruh area penting dari situs Anda, dan dapat mencegah kebingungan bagi mereka dengan tata letak situs yang tidak biasa atau rumit.

Kasus penggunaan: Small Business Homepage

Untuk mendapatkan pengalaman menambahkan ARIA ke situs, kita akan mengambil wireframe dari situs yang mungkin digunakan oleh bisnis kecil dan menerapkan atribut kita selangkah demi selangkah.

Example Page Wireframe
Halaman wireframe yang akan kita tandai

Demi kejelasan, kode yang akan kita kerjakan dihapuskan, dengan kelas CSS dan setiap fungsi dari CMS dihapus.

Hal pertama yang kita ingin lakukan adalah memecah wireframe kita menjadi beberapa bagian untuk membuat penambahan dalam ARIA secara keseluruhan lebih sederhana. Pada gambar di bawah, Anda akan melihat bahwa saya telah memilih untuk membagi situs menjadi lima bagian utama:

  • navigasi
  • konten
  • Sidebar
  • formulir kontak
  • elemen UI khusus

Dalam kasus kita, tampak seperti ini:

Wireframe broken into sections
Bagian yang akan kita kerjakan

Ketika breaking situs Anda ke dalam area seperti ini, kita mencari dua hal. Yang pertama adalah elemen utama yang dapat didefinisikan oleh landmark ARIA: banner, navigasi, main, complementary, info konten, pencarian, dan form. Ini mewakili bagian-bagian penting dari situs kita, dan apa pun yang tidak perlu untuk menggunakannya tidak akan ditandai sebagai landmark (misalnya iklan).

Hal kedua yang harus dicari adalah elemen khusus yang perlu diklarifikasi dengan ARIA. Dalam banyak kasus, ini cukup sederhana (seperti menandai gambar sebagai gambar), tetapi untuk beberapa elemen UI, itu bisa menjadi sedikit rumit.

Setelah kita tahu area apa yang perlu diimplementasikan oleh ARIA, kita dapat mulai memindahkannya secara sistematis. Mari mulai dengan navigasi situs.

Navigasi

Dalam contoh kita, Anda akan melihat bahwa kita memiliki beberapa jenis navigasi. Yang pertama adalah menu seperti yang terlihat di sebagian besar situs, mencantumkan beberapa halaman untuk situs tersebut. Langsung di bawah ini adalah menu yang lebih kecil yang memiliki opsi bagi pengguna.

Kita ingin menandai ini dengan atribut role="navigation" sehingga mereka dapat dengan mudah dipilih sebagai menu situs. Ini mengarah pada pertanyaan: haruskah mereka dikelompokkan bersama menjadi satu navigasi tunggal, atau ditandai sebagai dua landmark terpisah?

Untuk menjawab pertanyaan ini dalam proyek Anda sendiri, Anda biasanya dapat mengajukan dua pertanyaan kepada diri sendiri:

  1. Apakah intent untuk menu ini berbeda? Dalam contoh kita, menu teratas menavigasi halaman pilar situs, sementara menu yang lebih kecil berfokus pada hal-hal yang mungkin diperlukan pengguna yang login. Maksud ini berbeda, jadi masuk akal untuk memisahkannya.

  2. Apakah menu di dalam elemen parent yang sama? Saya tahu ini tampaknya berlawanan dengan intuisi karena ARIA dirancang untuk membantu kita mengatasi jenis pembatasan hubungan ini, tetapi dalam hal ini kurang tentang apa yang mungkin dan lebih banyak tentang apa yang benar bagi pengguna. Memiliki single menu defined, tetapi dengan setengahnya di satu lokasi dan setengah lainnya di tempat lain, membuat navigasi menjadi lebih sulit.

Untuk kasus kita, kita akan memperlakukan navigasi kita sebagai dua landmark terpisah. Jadi kita akan membuat beberapa perubahan pada kode. Untuk mulai, kita hanya memiliki HTML dasar:

Sekarang, kita akan membubuhi keterangan dengan beberapa landmark.

Langkah berikutnya mendefinisikan Landmark tersebut adalah untuk memberikan pengguna petunjuk mengenai apa maksud dari setiap menu. Jika kita membiarkan keduanya sebagai navigasi tanpa informasi lebih lanjut, itu hanya membuat hal-hal lebih sulit untuk ditafsirkan. Jadi, mari tambahkan label yang berarti pada itu menggunakan atribut aria-label:

Di luar itu, kita ingin menambahkan role markup tambahan ke menu kita untuk memberi tahu pengguna bahwa ini adalah menu, dan tandai setiap tautan dalam sebagai item menu:

Area Konten

Sekarang ke area konten. Di sini, kita akan menandai penampung yang berisi keseluruhan konten utama kita dengan role="main". Sekali lagi, untuk perbandingan, inilah kode awal kita.

Dan inilah tampilannya setelah kita menambahkan landmark "main".

Dalam konten itu, kita akan terus menemukan setiap elemen yang memiliki maksud yang tidak sesuai dengan definisi HTML-nya.

Pertama, kita akan mengurus gambar yang bertindak sebagai tombol dengan menambahkan role "button":

Tautan yang mengaktifkan modal ini sedikit lebih sulit, karena itu tergantung pada apa yang ada di dalam modal itu sendiri. Bagi kita, kita akan mengatakan itu adalah tooltip:

Dalam konten utama kita, kita juga memiliki form pencarian. Ini memiliki lapisan tambahan kompleksitas, karena itu adalah form pencarian menggunakan elemen HTML, dan itu juga memenuhi syarat sebagai box landmark pencarian. Kita akan menandainya seperti ini:

Di luar itu, Anda dapat mendefinisikan setiap elemen dengan tag ARIA yang tepat. Untuk sebagian besar situs, ini bisa menjadi beban waktu yang terlalu banyak pada proses pengembangan, meskipun di sebagian besar CMS dapat diotomatiskan. Jika tidak dapat, jika definisi HTML elemen sesuai dengan maksud penggunaannya, maka itu dapat dianggap sebagai prioritas rendah saat membuat penerapan ARIA. Inilah area konten utama setelah membuat semua perubahan ini:

Sidebar

Sidebar situs dapat memiliki banyak bentuk. Dalam kasus kita, ini menyediakan konten tambahan yang terkait dengan situs, dengan list posting terkait di bagian bawah.

Inilah markup awal untuk sidebar:

Untuk menentukan konten, kita ingin memberikannya role "complementary", memberi tahu pengguna bahwa informasi di sidebar adalah konten tambahan yang terkait dengan konten utama. Itu bisa terlihat seperti ini:

Postingan terkait di bawah ini dapat dianggap sebagai bentuk navigasi, yang memungkinkan pengguna untuk mengeksplorasi lebih jauh postingan situs. Kita ingin menandainya dengan role "navigation", dan memberinya label yang sesuai, seperti:

Setiap sidebar berbeda dan mungkin memerlukan kombinasi role dan landmark yang berbeda. Jika sidebar Anda memiliki iklan, maka sebaiknya jangan menandai elemen itu. Jika ada form pencarian di sidebar Anda, tandai dengan peran yang sesuai. Setiap menu yang muncul di sidebar harus mengikuti pola yang sama seperti yang kita diskusikan di bagian navigasi:

  • sebuah landmark "navigation"
  • role "menu" untuk penampung menu
  • role "menuitem" untuk masing-masing nested item

Inilah tampilan sidebar akhir kita:

Penanganan Contact Form

Terakhir, di bagian bawah halaman kita adalah bentuk ajakan untuk action, meminta pengguna nama dan email, dengan tombol Kirim standar di bawah ini. Ketika datang ke form, ada tiga bagian untuk diingat:

  1. Berikan form landmark role "form": karena formulir adalah bagian utama dari situs, kita perlu memudahkan pengguna untuk mendapatkannya. Kita melakukannya dengan memberikannya peran penting

  2. Tetapkan role yang cocok untuk elemen. Form adalah area umum untuk maksud dan definisi HTML yang tidak cocok. Tambahkan role ARIA jika diperlukan, terutama ketika menyangkut checkbox, slider, tooltips, dan elemen lain yang dapat diimplementasikan dalam berbagai cara.

  3. Cocokkan label dengan elemen yang sesuai. HTML menangani ini dengan cara basic, memungkinkan Anda menggunakan elemen <label>  untuk mengaitkan label dengan input. Form dapat dengan mudah memiliki struktur yang lebih kompleks yang mencegahnya bekerja; untungnya kita bisa memperbaikinya dengan atribut aria-labelledby.

Mari kita lihat seperti apa kode kita yang diperbarui:

Menguji Implementasi Anda

Dengan semua implementasi kita di tempat, kita sekarang perlu memeriksa bahwa mereka bekerja dengan benar. Untuk melakukan ini, paling mudah menggunakan alat aksesibilitas yang ada seperti Google’s Accessibility Developer Tools atau IBM’s Dynamic Assistant Plugin.

Kedua hal ini terintegrasi dengan alat pengembang Chrome untuk memungkinkan inspeksi real-time dari aksesibilitas situs Anda. W3C juga memiliki daftar alat yang lebih besar untuk aksesibilitas.

Membuat Web Lebih Mudah Diakses

Situs wireframe kita sekarang memiliki ARIA! Meskipun masih banyak ARIA yang tersisa untuk dijelajahi, Anda sekarang memiliki pengetahuan yang cukup untuk membuat sebagian besar situs yang Anda gunakan lebih mudah diakses. Di luar itu, situs Anda juga lebih siap untuk menangani sejumlah teknologi internet-traversing baru yang mungkin muncul.

Apakah ada aspek lain dari ARIA yang Anda ingin kita jelajahi? Ada pertanyaan tentang artikel ini? Jangan ragu untuk menambahkannya di komentar di bawah!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.