Compétences accessibility-fundamentals
♿

accessibility-fundamentals

Sûr

Проверка JSX на доступность

Многие разработчики непреднамеренно создают барьеры для пользователей с ограниченными возможностями. Этот навык предоставляет систематический контрольный список для проверки JSX-компонентов на соответствие рекомендациям WCAG, обеспечивая инклюзивность вашего кода и соблюдение законодательных требований.

Prend en charge: Claude Codex Code(CC)
📊 69 Adéquat
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "accessibility-fundamentals". <div onClick={handleSubmit} className="submit-btn">Submit</div>

Résultat attendu:

Этот элемент имеет проблемы с доступностью:
1. Недоступен с клавиатуры - элементы div не реагируют на клавиши Enter/Space
2. Не объявляется как кнопка программами чтения с экрана
3. Отсутствует семантическая роль

Исправление: Используйте элемент <button>:
<button onClick={handleSubmit} className="submit-btn">Submit</button>

Utilisation de "accessibility-fundamentals". <input type="email" placeholder="Enter your email" />

Résultat attendu:

Этому полю ввода не хватает доступности:
1. Нет видимой метки - placeholder исчезает при вводе
2. Программы чтения с экрана не могут объявить назначение

Варианты исправления:
<label>
Email
<input type="email" placeholder="Enter your email" />
</label>

Или:
<label htmlFor="email">Email</label>
<input id="email" type="email" placeholder="Enter your email" />

Utilisation de "accessibility-fundamentals". <button><TrashIcon /></button>

Résultat attendu:

Кнопки только с иконками нуждаются в доступных именах:
1. Программы чтения с экрана объявляют как "кнопка" без контекста

Исправление: Добавьте aria-label:
<button aria-label="Delete item">
<TrashIcon aria-hidden="true" />
</button>

Audit de sécurité

Sûr
v6 • 1/21/2026

All 63 static findings are false positives. The scanner misinterpreted markdown code block delimiters as shell execution, ARIA attributes as cryptographic patterns, and CSS color hex values as IP addresses. This is a legitimate accessibility documentation skill containing only static guidance and code examples.

2
Fichiers analysés
982
Lignes analysées
0
résultats
6
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude Voir l’historique des audits →

Score de qualité

38
Architecture
100
Maintenabilité
85
Contenu
20
Communauté
100
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

Код-ревью React-компонентов

Перед слиянием pull request используйте этот навык для проверки соответствия новых интерактивных компонентов стандартам доступности. Выявляет проблемы, такие как отсутствующие метки, антипаттерны div-как-кнопка и плохое управление фокусом.

Изучение паттернов инклюзивного дизайна

Новые члены команды используют этот навык для понимания требований доступности. Навык предоставляет конкретные примеры доступных и недоступных паттернов кода с объяснениями.

Аудит доступности функций

Перед запуском новых функций используйте этот навык для проверки соответствия требованиям доступности. Охватывает модальные окна, формы, навигационные меню и динамические обновления контента.

Essayez ces prompts

Быстрая проверка компонента 
Review this JSX component for accessibility issues. Check for keyboard accessibility, proper form labels, semantic HTML, and screen reader support.
Проверка доступности формы 
Review this form component. Check that every input has a label, error messages are linked with aria-describedby, and required fields are marked appropriately.
Аудит модального окна 
Check this modal component. Verify focus trapping works, escape key closes it, keyboard focus is managed, and it has proper ARIA attributes.
Проверка навигационного меню 
Review this navigation component. Check keyboard navigation works, active states are announced, and menu structure is semantic.

Bonnes pratiques

  • Используйте нативные семантические элементы (<button>, <a>, <input>) вместо div с обработчиками событий
  • Каждое поле ввода формы должно иметь видимую связанную метку
  • Все интерактивные элементы должны быть доступны с клавиатуры с видимыми состояниями фокуса

Éviter

  • Использование <div onClick> вместо <button> - нарушает поддержку клавиатуры и программ чтения с экрана
  • Удаление outline: none без замены - оставляет пользователей клавиатуры в растерянности
  • Использование только цвета для передачи информации - не работает для людей с дальтонизмом

Foire aux questions

Каков минимальный коэффициент цветового контраста для текста?
Обычный текст требует коэффициента контрастности 4.5:1 относительно фона. Крупный текст (18px жирный или 24px обычный) требует коэффициента 3:1.
Как сделать модальное окно доступным?
Захватите фокус внутри модального окна, пока оно открыто, верните фокус на элемент-триггер при закрытии, включите клавишу Escape для закрытия и добавьте aria-modal="true".
Каково первое правило ARIA?
Отсутствие ARIA лучше, чем плохое ARIA. Сначала используйте нативный семантический HTML. Добавляйте ARIA только тогда, когда HTML не может выразить то, что вам нужно.
Как протестировать доступность без инструментов?
Навигируйте по всей странице, используя только Tab и клавиатуру. Убедитесь, что вы можете выполнить все действия, фокус всегда видим, и вы не можете застрять.
Что такое focus-visible и когда его следует использовать?
focus-visible показывает индикаторы фокуса только при навигации с клавиатуры, скрывая их для пользователей мыши. Используйте :focus-visible для лучшего из обоих миров.
Как сделать сообщения об ошибках доступными?
Свяжите ошибки с полями ввода с помощью aria-describedby, установите aria-invalid="true" на недействительных полях и используйте role="alert" или aria-live для объявлений.

Détails du développeur

Licence

MIT

Dépôt

https://github.com/DanielPodolsky/mentor-spec/tree/main/.claude/skills/fundamentals/accessibility

Réf

main

Structure de fichiers

📄 SKILL.md