skills.rest
pekral
pekralCOMMUNITY
Explore all skills by this author →
Website𝕏@kral_petr_88GitHub

frontend-a11y

Audit Laravel Blade and Livewire components for WCAG 2.2 accessibility compliance.

Updated Jan 6, 2023
Search Tags:#accessibility#frontend#wcag#laravel#blade#alpinejs
One-click install
npx skills add https://github.com/pekral/phpstan-rules --skill frontend-a11y-pekral
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-a11y
Source: https://github.com/pekral/phpstan-rules/tree/main/.claude/skills/frontend-a11y
Command: npx skills add https://github.com/pekral/phpstan-rules --skill frontend-a11y-pekral

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the common failure to meet WCAG accessibility standards in modern PHP/Laravel stacks, ensuring that interactive elements are usable by everyone, including those relying on assistive technologies.

Core Features & Use Cases

  • Semantic Markup Guidance: Enforces correct usage of HTML elements and ARIA attributes for screen readers.
  • Interactive Component Patterns: Provides battle-tested patterns for accessible modals, dropdowns, and form controls using Alpine.js and Livewire.
  • Compliance & Best Practices: Integrates WCAG 2.2 criteria for target sizing, focus management, and error handling into your development workflow.

Quick Start

Use the frontend-a11y skill to audit the current Blade component for missing aria-describedby attributes and keyboard navigation support.

Frequently Asked Questions about frontend-a11y

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make Laravel Blade components accessible for screen readers?▼

Making Laravel Blade components accessible involves enforcing semantic HTML elements and correct ARIA attributes for screen readers. This ensures interactive UI components meet WCAG 2.2 compliance and are usable with assistive technologies.

How do I manage focus and keyboard navigation in Alpine.js modals?▼

Managing focus in Alpine.js modals requires enforcing proper focus management and keyboard navigation support. Applying battle-tested interactive component patterns ensures dynamic content updates remain accessible and satisfy WCAG criteria.

Does Livewire work with WCAG 2.2 target sizing and error handling requirements?▼

Livewire supports WCAG 2.2 requirements by integrating compliance best practices for target sizing and error handling into your workflow. This ensures dynamic content updates and form controls remain robust and accessible.

How do I audit a Blade component for missing accessibility attributes?▼

Auditing a Blade component for accessibility involves checking for missing aria-describedby attributes and keyboard navigation support. This review process identifies gaps in semantic HTML and ARIA implementation within interactive UI components.

What is the best way to handle ARIA implementation in Laravel forms?▼

The best way to handle ARIA implementation in Laravel forms is by applying robust ARIA attributes alongside semantic HTML. This approach ensures form controls and error handling mechanisms satisfy WCAG 2.2 success criteria for all users.

Related Skills

Explore More Software Engineering Skills→
anilcancakiranilcancakir
5

laravel-fullstack

Integrate Laravel Blade views with Alpine.js, Vue.js, TailwindCSS, and Vite.

Community
Intermediate
pacphipacphi
6

accessibility-testing

Perform WCAG 2.2 accessibility testing on web applications with axe-core.

Community
Advanced
GGEduGGEdu

livewire-patterns

Automate Livewire component lifecycle, wire directives, validation, and testing patterns.

Community
Intermediate
nvimcraftnvimcraft

wcag-audit

Audit web interfaces for WCAG compliance and remediation requirements.

Community
Advanced