skills.rest
frankdevlabs
frankdevlabsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Frontend Accessibility

Review frontend components for semantic HTML, keyboard navigation, and WCAG color contrast.

Updated Aug 23, 2026
Search Tags:#inclusive design#accessibility#semantic HTML#keyboard navigation#ARIA#WCAG#frontend
One-click install
npx skills add https://github.com/frankdevlabs/compilothq --skill frontend-accessibility-frankdevlabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Accessibility
Source: https://github.com/frankdevlabs/compilothq/tree/main/.claude/skills/frontend-accessibility
Command: npx skills add https://github.com/frankdevlabs/compilothq --skill frontend-accessibility-frankdevlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inaccessible user interfaces exclude individuals with disabilities, leading to a poor user experience for a significant portion of the audience and potential legal compliance issues.

Core Features & Use Cases

  • Semantic HTML: Utilize appropriate HTML elements (<nav>, <button>, <label>) to convey proper meaning to assistive technologies like screen readers.
  • Keyboard Navigation: Ensure all interactive elements are fully keyboard accessible with visible focus indicators and a logical tab order.
  • Color Contrast & ARIA: Meet WCAG standards for color contrast and apply ARIA attributes judiciously for complex components where semantic HTML is insufficient.

Quick Start

Review the UserProfile component and ensure all interactive elements are keyboard navigable, have visible focus indicators, and use semantic HTML.