skills.rest
JaivishChauhan
JaivishChauhanCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/JaivishChauhan/vibecoding-starter --skill accessibility-jaivishchauhan
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
The-Skyy-Rose-Collection-LLCThe-Skyy-Rose-Collection-LLC
3

Static Web Development

Build accessible, responsive static websites with semantic HTML and CSS.

Official
Intermediate
Anuj23105Anuj23105
1

accessibility-auditing

Tests web page and UI component accessibility compliance with WCAG 2.1 AA/AAA standards.

Community
Advanced
pelcherspelchers

ensuring-accessibility

Implement WCAG 2.1 AA-compliant accessibility patterns for web interfaces.

Community
Advanced
Hack23Hack23
9

html-accessibility

Audit static HTML/CSS sites and implement WCAG 2.1 AA accessibility improvements.

Official
Intermediate