Kullanım kılavuzuna geç
fixing-accessibilityyazan Julien Thibeaut

Fixing Accessibility Skill.

Claude Code ve Codex için bir tasarım inceleme skill'i: ARIA, klavye, odak, kontrast ve form hatalarını denetler ve düzeltir.

  • Tasarım İncelemesi & Erişilebilirlik
  • İnceleme raporu
ibelick/ui-skills · skills/fixing-accessibility/SKILL.mdSKILL.md
--- name: fixing-accessibility description: Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance. --- ## how to use ## when to apply ## rule categories by priority ## common fixes ## review guidance
Ön bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam haliyle 4.714 karakter

01 Ne yapar

fixing-accessibility 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 kodlama ajanında etkileşimli UI ekleyen veya inceleyen tasarımcılar ve geliştiriciler için tasarlanmış, HTML erişilebilirliği için bir referans-ve-düzeltme kural kümesi. Dokuz kural kategorisini öncelik ve etkiye göre sıralar; erişilebilir adlar, klavye erişimi, focus ve dialog'lar, kritik seviyedeki tool sınırlarından semantik, formlar ve hatalar, duyurular, kontrast ve durumlar, en aşağıda medya ve harekete kadar.

Her kategori, ikon-only butonlarda aria-label, 0'ın üzerinde tabindex olmaması ve başarısız alanlarda aria-invalid gibi somut gereksinimlerin kısa bir listesidir. Ortak bir düzeltmeler bloğu, ikon-only butonlar, div-as-button ve bağlantısız form hataları için öncesi-ve-sonrası HTML gösterir; review modu her ihlali alıntılanan satır, nedenine dair tek cümlelik açıklama ve kod düzeyinde bir düzeltmeyle raporlar.

İnceleme raporu
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Kısıtları Yerinde Uygulayın

    Komutu düz şekilde çalıştırmak, kuralları o konuşmada gerçekleşen herhangi bir UI çalışması üzerinde tek seferlik bir denetim geçişi değil, kalıcı bir kısıt haline getirir.

  2. 02
    İhlal Raporu İçin Bir Dosyaya Yönlendirin

    Bir dosya argümanıyla, o dosyayı tüm kurallara karşı kontrol eder ve her ihlali alıntılanan satır veya snippet, nedenine dair tek kısa cümle ve kod düzeyinde bir düzeltme olarak raporlar.

  3. 03
    Kategorileri Öncelik Sırasına Göre İşleyin

    Kurallar, bir etki derecesiyle sıralanmış kategoriler halinde gruplandırılmıştır; erişilebilir adlar öncelik 1'de yer alır ve kritik olarak işaretlenmiştir.

  4. 04
    Değişikliği Minimal Tutun

    Skill, UI'nin büyük bölümlerini yeniden yazmaması gerektiğini ve düzeltmelerin minimal ve hedefe yönelik olması gerektiğini açıkça belirtir.

02 Uyumunuzu bulun

fixing-accessibility Skill ne zaman kullanılır

Bu tür tasarım incelemesi işi için Claude Code veya Codex'te fixing-accessibility skill'ini kullanın. Uygunluk ve sınırlar, skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Mevcut bir arayüzde buton, bağlantı, giriş alanı, menü, dialog, sekme veya dropdown ekleme veya değiştirme.
  • Doğrulama, hata durumları ve yardımcı metin içeren formlar oluşturma.
  • Klavye kısayolları veya diğer özel etkileşimleri uygulama.
  • Odak durumları, odak tuzağı (focus trapping) veya modal davranışı üzerinde çalışırken.
  • Yalnızca ikondan oluşan kontroller oluştururken veya yalnızca hover ile tetiklenen etkileşimler ve gizli içerik eklerken.

Sınırları Bilin

  • Düzeltilmekte olan erişilebilirlik sorunuyla ilgisi olmayan kodu yeniden düzenlerken.
  • Aynı işi yapabilecek yerel bir button, link veya input varken role tabanlı geçici çözümler kullanırken.
  • Sesli medyayı otomatik oynatırken.

