accessibility

Apply WCAG-compliant semantics to portfolio pages for keyboard and screen reader accessibility.

6|Updated Jan 29, 2026

Search Tags:#accessibility #ARIA #WCAG #semantic-html #screen-reader #keyboard-navigation #inclusive-design

Ready to run

npx skills add https://github.com/JaivishChauhan/vibecoding-starter --skill accessibility-jaivishchauhan

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/JaivishChauhan/vibecoding-starter/tree/main/.agent/skills/accessibility
Command: npx skills add https://github.com/JaivishChauhan/vibecoding-starter --skill accessibility-jaivishchauhan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Accessibility isn't a feature—it's a necessity. This skill helps you build WCAG-compliant portfolio sites with semantic HTML, proper landmarks, keyboard navigation, and screen reader support to ensure inclusive design.

Core Features & Use Cases

Semantic HTML patterns and landmark usage for better assistive tech compatibility.
Keyboard accessible navigation, focus management, skip links, ARIA attributes where appropriate.
Color contrast guidelines, form accessibility, and responsive modal/dialog patterns for inclusivity.
Use Case: Example of implementing accessible components in a portfolio.

Quick Start

Use the accessibility skill to implement WCAG-compliant semantics on a portfolio page and validate with keyboard navigation.

Frequently Asked Questions about accessibility

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

FAQPage Schema

How do I make my portfolio site accessible with WCAG-compliant semantics?▼

Make your portfolio site accessible by applying WCAG-compliant semantics through semantic HTML structure, proper landmarks, ARIA attributes, and skip links to ensure inclusive design for all users.

What is the best way to implement keyboard navigation and screen reader support for a portfolio?▼

The best way to implement keyboard navigation and screen reader support is by ensuring keyboard operability, managing focus correctly, adding skip links, and applying appropriate ARIA attributes across all interactive elements.

How do I fix color contrast and form accessibility issues on my portfolio pages?▼

Fix color contrast and form accessibility issues by following WCAG color contrast guidelines, ensuring proper heading order, and applying accessible form patterns to validate inclusive design across your portfolio.

Does this accessibility approach support responsive modal and dialog patterns?▼

Yes, this accessibility approach supports responsive modal and dialog patterns by applying inclusive design principles, ensuring keyboard operability, and managing focus and ARIA attributes for these components.

When do I need to add ARIA attributes versus semantic HTML for screen reader compatibility?▼

Add semantic HTML for inherent structural meaning and use ARIA attributes only where appropriate to bridge gaps, ensuring proper landmarks, heading order, and screen reader compatibility across your portfolio navigation and content.