accessibility-basic-check

Check UI changes for contrast, alternatives, and semantic labeling.

Updated Dec 28, 2025
One-click install
npx skills add https://github.com/oalansilva/crypto --skill accessibility-basic-check-oalansilva
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility-basic-check
Source: https://github.com/oalansilva/crypto/tree/main/.codex/skills/frontend/accessibility-basic-check
Command: npx skills add https://github.com/oalansilva/crypto --skill accessibility-basic-check-oalansilva

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams frequently ship UI changes that introduce accessibility gaps. This Skill provides a concise, repeatable checklist that helps junior developers rapidly identify and address common a11y issues.

Core Features & Use Cases

  • Color contrast & text alternatives: Verify sufficient color contrast and provide accessible text alternatives for images or icons.
  • Keyboard navigation & focus order: Ensure logical tab order and visible focus indicators across interactive elements.
  • Form control labeling: Confirm that all form controls have accessible, descriptive labels and appropriate aria attributes where needed.
  • Use Case: When updating a signup or settings page, run the checklist to catch missing labels, focus management issues, or contrast problems before review.

Quick Start

Review the affected UI components and run the basic accessibility checklist.

Frequently Asked Questions about accessibility-basic-check

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

FAQPage Schema
How do I check color contrast and keyboard navigation for UI changes?

To check color contrast and keyboard navigation for UI changes, run an accessibility checklist that verifies sufficient contrast ratios, logical tab order, and visible focus indicators across interactive elements. The review outputs a pass/fail list with suggested fixes.

What is the best way to verify form control labeling and aria attributes?

The best way to verify form control labeling is to run an accessibility checklist that confirms all form controls have descriptive labels and appropriate aria attributes. This process identifies missing semantic labeling and outputs specific notes on issues to fix.

Can I use a basic accessibility checklist for signup and settings pages?

Yes, you can use a basic accessibility checklist for signup and settings pages. The checklist applies to common interaction scenarios like forms, navigation, and media controls, helping you catch missing labels, focus management issues, or contrast problems before code review.

How do I identify accessibility gaps when updating frontend components?

To identify accessibility gaps when updating frontend components, review the affected pages and run a basic accessibility checklist. This checks contrast, text alternatives, and semantic labeling, presenting results as a pass/fail checklist with notes on issues and suggested fixes.

Does this accessibility check cover text alternatives for images and icons?

Yes, this accessibility check covers text alternatives for images and icons. The checklist verifies that accessible text alternatives are provided, alongside checking color contrast, keyboard navigation, and form control labeling, returning a pass/fail result for each verified criterion.