03 Skill'in içinde

fixing-accessibility Skill'in Claude Code ve Codex'e Verdiği Kurallar

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

  1. Yalnızca İkondan Oluşan Her Kontrole Ad Verin

    Yalnızca ikondan oluşan butonlar, sadece görünür bir glif değil, aria-label veya aria-labelledby üzerinden erişilebilir bir ada sahip olmalıdır.

  2. Asla Pozitif Bir tabindex Kullanmayın

    0'dan büyük tabindex değerleri tamamen dışlanır; tab sırası doğal sıraya bırakılır.

  3. Diyaloglarda Odağı Tuzağa Alın, Başlatın ve Geri Yükleyin

    Modaller açıkken odağı tuzağa almalı, başlangıç odağını diyalog içine ayarlamalı ve kapandıklarında odağı tetikleyiciye geri döndürmelidir.

  4. Hataları Kendi Alanlarına Bağlayın

    Hatalar, mesajın alanla birlikte duyurulması için aria-describedby ile input'a bağlanmalıdır.

  5. Hatalı Alanları Geçersiz Olarak İşaretleyin

    Geçersiz bir alan, yalnızca bir hata stili göstermek yerine aria-invalid ayarlamalıdır.

  6. Yerel Semantik Zaten Çalışıyorsa ARIA Kullanmayın

    Yerel semantik sorunu zaten çözüyorsa aria eklemeyin; bu, kritik bir kısıtlama olarak tool boundaries kapsamına girer.

  7. Odağı Görünür Tutun

    Görünür bir alternatif sağlanmadıkça odak çerçeveleri kaldırılamaz.

  8. UI Kütüphanelerini Değiştirmeyin

    Kullanıcı açıkça talep etmedikçe bir UI kütüphanesini değiştirmek kapsam dışıdır.

04 İşe koyun

fixing-accessibility'yi 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.

fixing-accessibility'yi 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/ibelick/ui-skills --skill fixing-accessibility

skills/fixing-accessibility/SKILL.md için genel skills CLI formu; depo kendi yolunu belgelemiş olabilir.

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

SKILL.md bir örnek prompt içermez; bu başlangıç, katalog tek satırından yazılmıştır. Görev satırını gerçek brief'inizle değiştirin.

Starter prompt
Use the fixing-accessibility skill on the material I attach. What the skill should do here: Audits and fixes ARIA, keyboard, focus, contrast, and form errors. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Kaynak: katalog tek satır kullanımından yazılmış başlangıç promptu (SKILL.md'den değil).

İlk Sonucu Kontrol Edin

Çıktıyı kabul etmeden önce, transkript ve dosyalarda bunları arayın:

  • Sonuç, kataloğun bu skill için listelediği gibi İnceleme raporu olarak teslim edilir.
  • Ajan sonucu üretmeden önce planında veya kaydında fixing-accessibility skill'ini belirtir.
  • Kendi içeriğiniz, isimleriniz ve numaralarınız çıktıda değişmeden görünür.

OpenDesign'da fixing-accessibility'yi 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.

Repository
github.com/ibelick/ui-skills Branch main
Skill dosyası
skills/fixing-accessibility/SKILL.md İçerik sağlama toplamı doğrulamada kaydedildi; commit 79081ab
License
MIT LICENSE dosyasından.
Repository yıldızları
8.402 GitHub anlık görüntüsü 2026-09-14 tarihinde katalogda 5 skill içeren ibelick/ui-skills deposunun tamamı için alındı. fixing-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ı
"ARIA etiketleri, klavye navigasyonu, odak yönetimi, renk kontrastı ve form hataları dahil HTML erişilebilirlik sorunlarını denetler ve düzeltir. Etkileşimli kontroller, formlar, iletişim kutuları eklerken veya WCAG uyumluluğunu gözden geçirirken kullanın."

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

Fixing Accessibility

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

OpenDesign'ı indirin, fixing-accessibility'yi 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/ibelick/ui-skills --skill fixing-accessibility

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