Status dan Properti: diperluas, dicentang, dinonaktifkan

Peran menyatakan identitas suatu elemen. Status dan properti menyatakan perilakunya saat ini: apakah elemen terbuka, dicentang, sibuk, atau tidak tersedia?

Status berubah saat pengguna berinteraksi, seperti status diperluas yang beralih. Properti cenderung tetap, seperti penanda wajib pada suatu kontrol.

aria-expanded memberi tahu pengguna apakah wilayah suatu kontrol sedang terbuka. Anda harus mengubah nilainya di JavaScript setiap kali status berubah.

aria-checked melaporkan apakah kotak centang atau sakelar khusus sedang aktif. Kotak centang bawaan sudah mengumumkannya secara otomatis.

Pada kontrol formulir sungguhan, atribut HTML disabled secara otomatis mengeluarkannya dari fokus dan mengumumkannya sebagai tidak tersedia.

aria-disabled mengumumkan bahwa kontrol khusus dinonaktifkan, tetapi tidak memblokir klik. Anda tetap harus menghentikan tindakannya di dalam kode.

aria-selected menandai item yang dipilih dalam daftar tab, kotak daftar, atau kisi sehingga pengguna tahu opsi mana yang sedang aktif.

Tombol sakelar menggunakan aria-pressed untuk melaporkan keadaan aktif atau tidak aktif, seperti tombol tebal yang tetap menyala saat teks dicetak tebal.

Bug nomor satu adalah status yang kedaluwarsa. Jika tampilan berubah tetapi aria-expanded tetap false, pengguna pembaca layar akan mendengar informasi yang salah.

Beberapa status memuat angka. Penggeser menunjukkan posisinya dengan aria-valuenow, ditambah aria-valuemin dan aria-valuemax untuk rentangnya.

Dua properti formulir yang berguna: aria-required menandai kolom yang wajib diisi, sedangkan aria-invalid mengumumkan kolom yang gagal divalidasi.

Anda telah mempelajari bahwa status dan properti menjelaskan kondisi suatu elemen. Utamakan atribut bawaan, dan selalu jaga agar status ARIA tetap sinkron dengan antarmuka.