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.
npx claudepluginhub cap-go/capgo-skills --plugin capacitor-qualityThis skill uses the workspace's default tool permissions.
Build inclusive apps that work for everyone.
Provides mobile accessibility patterns for Android Jetpack Compose and iOS: content descriptions, semantics, touch targets, screen reader support, WCAG compliance, dynamic type, color contrast.
Designs, implements, and audits WCAG 2.2 AA accessible UIs for web, iOS, Android using semantic ARIA, native traits, and POUR principles.
Audits and remediates Flutter accessibility per WCAG 2.1 levels (A, AA, AAA) across mobile, desktop, web platforms, covering semantics, touch targets, focus, contrast, text scaling, animations.
Share bugs, ideas, or general feedback.
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