accessibilityyazan Addy Osmani

Accessibility Skill.

Claude Code ve Codex için tasarım incelemesi skill'i: WCAG 2.2'yi izleyerek web erişilebilirliğini denetler ve geliştirir.

Tasarım İncelemesi & Erişilebilirlik
İnceleme raporu

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

addyosmani/web-quality-skills · skills/accessibility/SKILL.mdSKILL.md

--- name: accessibility description: Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible". --- ## Evidence-led audit workflow ## WCAG Principles: POUR ## Conformance levels ## Perceivable ## Operable ## Understandable

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

01 Ne yapar

Erişilebilirlik 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, web erişilebilirliğini WCAG 2.2'ye göre denetler ve düzeltir; POUR — Algılanabilir, İşletilebilir, Anlaşılabilir, Sağlam — ile A, AA ve AAA uygunluk seviyeleri etrafında düzenlenmiştir. Kanıta dayalı bir iş akışı yürütür: işlenmiş bir sayfa mevcutsa canlı bir Lighthouse erişilebilirlik denetimi çalıştırır (Chrome DevTools MCP ile lighthouse_audit), başarısız düğümleri kullanarak bileşeni belirler, take_snapshot ile erişilebilirlik ağacını inceler, ardından kaynağı düzeltip denetimi yeniden çalıştırır.

Canlı araçlar yoksa Lighthouse CLI veya axe otomatik kısmı karşılar ve aynı manuel kontroller yine geçerlidir. Alt metni, kontrast oranları, odak görünürlüğü, hedef boyutu, azaltılmış hareket, form hataları ve erişilebilir kimlik doğrulama için kod düzeyinde kurallar, ayrıca kritik, ciddi ve orta olarak sıralanmış bir triyaj listesi sunar.

Neler üretir

Kritik (hemen düzeltin), Ciddi (yayına almadan önce düzeltin) ve Orta (yakında düzeltin) katmanlarına ayrılmış, örnekleri adlandırılmış önceliklendirilmiş sorun listesi.
Düzeltilmiş işaretleme ve doğrudan yapıştırılabilir kod parçaları; simge düğmesi etiketlerini yardımcı teknolojilere açan görsel olarak gizli bir yardımcı sınıf dahil.
references/A11Y-PATTERNS.md dosyasında form etiketleri, modal odak tuzağı, atlama bağlantısı, ARIA sekmeleri, canlı bölgeler, hata yönetimi ve ekran okuyucu komutlarını kapsayan tam referans uygulamaları.

Örnek istemi görün ↗

Nasıl Çalışır

01
Canlı Erişilebilirlik Denetimi Çalıştırın
İşlenmiş bir sayfayla başlayıp canlı bir Lighthouse erişilebilirlik denetimi çalıştırın; genel herkese açık sayfalar için mobil gezinme modunu, yeniden yüklemenin kimliği doğrulanmış durumu kaybedeceği durumlarda ise anlık görüntü modunu kullanın.
02
Başarısız Olan Bileşeni Belirleyin
Genel kalıplar için tüm depoyu grep'lemek yerine, başarısız denetim düğümlerini kullanarak belirli bileşene veya şablona işaret edin.
03
Erişilebilirlik Ağacını İnceleyin
Adları, rolleri, durumları, yer işaretlerini ve başlık yapısını kontrol etmek için işlenmiş erişilebilirlik ağacı anlık görüntüsünü okuyun, ardından etkilenen akışı klavyeyle deneyin.
04
Kaynağı Düzeltin ve Yeniden Doğrulayın
İşlenmiş çıktıyı değil kaynağı değiştirin, ardından düzeltmeyi doğrulamak için aynı denetimi ve aynı manuel etkileşimi tekrarlayın.
05
CLI Araçlarına Geri Dönün
Canlı tarayıcı araçları yoksa Lighthouse CLI veya axe çıktısını aynı manuel kontrollerle birleştirin; çünkü otomasyon tek başına engellerin yalnızca bir kısmını kapsar.

02 Uyumunuzu bulun

accessibility Skill Ne Zaman Kullanılır

İş bu tür bir tasarım incelemesi olduğunda Claude Code veya Codex'te accessibility skillini kullanın. Uygunluk ve sınırlar aşağıda skillin kendi dosyasından alınmıştır.

İyi Uyum

Erişilebilirlik denetimi, WCAG uyumluluğu çalışması, ekran okuyucu desteği, klavye ile gezinme veya "erişilebilir hale getir" şeklinde ifade edilen bir istek.
AA seviyesini hedefleyen ekipler; dosya bunu standart hedef ve birçok yargı alanında yasal bir gereklilik olarak ele alır.
Sabit üstbilgi veya altbilgilerin klavye odak halkasını yuttuğu sayfalar; WCAG 2.2'de yeni bir ölçüt.
Fare olmadan tamamen kullanılabilir olması gereken arayüzler; etkileşimli olmayan öğelerden oluşturulan özel widget'lar dahil.

Sınırları Bilin

Satır içi metin bağlantıları, tarayıcı tarafından kontrol edilen boyutlandırma ve 24px'lik dairesi başka bir hedefle çakışmayan hedefler, minimum hedef boyutu kuralından muaftır.
AAA düzeyi, bir gereklilik yerine isteğe bağlı olarak ele alınır.
Dosyanın işaret ettiği anti-desen: yerel bir button'a manuel klavye etkinleştirmesi eklemek; Enter ve Space zaten click tetiklediği için bu, olayı iki kez tetikler.

Ne Sağlamalısınız

İşlenmiş bir sayfaCanlı iş akışı, işlenmiş bir sayfa hazır olduğunda başlar; çünkü denetim, düğüm listesi ve erişilebilirlik ağacı hep ondan gelir.
Sayfanın gezinme moduBunun herkese açık genel bir sayfa mı yoksa yeniden yüklemenin kimliği doğrulanmış veya kullanıcı tarafından oluşturulmuş durumu kaybettireceği bir akış mı olduğunu ajana söyleyin; çünkü mobil gezinme mi yoksa snapshot modu mu kullanılacağını bu belirler.
Denenecek klavye akışıDenetim sırasında, erişilebilirlik ağacı incelemesinin yanı sıra etkilenen etkileşimi klavyeyle adım adım denemeye hazır olun.

03 Skill'in içinde

Erişilebilirlik 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ı.

Önce yerel bir öğeye başvurun
Yerel button, anchor ve form denetimleri Enter/Space etkinleştirmesini, odağı ve yardımcı teknoloji semantiğini zaten yönetir; bu yüzden manuel klavye işleme, değiştiremediğiniz öğeler için son çaredir.
Odağı görünür biçimde stillendirin
Ana hatları asla kaldırmayın.
24 × 24 hedef minimumunu koruyun
Etkileşimli hedefler AA düzeyinde en az 24 × 24 CSS piksel olmalıdır; button, onay kutusu ve radyo etiketleri için rahat dokunma boyutu olarak 44 × 44 önerilir.
İstek üzerine animasyonu etkisizleştirin
prefers-reduced-motion altında dosya, animasyon ve geçiş sürelerini 0.01ms'ye indirir, yineleme sayısını 1 ile sınırlar ve scroll-behavior'ı auto değerine sıfırlar.
Durumu asla yalnızca renkle bildirmeyin
Hata durumları rengi bir simge ve metinle birleştirir; işaretleme, aria-invalid="true" özniteliğini hata mesajı öğesine işaret eden aria-describedby ile eşler.
Hataları duyurun ve odağı taşıyın
Hataları role="alert" veya aria-live ile ekran okuyuculara iletin, sorunlu alanları işaretleyin ve gönderim sırasında odağı ilk hataya taşıyın.
Kimlik doğrulamayı düşük bilişsel yükte tutun
Oturum açma akışları, kopyala-yapıştır veya otomatik doldurma çalışmadıkça, passkey ya da e-posta bağlantısı gibi bir alternatif bulunmadıkça veya test nesne tanıma ya da kişisel içerik kullanmadıkça, bir parolayı hatırlamaya ya da bir bulmacayı çözmeye bağlı olmamalıdır.

04 İşe koyun

Claude Code veya Codex'te accessibility yükleme

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

Claude Code, Codex veya Ajanınıza accessibility ekleme

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

Terminal

npx skills add https://github.com/addyosmani/web-quality-skills --skill accessibility

skills CLI için genel biçim: skills/accessibility/SKILL.md; depo kendi yolunu belgeliyor olabilir.

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 [page URL or route] with Lighthouse and then fix the accessibility problems in the source. The form inputs in [component path] have no programmatically associated labels, the icon buttons have no accessible names, and focus outlines are being removed on [element]. Re-run the same audit afterwards and check keyboard navigation and target sizes.

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:

Tüm sayfada Tab ile gezinin ve denetimleri Enter ile Space tuşlarıyla etkinleştirin.

OpenDesign içinde accessibility'yi 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: Addy Osmani
Repository: github.com/addyosmani/web-quality-skills Branch main
Skill dosyası: skills/accessibility/SKILL.md İçerik sağlama toplamı doğrulama sırasında kaydedildi; commit afa8da9
License: MIT LICENSE dosyasından; SKILL.md "MIT" belirtiyor.
Repository yıldızları: 2,786 GitHub anlık görüntüsü tüm addyosmani/web-quality-skills deposu için 2026-09-14 tarihinde alınmıştır. accessibility 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'in Kendi Açıklaması

"Web erişilebilirliğini WCAG 2.2 kılavuzlarına göre denetleyin ve iyileştirin. "erişilebilirliği iyileştir", "a11y denetimi", "WCAG uyumluluğu", "ekran okuyucu desteği", "klavye navigasyonu" veya "erişilebilir yap" istendiğinde kullanın."

SKILL.md'den ön bilgi açıklaması. Tam dosya yaklaşık 14.265 karakter uzunluğunda. Tam dosyayı GitHub'da okuyun.

Accessibility

accessibility'yi gerçek bir tasarım inceleme görevinde çalıştırın.

OpenDesign'ı indirin, accessibility'yi 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

Terminal

npx skills add https://github.com/addyosmani/web-quality-skills --skill accessibility

Erişilebilirlik Skill'i Claude Code ve Codex'te Ne Yapar

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

accessibility Skill Ne Zaman Kullanılır

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

Erişilebilirlik skill'inin Claude Code ve Codex'e verdiği kurallar

Önce yerel bir öğeye başvurun

Odağı görünür biçimde stillendirin

24 × 24 hedef minimumunu koruyun

İstek üzerine animasyonu etkisizleştirin

Durumu asla yalnızca renkle bildirmeyin

Hataları duyurun ve odağı taşıyın

Kimlik doğrulamayı düşük bilişsel yükte tutun