Softonic

Generator CSS Spinner yang Aksesibel

Langkah 1 / 2
Berikutnya

Lingkaran yang berputar tidak berarti apa pun bagi pengguna pembaca layar, dan gerakan yang terus-menerus bisa mengganggu orang yang sensitif terhadap gerakan. Buat spinner di sini, lalu tambahkan markup dan aturan pengurangan gerakan di bawah ini.

Cara membuat spinner yang aksesibel

  1. 1

    Buat lingkarannya

    Atur Ukuran (px), Ketebalan, Warna, dan Kecepatan (s) di alat ini, lalu salin CSS-nya.

  2. 2

    Periksa kontras warna

    Pilih warna busur yang jelas terlihat di atas jalur abu-abu muda dan latar belakang halaman.

  3. 3

    Tambahkan markup status

    Berikan peran dan label pada elemen spinner, seperti yang ditunjukkan di halaman ini.

  4. 4

    Tambahkan aturan pengurangan gerakan

    Tempel media query di bawah CSS yang dihasilkan.

Apa yang dicakup dan tidak dicakup CSS yang dihasilkan

Alat ini memberi Anda bagian visualnya: lingkaran berbingkai dan rotasi. Loader yang hanya bersifat visual tidak memiliki arti bagi teknologi bantu, karena elemennya kosong. Aksesibilitas berasal dari markup dan satu aturan CSS tambahan yang Anda pasang di sekitarnya.

Markup yang mengumumkan status

<div class="loader" role="status" aria-label="Memuat hasil"></div>

role="status" menandai elemen sebagai wilayah langsung (live region), sehingga banyak pembaca layar membacakan labelnya saat elemen muncul. aria-label sebaiknya menyebutkan apa yang sedang dimuat, misalnya “Memuat hasil” atau “Menyimpan”, bukan kata umum. Hapus elemen saat pekerjaan selesai, lalu tampilkan konten baru.

Anda juga bisa menaruh teks yang terlihat di samping lingkaran. Teks yang terlihat membantu semua orang, termasuk mereka yang sulit melihat gerakan dengan jelas.

Hormati pengurangan gerakan

Sebagian pengunjung mengaktifkan pengaturan sistem yang meminta situs membatasi animasi. Hormati pengaturan itu dengan media query yang diletakkan setelah CSS yang dihasilkan:

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 3s;
  }
}

Aturan ini memperlambat rotasi alih-alih menghapusnya, sehingga loader tetap terlihat hidup tanpa gerakan cepat. Jika Anda lebih suka sinyal statis, gunakan animation: none; dan tampilkan teks “Memuat” di samping lingkaran.

Daftar periksa kontras dan ukuran

Pemeriksaan Target
Busur terhadap halaman Terlihat jelas, idealnya rasio 3:1 atau lebih
Busur terhadap jalur abu-abu Berbeda, sehingga busur bisa diikuti mata
Ukuran Minimal 24 px untuk hal yang harus disadari pengunjung
Kecepatan Antara 0,8 hingga 1,5 detik per putaran

Batasan

  • Generator memilih warna jalur (#eee) untuk Anda. Ubah di CSS yang Anda tempel jika latar belakang halaman Anda mirip.
  • Nilai kecepatan yang sangat cepat membuat lingkaran berkedip. Hindari nilai di bawah sekitar 0,5 detik.
  • Jangan hanya mengandalkan spinner untuk waktu tunggu yang lama. Beri tahu pengunjung apa yang sedang terjadi dengan teks.

Uji dengan cepat

Aktifkan opsi pengurangan gerakan di sistem operasi Anda lalu muat ulang halaman: lingkaran seharusnya berputar lebih lambat. Kemudian telusuri halaman dengan tombol Tab untuk memastikan spinner tidak pernah memindahkan fokus dari kontrol yang sedang digunakan pengunjung. Terakhir, nyalakan pembaca layar dan picu status pemuatan sekali, untuk mendengar apakah labelnya dibacakan saat elemen muncul dan apakah konten baru dapat dijangkau setelahnya.

Pertanyaan yang Sering Diajukan

Hanya jika Anda menambahkan markup. Elemen kosong tidak mengeluarkan suara, jadi beri role=“status” dan aria-label yang deskriptif.

Itu adalah media query CSS yang cocok ketika pengunjung meminta perangkatnya mengurangi animasi. Anda bisa memakainya untuk memperlambat atau menghentikan spinner.

Keduanya dapat diterima. Memperlambat mempertahankan kesan aktivitas, sedangkan menghentikannya adalah pilihan paling aman jika Anda juga menampilkan pesan teks seperti “Memuat”.

Jelaskan tindakannya dengan kata-kata sederhana, misalnya “Memuat hasil” atau “Menyimpan perubahan”. Hindari label yang samar seperti “spinner”.

Ukuran yang lebih besar dan kontras yang kuat membuatnya lebih mudah dilihat, tetapi keduanya tidak menggantikan label teks yang dibaca teknologi bantu.

Alat Terkait

Generator Konfigurasi Webpack

Buat webpack.config.js untuk webpack 5 bagi JavaScript biasa, React, atau Vue: TypeScript, Babel, CSS atau Sass, gambar, HtmlWebpackPlugin, server pengembangan, dan baris npm install.

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Validator XSD

Validasi dokumen XML terhadap skema XSD dan laporkan ketidakcocokan elemen dan tipe dengan nomor baris persis.

Dekoder Protocol Buffers

Dekode byte wire-format Protobuf secara lokal dari hex, Base64, Base64URL, teks, atau file; periksa kandidat field yang tepat dan ekspor laporan privat.

XML Formatter

Pretty-print dokumen XML dengan indentasi konsisten dan tangkap kesalahan well-formedness lengkap dengan nomor baris persis.

Alat ini tersedia dalam bahasa lain

Panduan dan contoh penggunaan