Stats
Actions
Tags
From capacitor-quality
Provides accessibility guidelines for Capacitor apps covering screen readers, semantic HTML, focus management, touch targets, color contrast, WCAG compliance, and native iOS/Android support.
How this skill is triggered — by the user, by Claude, or both
Slash command
/capacitor-quality:capacitor-accessibilityThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Build inclusive apps that work for everyone.
Build inclusive apps that work for everyone.
// Accessible button
<button
aria-label="Delete item"
aria-describedby="delete-hint"
>
<TrashIcon />
</button>
<span id="delete-hint" className="sr-only">
Permanently removes this item
</span>
// Accessible input
<label htmlFor="email">Email</label>
<input
id="email"
type="email"
aria-required="true"
aria-invalid={hasError}
aria-describedby={hasError ? "email-error" : undefined}
/>
{hasError && <span id="email-error">Invalid email</span>}
// Announce dynamic content
<div aria-live="polite" aria-atomic="true">
{message}
</div>
// Urgent announcements
<div aria-live="assertive" role="alert">
{error}
</div>
/* Minimum 44x44pt */
button, a, input {
min-height: 44px;
min-width: 44px;
}
/* Icon buttons need padding */
.icon-button {
padding: 12px;
}
/* Good contrast (4.5:1 for text) */
.text {
color: #333333;
background: #ffffff;
}
/* Don't rely on color alone */
.error {
color: #d32f2f;
border-left: 4px solid #d32f2f; /* Visual indicator */
}
.error::before {
content: "⚠ "; /* Icon indicator */
}
// Move focus after navigation
useEffect(() => {
const heading = document.querySelector('h1');
heading?.focus();
}, [page]);
// Trap focus in modals
function trapFocus(element: HTMLElement) {
const focusable = element.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
const first = focusable[0] as HTMLElement;
const last = focusable[focusable.length - 1] as HTMLElement;
element.addEventListener('keydown', (e) => {
if (e.key === 'Tab') {
if (e.shiftKey && document.activeElement === first) {
e.preventDefault();
last.focus();
} else if (!e.shiftKey && document.activeElement === last) {
e.preventDefault();
first.focus();
}
}
});
}
// Custom accessibility in native code
element.isAccessibilityElement = true
element.accessibilityLabel = "Play video"
element.accessibilityHint = "Double tap to play"
element.accessibilityTraits = .button
// Custom accessibility
ViewCompat.setAccessibilityDelegate(view, object : AccessibilityDelegateCompat() {
override fun onInitializeAccessibilityNodeInfo(
host: View,
info: AccessibilityNodeInfoCompat
) {
super.onInitializeAccessibilityNodeInfo(host, info)
info.contentDescription = "Play video"
}
})
# iOS: Enable VoiceOver in Simulator
# Settings > Accessibility > VoiceOver
# Android: Enable TalkBack
# Settings > Accessibility > TalkBack
# Web: Use axe-core
npx @axe-core/cli https://localhost:3000
npx claudepluginhub cap-go/capgo-skills --plugin capacitor-qualityProvides mobile accessibility patterns for Android Jetpack Compose and iOS: content descriptions, semantics, touch targets, screen reader support, WCAG compliance, dynamic type, color contrast.
Designs, audits, and implements accessible interfaces following WCAG 2.2 Level AA, including semantic ARIA for web and accessibility traits for iOS/Android.
Designs, implements, and audits accessible digital products using WCAG 2.2 AA. Covers semantic ARIA on web, accessibility APIs on iOS (SwiftUI) and Android (Compose).