accessibility-complianceyazan Seth Hobson

Accessibility Compliance Skill.

Claude Code ve Codex için tasarım incelemesi skill'i: mobil erişilebilirlik ve yardımcı teknoloji desteği ile WCAG 2.2 uyumlu arayüzler.

Tasarım İncelemesi & Erişilebilirlik
UI kodu

OpenDesign İndir Kullanım kılavuzunu görüntüle

wshobson/agents · plugins/ui-design/skills/accessibility-compliance/SKILL.mdSKILL.md

--- name: accessibility-compliance description: Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices ## Testing Tools

2026-09-14 tarihinde kaynak dosyadan okunan ön bilgi ve bölüm başlıkları · tam hâliyle 2.402 karakter

01 Ne yapar

accessibility-compliance 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

Bu skill, mobil erişilebilirlik ve yardımcı teknoloji desteğiyle WCAG 2.2 uyumlu arayüzler uygular. Ajanları semantik HTML, ARIA desenleri, klavye navigasyonu, odak yönetimi, ekran okuyucu uyumluluğu ve dinamik içerik duyuruları konusunda yönlendirir. Skill; iOS VoiceOver, Android TalkBack ve masaüstü ekran okuyucularını (NVDA, JAWS) kapsar.

Özel ARIA yerine yerel öğeleri öne çıkarır; prefers-reduced-motion ve prefers-contrast gibi kullanıcı tercihlerine saygı gösterir; otomatik araçlarla (axe DevTools, WAVE, Lighthouse) ve gerçek yardımcı teknolojilerle test etmeyi önerir. Bu skill; eksik alt metni, zayıf kontrastı, klavye tuzaklarını ve etiketsiz form girişlerini kapsayan yaygın ihlalleri ele alır.

Neler üretir

Doğru ARIA kalıpları, odak yönetimi ve ekran okuyucu desteğiyle WCAG 2.2 uyumlu arayüzler

Örnek istemi görün ↗

Nasıl Çalışır

01
Klavye öncelikli etkileşimler tasarlayın
Tüm etkileşimli bileşenlerin fare olmadan çalışmasını sağlayın; işaretçi olaylarını eklemeden önce klavye gezinmesini kurun.

02 Uyumunuzu bulun

accessibility-compliance Skill Ne Zaman Kullanılır

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

İyi Uyum

Bir web uygulaması veya site için WCAG 2.2 Level AA ya da AAA uyumluluğu uygulama
VoiceOver, NVDA, JAWS veya TalkBack ile çalışan ekran okuyucu erişilebilir arayüzler oluşturma
Etkileşimli bileşenlere klavye gezinmesi ve odak yönetimi ekleme
Mevcut arayüzlerde erişilebilirlik denetimleri yürütme ve ihlalleri giderme
Arayüzde hareket azaltma ve yüksek kontrast kullanıcı tercihlerini destekleme

03 Skill'in içinde

accessibility-compliance Skill'inin Tasarım İncelemesine Katkısı

SKILL.md'nin Claude Code veya Codex'e talimat verdiği 2 şey, dosyanın kendi bölüm sırasına göre.

En İyi Uygulamalar
Mümkün olduğunda ARIA yerine yerel elementleri tercih edin; Kullanıcı testlerine engelli bireyleri dahil edin; Etkileşimleri fare olmadan çalışacak şekilde tasarlayın
Test Araçları
axe DevTools, WAVE, Lighthouse; VoiceOver (macOS/iOS), NVDA/JAWS (Windows), TalkBack (Android); NoCoffee (görme), Silktide (çeşitli engeller)

04 İşe koyun

Claude Code veya Codex'te accessibility-compliance kurulumu

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

Claude Code, Codex veya Kendi Ajanınıza accessibility-compliance ekleyin

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

Terminal

npx skills add https://github.com/wshobson/agents --skill accessibility-compliance

plugins/ui-design/skills/accessibility-compliance/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 the [product dashboard] for WCAG 2.2 Level AA compliance. Check for missing alt text, color contrast violations, keyboard traps, and unlabeled form inputs. Implement focus management for the [modal dialog component] and add ARIA live regions to announce [real-time notification updates]. Test with VoiceOver and ensure the interface respects prefers-reduced-motion.

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:

Ekran okuyucu duyurularını ve gezinmeyi doğrulamak için macOS veya iOS'ta VoiceOver ile elle test edin
Çeşitli engelleri test etmek için NoCoffee gibi görme simülatörlerini ve Silktide gibi engellilik simülatörlerini kullanın

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

OpenDesign İndir Hızlı başlangıcı okuyun

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: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill dosyası: plugins/ui-design/skills/accessibility-compliance/SKILL.md Doğrulama sırasında kaydedilen içerik sağlama toplamı; commit 4236bb9
License: MIT LICENSE dosyasından.
Repository yıldızları: 39.635 GitHub anlık görüntüsü 2026-09-14 tarihinde tüm wshobson/agents deposu için alınmıştır; bu katalogda 18 skill bulunmaktadır. accessibility-compliance için bir değerlendirme 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

Bu Skill'i Ne Zaman KullanmalısınızWCAG uyumu, ekran okuyucular, klavye ile gezinme, odak yönetimi, formlar, mobil erişilebilirlik, denetimler
Ayrıntılı kalıplar ve çözümlü örneklerÜst düzey rehberlik yetersiz kaldığında kalıp belgeleri için references/details.md dosyasına yönlendirir
En iyi uygulamalarSekiz temel kural: anlamsal HTML, gerçek kullanıcı testi, klavye öncelikli, odak stilleri, metin alternatifleri, yakınlaştırma, canlı bölgeler, tercihler
Yaygın sorunlarEksik alt metni, zayıf kontrast, klavye tuzakları, etiketsiz girişler, otomatik oynatma, hatalı özel kontroller, atlama bağlantıları, odak sırası
Test araçlarıOtomatik araçlar (axe, WAVE, Lighthouse), elle ekran okuyucular (VoiceOver, NVDA, JAWS, TalkBack), simülatörler (NoCoffee, Silktide)

Skill'in Kendi Açıklaması

"Mobil erişilebilirlik, kapsayıcı tasarım kalıpları ve yardımcı teknoloji desteği ile WCAG 2.2 uyumlu arayüzler uygulayın. Erişilebilirlik denetimi yaparken, ARIA kalıpları uygularken, ekran okuyucular için geliştirirken veya kapsayıcı kullanıcı deneyimleri sağlarken kullanın."

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 2.402 karakterdir. Dosyanın tamamını GitHub'da okuyun.

Erişilebilirlik Uyumluluğu

Gerçek bir Tasarım İnceleme Görevi üzerinde accessibility-compliance çalıştırın.

OpenDesign'ı indirin, accessibility-compliance'ı SKILL.md linkinden içe aktarın, yukarıdaki istemi yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın