accessibility
Аудит и исправление проблем доступности согласно WCAG 2.2
Проблемы веб-доступности заставляют пользователей покидать сайты. Этот навык предоставляет руководящие принципы WCAG 2.2 и шаблоны кода для making content accessible to people with disabilities.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «accessibility». <button><svg>icon</svg></button>
Ожидаемый результат:
Issue: Button lacks accessible name for screen readers.
Fix: Add aria-label or visible text.
```html
<button aria-label="Close menu">
<svg aria-hidden="true">icon</svg>
</button>
```
Использование «accessibility». Navigation menu with keyboard trap
Ожидаемый результат:
Issue: Keyboard focus is trapped in the dropdown menu.
Fix: Add Escape key handler and proper focus management.
```javascript
dropdown.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeDropdown();
});
```
Использование «accessibility». Form without labels
Ожидаемый результат:
Issue: Input fields lack programmatic labels.
Fix: Add explicit label associations.
```html
<label for="email">Email address</label>
<input type="email" id="email" autocomplete="email">
```
Аудит безопасности
Низкий рискStatic analysis flagged 147 potential issues, but all findings are FALSE POSITIVES. The scanner misidentified markdown documentation patterns (code blocks, WCAG criterion numbers, relative paths) as security vulnerabilities. This is a pure documentation skill with no executable code, network calls, or credential handling.
Проблемы среднего риска (1)
Проблемы низкого риска (1)
Оценка качества
Что вы можете построить
Accessibility code review
Review pull requests for accessibility issues and suggest fixes based on WCAG 2.2 guidelines
Accessibility audit report
Generate a prioritized report of accessibility issues with code examples for fixes
Accessible component implementation
Create accessible UI components with proper ARIA attributes, keyboard support, and focus management
Попробуйте эти промпты
Check this HTML snippet for accessibility issues: [paste HTML here]
Audit the following page content for WCAG 2.2 AA compliance and list all issues with severity levels and fix suggestions: [paste HTML content]
Implement an accessible [component type, e.g., modal/dropdown/tabs] following WCAG 2.2 guidelines. Include keyboard navigation, ARIA attributes, and focus management.
The following component has [specific issue]. Fix it to meet WCAG 2.2 AA requirements: [paste component code]
Лучшие практики
- Use native HTML elements when possible (button, nav, main) before adding ARIA
- Test keyboard navigation by pressing Tab from start to end of the page
- Ensure all interactive elements have visible focus indicators
Избегать
- Using role='button' on div instead of native <button> element
- Removing outline:focus styles without providing alternative focus indication
- Relying on color alone to convey information without text or icon alternatives