Frontend Accessibility Design Assistant
Paste the following prompt into your AI chat to install this skill:
Follow https://skillhub.cn/install/skillhub.md to install @user_1d1b34c2/accessibility-v2.
About this skill
Problem
Many front-end pages work under a mouse but remain inaccessible to keyboard, screen-reader, or low-vision users: links and buttons lack semantics, forms miss label associations, dynamic states lack aria-live, focus is invisible, and contrast is too low. These issues are often scattered across component details and are easy to miss in manual review.
How It Works
This skill turns common front-end accessibility checks into an actionable audit checklist:
- Semantic HTML: checks whether links, buttons, forms, and heading levels follow HTML semantics.
- Keyboard navigation: reviews focus order, visible focus states, accessible shortcuts, and keyboard event handling.
- Screen readers: verifies labels such as aria-label, aria-describedby, image descriptions, and live regions.
- Visual accessibility: checks color contrast, minimum font size, and touch-target size.
It first identifies the component type, then applies the relevant rules by interaction context, and finally outputs concrete issues and checklist items rather than vague recommendations.
Boundaries
It is suitable for front-end pages, web components, and mobile H5 accessibility review; it does not cover full native-app system-level assistive-technology adaptation. For complex ARIA patterns such as custom combobox, grid, and dialog, manual review is still needed based on interaction state.
Use Cases
- Review a web form before release to find inputs missing `label` associations and button semantics.
- Refactor complex components by checking focus order, visible focus states, and keyboard events to avoid broken Tab flow.
- Verify ARIA labels, image descriptions, and live regions after integrating screen readers.
- Check page color contrast, font size, and touch-target size to confirm readability for low-vision users.
Best For
- Front-end engineers maintaining web component libraries who need to add accessible behavior to modals and dropdowns.
- Front-end owners responsible for H5 page releases who need to complete an accessibility checklist before launch.
- Front-end engineers building form systems who need to locate missing control-`label` associations.
- Front-end QA engineers focused on accessibility who need to retest pages across keyboard, screen-reader, and visual dimensions.
Related Skills
Automatically indexes Gradle-cached AAR/JAR dependency classes and returns library coordinates, versions, and public APIs by fully qualified name, using only the Python standard library.
Codifies AMT and YourMT3 training conventions, script patterns, hyperparameters, precision, checkpoints, and NaN safeguards.
Retrieve relevant chunks from a customer-managed PKM dataset by dataset_id and return concise, source-annotated answers.
Convert PRDs, user stories, or functional specs into prioritized test-point checklists covering functional, business-rule, boundary, exception, and non-functional dimensions.