0Pricing
Vue Academy · Ders

Storybook Eklentileri ve Erişilebilirlik Testleri

@storybook/addon-a11y, viewport eklentisi ve otomatik belgeleme için docs eklentisi.

Storybook Eklentileri ve Erişilebilirlik Testleri, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Storybook'u Eklentilerle Genişletme

Eklentiler, Storybook'a ek paneller ve araçlar bağlar. Denetimler ve Eylemlerin yanı sıra eklentiler erişilebilirlik, duyarlı görünüm alanları ve otomatik oluşturulan belgeler için de kullanılır.

Erişilebilirlik Eklentisi

@storybook/addon-a11y, her story üzerinde axe-core motorunu çalıştırır ve WCAG ihlallerini — kontrast sorunlarını, eksik etiketleri ve hatalı rolleri — doğrudan bir panelde bildirir.

// terminal
// npm install -D @storybook/addon-a11y

Eklenti Kaydetme

Eklentiyi .storybook/main.ts içindeki addons dizisine ekleyin. Yüklenmesi için Storybook'u yeniden başlatın.

// .storybook/main.ts
const config = {
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
  ],
}

a11y Panelini Okuma

Bir story açın ve Erişilebilirlik sekmesini kontrol edin. Her sonuç gruplandırılır: İhlaller (düzeltilmeli), Başarılı ve Tamamlanmamış (manuel inceleme gerekir). Bir ihlale tıkladığınızda ilgili öğe vurgulanır.

Yakaladığı Yaygın İhlaller

  • Metin ile arka plan arasındaki yetersiz renk kontrastı.
  • Erişilebilir adları olmayan düğmeler veya bağlantılar.
  • alt metni eksik görseller.
  • İlişkili etiketleri olmayan form girişleri.

Bunları yalıtılmış biçimde yakalamak, sürümden sonra yakalamaktan çok daha ucuzdur.

Story Başına a11y Yapılandırması

Kuralları parametreler aracılığıyla story başına ayarlayabilirsiniz — örneğin başka yerde ele aldığınız bir kuralı devre dışı bırakabilir veya atlanacak öğeleri belirtebilirsiniz.

export const NoContrastCheck = {
  parameters: {
    a11y: {
      config: {
        rules: [{ id: "color-contrast", enabled: false }],
      },
    },
  },
}

Viewport Eklentisi

Görünüm alanı eklentisi (essentials paketinin bir parçasıdır), duyarlı kırılma noktalarını doğrulamak için bir story'yi farklı cihaz boyutlarında — mobil, tablet ve masaüstü — önizlemenizi sağlar.

Görünüm Alanı Seçme

Bir araç çubuğu açılır listesi, canvas'ı önceden ayarlanmış cihaz çerçevelerine geçirir. Ayrıca story başına varsayılan bir görünüm alanı da ayarlayabilirsiniz.

export const Mobile = {
  parameters: {
    viewport: { defaultViewport: "mobile1" },
  },
}

Özel Görünüm Alanları

Tasarım sisteminizin kesin genişlikleriyle eşleşmesi için kendi kırılma noktalarınızı preview.ts içinde tanımlayın.

// .storybook/preview.ts
const preview = {
  parameters: {
    viewport: {
      viewports: {
        tablet: { name: "Tablet", styles: { width: "768px", height: "1024px" } },
      },
    },
  },
}

Docs Eklentisi

@storybook/addon-docs, otomatik oluşturulan belgeleri sağlar. tags: ["autodocs"] ile birlikte kullanıldığında her bileşen için özelliklerden ve story'lerden bir Docs sayfası oluşturur.

export default {
  component: Card,
  tags: ["autodocs"],
}

Güncel Kalan Belgeler

Belgeler gerçek bileşenlerden ve story'lerden oluşturulduğu için güncelliğini kaybedemez. Özellik tabloları gerçek özellik tanımlarını yansıtır ve örnekler canlı story'lerdir.

Kısa Kontrol

Storybook eklentilerini anlayıp anlamadığınızı kontrol edin.

Özet

Temel Storybook eklentilerini öğrendiniz:

  • @storybook/addon-a11y, story başına WCAG ihlallerini (kontrast, etiketler ve roller) bildirir ve story başına ayarlanabilir.
  • Görünüm alanı eklentisi, önceden ayarlanmış veya özel boyutlarla duyarlı kırılma noktalarını önizler.
  • @storybook/addon-docs ile tags: ["autodocs"], özelliklerden ve story'lerden her zaman güncel belgeleri otomatik olarak oluşturur.
  • Eklentileri main.ts dosyasındaki addons dizisine kaydedin.

Sıkça Sorulan Sorular

“Storybook Eklentileri ve Erişilebilirlik Testleri” dersi ücretsiz mi?

Evet — “Storybook Eklentileri ve Erişilebilirlik Testleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Storybook Eklentileri ve Erişilebilirlik Testleri” dersinde ne öğreneceğim?

@storybook/addon-a11y, viewport eklentisi ve otomatik belgeleme için docs eklentisi. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Storybook Eklentileri ve Erişilebilirlik Testleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Vue 3 için Storybook Kurulumu
  2. Bileşen Hikâyeleri Yazma
  3. Kontroller, Actions ve Args
  4. Storybook Eklentileri ve Erişilebilirlik Testleri
← Vue Academy Sayfasına Dön