excessibility

🥈Silver

Excessibility automates accessibility testing for Phoenix LiveView apps. It captures HTML snapshots during tests, runs Pa11y for WCAG compliance checks, and provides AI-assisted debugging with timeline analysis. Developers benefit from faster, more thorough accessibility audits integrated into their testing workflows.

4030Updated 1w ago

Intermediate30min to implementautomation

Saves ~45 min per use

Quick InstallView Source

git clone https://github.com/lessthanseventy/excessibility.git

Works with:

Claude

Overview

About This Skill

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/lessthanseventy/excessibility

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Analyze the accessibility of my Phoenix LiveView app using Excessibility. Here's the [APP_URL] and [TEST_SCENARIO]. Please capture HTML snapshots, run Pa11y for WCAG compliance checks, and provide AI-assisted debugging with timeline analysis. Focus on [SPECIFIC_ACCESSIBILITY_CONCERNS] if any.

Example Output

# Accessibility Audit Report for Phoenix LiveView App

## Summary
- **Overall WCAG Compliance**: 85% (AA standard)
- **Total Issues Found**: 12
- **Critical Issues**: 3
- **Moderate Issues**: 5
- **Minor Issues**: 4

## Critical Issues
1. **Contrast Issue**: Button text in the navigation bar has insufficient color contrast (4.5:1).
   - **Location**: `app/components/navigation.ex`
   - **Timeline**: Appears at 2.3s during test execution
   - **Recommendation**: Use `#333333` on `#FFFFFF` for better contrast.

2. **Missing Alt Text**: Hero image lacks alternative text.
   - **Location**: `app/components/hero.ex`
   - **Timeline**: Appears at 1.8s during test execution
   - **Recommendation**: Add `alt=