Kullanım kılavuzuna geç
accessibility-reviewyazan Anthropic

Accessibility Review Skill.

Claude Code ve Codex için tasarım incelemesi skill'i: bir tasarım veya sayfanın WCAG 2.1 AA denetimi: kontrast, klavye, dokunma hedefleri.

  • Tasarım İncelemesi & Erişilebilirlik
  • İnceleme raporu
anthropics/knowledge-work-plugins · design/skills/accessibility-review/SKILL.mdSKILL.md
--- name: accessibility-review description: Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", "check a11y", "is this accessible?", or when reviewing a design for color contrast, keyboard navigation, touch target size, or screen reader behavior before handoff. --- ## Usage ## Testing Approach ## Output ## Accessibility Audit: [Design/Page Name] ## If Connectors Available ## Tips
Başlık bilgileri ve bölüm başlıkları 2026-09-14 tarihinde kaynak dosyadan okunmuştur · tam hali 4.248 karakter

01 Ne yapar

accessibility-review Skill'i Claude Code ve Codex'te Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Bir tasarım veya sayfa için, "audit accessibility" ya da "check a11y" gibi ifadelerle tetiklenen ve argüman olarak bir Figma URL'si, bir URL veya yazılı bir açıklama alan WCAG 2.1 AA denetim rutini.

Algılanabilir, Kullanılabilir, Anlaşılabilir ve Sağlam ilkeleri altındaki on bir kriterin kısaltılmış hızlı başvuru kılavuzunu içerir: normal metin için 4.5:1, büyük metin ve UI bileşenleri için 3:1 kontrast, klavye erişimi, görünür odak ve 44x44 CSS piksel dokunma hedefleri; ayrıca sekiz yaygın sorun ve sorunların yaklaşık %30'unu yakalayan otomatik bir taramayla başlayan beş adımlı bir test yaklaşımı. Bulgular; önem derecesi sayıları, ilke bazlı tablolar, kontrast, klavye ve ekran okuyucu bölümleri ile önceliklendirilmiş düzeltmeler içeren sabit bir markdown raporunda toplanır.

Neler üretir

  • Tasarımın veya sayfanın adı ve WCAG 2.1 AA standardı ile başlıklandırılmış bir markdown erişilebilirlik denetim raporu.
  • Algılanabilir, Kullanılabilir, Anlaşılabilir ve Sağlam tablolarına ayrılmış; sorun, kriter, önem derecesi ve öneri sütunlarını içeren bir bulgular bölümü.
  • Her öğe için ekran okuyucunun okuduğu ad da dahil olmak üzere ayrı renk kontrastı, klavye gezinmesi ve ekran okuyucu tabloları.
  • Kullanıcıları engelleyen kritik düzeltmeleri, önemli iyileştirmeleri ve küçük kolaylıkları birbirinden ayıran sıralı bir öncelikli düzeltme listesi.
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Denetlenecek Şeyi Girin

    Komut, argüman olarak bir Figma URL'si, bir sayfa URL'si veya yazılı bir açıklama alır ve o hedefi denetler.

  2. 02
    On Bir AA Kriterini Kontrol Edin

    Hızlı başvuru kılavuzu kriterleri Algılanabilir, Kullanılabilir, Anlaşılabilir ve Sağlam başlıkları altında gruplar; her biri başarı kriteri numarası ve eşik değeriyle birlikte verilir.

  3. 03
    Beş Test Geçişini Çalıştırın

    Otomatik tarama, yalnızca klavyeyle gezinme, ekran okuyucu testi, kontrast doğrulama ve %200 yakınlaştırma; bu sırayla.

  4. 04
    Sabit Rapor Biçimini Yazın

    Önem derecesi özeti, her ilke için bir bulgular tablosu ve ayrı kontrast, klavye ve ekran okuyucu tabloları içeren tek bir markdown raporu.

  5. 05
    Bağlayıcı Varsa Kullanın

    Bir tasarım aracı bağlıysa Figma'dan renk değerlerini, yazı tipi boyutlarını ve dokunma hedeflerini okur; bir proje takip aracı bağlıysa her bulgu için ayrı bir kayıt açar.

02 Uyumunuzu bulun

accessibility-review Skill'i Ne Zaman Kullanmalı

İş bu tür bir tasarım incelemesi olduğunda Claude Code veya Codex'te accessibility-review skill'ini kullanın. Uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Devir teslimden önce bir tasarımı renk kontrastı, klavye gezinmesi, dokunma hedefi boyutu veya ekran okuyucu davranışı açısından gözden geçirme.
  • Bitmiş bir sayfayı denetleme: ona bir URL verebilirsiniz.
  • Bir tasarım aracı bağlıyken renk değerlerini, yazı tipi boyutlarını ve dokunma hedeflerini doğrudan bir Figma dosyasından okuma.
  • Denetimi takip edilen işe dönüştürme: her bulgu için ticket oluşturup bunları mevcut düzeltme epic'lerine bağlama.

Sınırları Bilin

  • Denetimi tam kapsam sayma: otomatik tarama sorunların çoğunu kaçırır ve gerçek yardımcı teknoloji testi hâlâ gereklidir.

Ne Sağlamalısınız

  • Tasarımın ya da sayfa referansının kendisiDenetim talimatına ilk argüman olarak yerleştirilir.

03 Skill'in içinde

accessibility-review Skill'inin Claude Code ve Codex'e verdiği kurallar

