Dasar Aksesibilitas Web untuk Pemula di Situs Next.js

function SkipLink(): JSX.Element {
  return (
    <a
      href="#main-content"
      className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:font-bold focus:border-2"
      style={{
        backgroundColor: "var(--primary)",
        color: "var(--text-dark)",
        borderColor: "var(--border-color)",
      }}
    >
      Skip to main content
    </a>
  );
}

sr-only menyembunyikan link secara visual tetapi tetap ada di urutan tab, dan focus:not-sr-only memunculkannya begitu menerima fokus. Link ini menuju elemen main yang dirender SiteChrome dengan id yang sama. Labelnya string bahasa Inggris literal di komponen ini, jadi halaman berbahasa lain perlu menerjemahkannya.

                      <button
                        key={option}
                        type="button"
                        className="quiz-option"
                        data-state={state}
                        aria-pressed={choice === oi}
                        disabled={locked}
                        onClick={() => choose(qi, oi)}
                      >

Setiap jawaban adalah button asli, jadi dukungan keyboard dan perannya datang dari browser. Teks yang terlihat menjadi nama aksesibel, dan aria-pressed menambahkan satu hal yang tidak bisa dikatakan HTML sendiri: opsi mana yang dipilih. Badge huruf diberi aria-hidden agar tidak dibaca dua kali, dan tiap pertanyaan berada dalam fieldset dengan legend.

*:focus-visible {
  outline: 3px solid var(--accent-yellow);
  outline-offset: 2px;
}

Satu aturan memberi setiap elemen yang bisa difokuskan outline tebal, dengan offset dari tepi agar tidak bertabrakan dengan border. Opsi kuis menambahkan aturan :focus-visible sendiri di atasnya, dengan outline oranye, sehingga komponen bisa memperhalus ring tanpa menghapusnya.

@media (prefers-reduced-motion: reduce) {
  .mx-node,
  .mx-edge path,
  .mx-zone rect,
  .mx-zone ellipse,
  .mx-step,
  .mx-progress-dot {
    transition-duration: 0.01ms;
  }
  .mx-ring,
  .mx-signal {
    display: none;
  }
  .mx-predict,
  .mx-predict-option,
  .mx-predict-result {
    animation: none;
  }
}

Transisi dipersingkat hingga nyaris nol dan tidak dihapus, jadi perubahan status tetap terjadi dan setiap elemen tetap berakhir di tempat yang benar. Hanya ring dan sinyal dekoratif yang disembunyikan, yang murni gerakan. Komentar di bagian itu merangkumnya: informasi tetap, gerakan hilang.

  return (
    typeof window !== "undefined" &&
    window.matchMedia("(prefers-reduced-motion: reduce)").matches
  );
}

CSS tidak bisa menghentikan animasi yang digerakkan skrip, jadi komponen menanyakan media query yang sama dari JavaScript. Pengecekan typeof window menjaga fungsi aman saat render server, ketika tidak ada window dan tidak ada preferensi untuk dibaca.