playbooks

home / skills / willsigmon / sigstack / accessibility-auditor

accessibility-auditor skill

/plugins/ios-dev/skills/accessibility-auditor

This skill helps you add accessibility attributes to images and buttons in Leavn, enabling VoiceOver with labels, hints, traits, and visibility controls.

npx playbooks add skill willsigmon/sigstack --skill accessibility-auditor

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
603 B
---
name: Accessibility Auditor
description: Add accessibilityLabel and accessibilityHint to Images and Buttons in Leavn app for VoiceOver support
allowed-tools: Read, Edit, Grep
---

# Accessibility Auditor

Add accessibility to UI elements:

1. **Images**: `.accessibilityLabel("Icon description")`
2. **Buttons**: `.accessibilityHint("What happens when tapped")`
3. **Selection**: `.accessibilityAddTraits([.isSelected])`
4. **Hide decorative**: `.accessibilityHidden(true)`

Priority: Home, Community, Bible, ShareVerse features

Use when: Accessibility issues, VoiceOver support, icon-only buttons

Overview

This skill audits and adds VoiceOver-friendly accessibility attributes to the Leavn app UI. It focuses on Images and Buttons by applying accessibilityLabel and accessibilityHint, marking selections, and hiding decorative elements. The work improves screen reader clarity across high-priority screens like Home, Community, Bible, and ShareVerse.

How this skill works

The skill scans UI components and injects accessibilityLabel for Images and accessibilityHint for Buttons where missing. It also applies selection traits to selectable controls and sets accessibilityHidden(true) for decorative assets. Changes are implemented in the codebase so VoiceOver announces meaningful text and behavior instead of raw element types or icon names.

When to use it

  • During accessibility remediation for VoiceOver support
  • When UI contains icon-only or image-only buttons
  • Before releases that affect Home, Community, Bible, or ShareVerse screens
  • When QA flags unclear screen-reader announcements
  • When adding or refactoring UI elements that affect navigation or selection

Best practices

  • Use short, descriptive accessibilityLabel values that describe purpose, not appearance
  • Provide accessibilityHint for buttons when the action is not immediately obvious
  • Mark decorative images as hidden to reduce screen reader noise
  • Apply selection traits to indicate current state for toggles and tabs
  • Avoid duplicating visible text in labels; keep voice output concise and non-repetitive

Example use cases

  • Add accessibilityLabel to the Home screen logo and mark it as decorative if it conveys no interactive content
  • Provide accessibilityHint on icon-only Community buttons to explain the tap result
  • Mark selected Bible chapters or verses with selection traits so VoiceOver announces current selection
  • Hide decorative illustrations on ShareVerse so only the verse and actions are announced
  • Audit tab bar icons to ensure each has a clear label and selected state announced

FAQ

How should I write an accessibilityLabel for an icon-only button?

Use a concise phrase that describes the action or destination, e.g., 'Open community feed' rather than 'community icon'.

How can I verify my changes for VoiceOver?

Enable VoiceOver on a test device or simulator and navigate the updated screens to confirm labels, hints, and selection states read naturally and without redundancy.