accessibility
Implement web accessibility standards (WCAG 2.1 AA) using semantic HTML and ARIA patterns.
Informações da origem
- Repositório
- ai4brands-design/claude-skills
- Última atividade na origem
- 21 de março de 2026 às 22:21
- Idioma detectado do SKILL.md
- inglês
- Estrelas
- 2
- Forks
- 0
Opções de instalação
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Revise os arquivos de origem
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Exibindo SKILL.md
SKILL.md
Instruções da origem · Visualização somente leitura- name
- accessibility
- description
- Implement web accessibility standards (WCAG 2.1 AA) using semantic HTML and ARIA patterns.
# Web Accessibility (WCAG 2.1 AA)
Ensure your web applications are inclusive and accessible to all users.
## Semantic HTML
```html
<!-- ❌ WRONG -->
<div onclick="submit()">Submit</div>
<!-- ✅ CORRECT -->
<button type="submit">Submit</button>
<a href="/next">Next page</a>
```
## Focus Management
```css
/* ✅ CORRECT - custom accessible outline */
button:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
```
## ARIA Patterns
```html
<!-- ✅ CORRECT - ARIA fills semantic gap -->
<div role="dialog" aria-labelledby="title" aria-modal="true">
<h2 id="title">Confirm action</h2>
</div>
<!-- ✅ BETTER - Use native HTML when available -->
<dialog aria-labelledby="title">
<h2 id="title">Confirm action</h2>
</dialog>
```
## Pro Tips
- Always use `:focus-visible` to style focus states without annoying mouse users.
- Provide descriptive `alt` text for informative images; use `alt=""` for decorative ones.
- Test with screen readers (VoiceOver, NVDA) to verify the logical order of content.
Ver no GitHub