SKILL.md'nin ajan için belirlediği 7 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

  1. UI bileşenlerinde 3:1 kuralını uygulayın

    1.4.11 kapsamında UI bileşenleri ve grafikler için en az 3:1 metin dışı kontrast gereklidir.

  2. 44x44 dokunma hedeflerini zorunlu kılın

    2.5.5 kriterine göre dokunma hedefleri en az 44x44 CSS piksel olmalıdır.

  3. Her şeyi klavyeyle erişilebilir yapın

    Tüm işlevler klavye aracılığıyla (2.1.1) ve görünür bir odak göstergesiyle (2.4.7) kullanılabilir olmalıdır.

  4. 200% yakınlaştırmayı geçti/kaldı olarak değerlendirin

    Yerleşim 200% yakınlaştırmada test edilir ve bozulursa işaretlenir.

  5. Her bulguyu bir kritere bağlayın

    Bulgular tablolarındaki her satır, sorunun yanı sıra WCAG kriterini, önem derecesini ve öneriyi belirtir.

  6. Önem derecesini Kritik, Büyük veya Küçük olarak sınıflandırın

    Bulgular, öneri sütununda renkli işaretlerle gösterilen üç önem derecesinden biriyle etiketlenir.

  7. Kontrast ve klavyeyle başlayın

    Skill, en yaygın ve en etkili sorunları yakaladığı için öncelikle kontrast ve klavyeye odaklanır.

04 İşe koyun

accessibility-review'ı Claude Code veya Codex'e yükleyin

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

accessibility-review'ı Claude Code, Codex veya Ajanınıza Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill accessibility-review

design/skills/accessibility-review/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

Beceriye İlk Tasarım İnceleme Görevi Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt
Audit accessibility for [Figma URL for the checkout flow] before we hand it to engineering. Start with contrast and keyboard access, and flag anything that would block a screen reader user as critical.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

  • Her şeyde yalnızca klavyeyle gezinin.
  • Denetime güvenmek yerine VoiceOver veya NVDA ile test edin.
  • Gerçek kontrast oranlarını gereken değerlerle karşılaştırıp doğrulayın.
  • Öncelikli düzeltmeleri sırayla ele alın; engelleyici sorunlar, son rötuşlardan önce gelir.

OpenDesign içinde accessibility-review skill'ini SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan seçin.

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author
Anthropic
Skill dosyası
design/skills/accessibility-review/SKILL.md Doğrulamada içerik sağlama toplamı kaydedildi; commit 8f877b6
License
Apache-2.0 LICENSE dosyasından.
Repository yıldızları
24.012 GitHub anlık görüntüsü, bu katalogda 7 skill içeren anthropics/knowledge-work-plugins deposunun tamamı için 2026-09-14'te alındı. accessibility-review için bir derecelendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı
2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

  1. KullanımKomut biçimini ve bağımsız değişkenin denetime nasıl yerleştirildiğini gösterir.
  2. WCAG 2.1 AA Hızlı BaşvuruAlgılanabilir, Kullanılabilir, Anlaşılabilir ve Sağlam ilkeleri altında eşik değerleriyle birlikte listelenen on bir ölçüt.
  3. Sık Karşılaşılan SorunlarKontrast ve form etiketlerinden odak tuzaklarına ve zaman sınırlarına kadar sık tekrarlanan sekiz hata.
  4. Test YaklaşımıBeş aşama: otomatik tarama, klavye, ekran okuyucu, kontrast, %200 yakınlaştırma.
  5. ÇıktıÖnem düzeyi özeti, ilke tabloları, kontrast satırları ve öncelikli düzeltmeleri içeren rapor şablonu.
  6. Bağlayıcılar VarsaBir tasarım aracı veya proje takip aracı bağlandığında neler değişir.
  7. İpuçlarıKontrast ve klavye ile başlayın, gerçek yardımcı teknolojilerle test edin, etkiye göre önceliklendirin.
Skill'in Kendi Açıklaması
"Bir tasarım veya sayfada WCAG 2.1 AA erişilebilirlik denetimi gerçekleştir. "audit accessibility", "check a11y", "is this accessible?" ile tetikle veya bir tasarımı teslim öncesi renk kontrastı, klavye navigasyonu, dokunma hedefi boyutu ya da ekran okuyucu davranışı açısından gözden geçirirken kullan."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 4.248 karakterdir. GitHub'da tam dosyayı okuyun.

Erişilebilirlik İncelemesi

Gerçek Bir Tasarım İnceleme Görevinde accessibility-review Çalıştırın.

OpenDesign'ı indirin, accessibility-review'ı SKILL.md bağlantısından içe aktarın, yukarıdaki istemi yapıştırın ve sonuçtan önce planı okuyun.

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill accessibility-review

OpenDesign Masaüstü

Tek tasarım sistemi. Her çıktıda tutarlı bir marka

Tam Vibe Design Workspace içinde aynı marka kurallarını web sitelerine, sunumlara, etkileşimli prototiplere, panolara, görsellere ve HTML videolara uygulayın. Yerel Codex, Claude Code, Cursor ve diğer kodlama ajanlarını bağlayıp ücretsiz üretin.

  • Web, sunum, prototip, pano, görsel ve video
  • 140+ tasarım sistemi ve eksiksiz şablon ile beceri kitaplığı
  • Yerel Codex ve 21+ kodlama ajanını bağlayın · Ücretsiz
Ücretsiz indir

macOS ve Windows için