Addon Storybook dan Pengujian Aksesibilitas
@storybook/addon-a11y, addon viewport, serta addon docs untuk dokumentasi otomatis.
Addon Storybook dan Pengujian Aksesibilitas adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.
Memperluas Storybook dengan Pengaya
Pengaya menambahkan panel dan alat ekstra ke Storybook. Selain Controls dan Actions, pengaya mencakup aksesibilitas, tampilan responsif, dan dokumentasi yang dibuat secara otomatis.
Pengaya Aksesibilitas
@storybook/addon-a11y menjalankan mesin axe-core pada setiap cerita dan melaporkan pelanggaran WCAG — masalah kontras, label yang hilang, dan peran yang salah — langsung di sebuah panel.
// terminal
// npm install -D @storybook/addon-a11yMendaftarkan Pengaya
Tambahkan pengaya ke array addons di .storybook/main.ts. Mulai ulang Storybook agar pengaya tersebut dimuat.
// .storybook/main.ts
const config = {
addons: [
"@storybook/addon-essentials",
"@storybook/addon-a11y",
],
}Membaca Panel Aksesibilitas
Buka sebuah cerita dan periksa tab Aksesibilitas. Setiap hasil dikelompokkan: Pelanggaran (wajib diperbaiki), Lulus, dan Belum Lengkap (memerlukan peninjauan manual). Mengeklik sebuah pelanggaran akan menyoroti elemennya.
Pelanggaran Umum yang Ditemukan
- Kontras warna yang tidak memadai antara teks dan latar belakang.
- Tombol atau tautan tanpa nama yang dapat diakses.
- Gambar tanpa teks
alt. - Masukan formulir tanpa label terkait.
Menemukan masalah ini secara terisolasi jauh lebih murah daripada setelah rilis.
Konfigurasi Aksesibilitas per Cerita
Anda dapat menyesuaikan aturan untuk setiap cerita melalui parameter — misalnya menonaktifkan aturan yang Anda tangani di tempat lain, atau menandai elemen untuk dilewati.
export const NoContrastCheck = {
parameters: {
a11y: {
config: {
rules: [{ id: "color-contrast", enabled: false }],
},
},
},
}Pengaya Tampilan
Pengaya viewport (bagian dari essentials) memungkinkan Anda melihat pratinjau cerita pada berbagai ukuran perangkat — seluler, tablet, dan komputer desktop — untuk memverifikasi titik henti responsif.
Memilih Tampilan
Menu tarik-turun di bilah alat mengubah canvas menjadi bingkai perangkat prasetel. Anda juga dapat menetapkan tampilan bawaan untuk setiap cerita.
export const Mobile = {
parameters: {
viewport: { defaultViewport: "mobile1" },
},
}Tampilan Kustom
Tentukan titik henti Anda sendiri di preview.ts agar sesuai dengan lebar persis sistem desain Anda.
// .storybook/preview.ts
const preview = {
parameters: {
viewport: {
viewports: {
tablet: { name: "Tablet", styles: { width: "768px", height: "1024px" } },
},
},
},
}Pengaya Dokumentasi
@storybook/addon-docs menyediakan dokumentasi yang dibuat secara otomatis. Jika digabungkan dengan tags: ["autodocs"], pengaya ini menghasilkan halaman Docs untuk setiap komponen berdasarkan properti dan cerita.
export default {
component: Card,
tags: ["autodocs"],
}Dokumentasi yang Selalu Terkini
Karena dokumentasi dibuat dari komponen dan cerita nyata, dokumentasi tersebut tidak akan ketinggalan zaman. Tabel properti mencerminkan definisi properti yang sebenarnya, dan contoh-contohnya adalah cerita langsung.
Pemeriksaan Singkat
Periksa pemahaman Anda tentang pengaya Storybook.
Ringkasan
Anda telah mempelajari pengaya utama Storybook:
@storybook/addon-a11ymelaporkan pelanggaran WCAG untuk setiap cerita (kontras, label, dan peran) serta dapat disesuaikan untuk setiap cerita.- Pengaya viewport menampilkan pratinjau titik henti responsif dengan ukuran prasetel atau kustom.
@storybook/addon-docsdengantags: ["autodocs"]secara otomatis membuat dokumentasi yang selalu terkini dari properti dan cerita.- Daftarkan pengaya dalam array
addonsdimain.ts.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Addon Storybook dan Pengujian Aksesibilitas” gratis?
Ya — teks lengkap “Addon Storybook dan Pengujian Aksesibilitas” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Addon Storybook dan Pengujian Aksesibilitas”?
@storybook/addon-a11y, addon viewport, serta addon docs untuk dokumentasi otomatis. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Vue Academy?
Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Addon Storybook dan Pengujian Aksesibilitas” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Menyiapkan Storybook untuk Vue 3
- Menulis Story Komponen
- Controls, Actions, dan Args
- Addon Storybook dan Pengujian Aksesibilitas