skills.rest
dpietersz
dpieterszCOMMUNITY
Explore all skills by this author →
GitHub

Frontend Accessibility

Enforce semantic HTML, ARIA attributes, and keyboard navigation in frontend interfaces.

Updated Jan 15, 2026
Search Tags:#accessibility#frontend#semantic-html#aria#screen-readers#keyboard-navigation
One-click install
npx skills add https://github.com/dpietersz/pietersz.me --skill frontend-accessibility-dpietersz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Accessibility
Source: https://github.com/dpietersz/pietersz.me/tree/main/.claude/skills/frontend-accessibility
Command: npx skills add https://github.com/dpietersz/pietersz.me --skill frontend-accessibility-dpietersz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend Accessibility helps developers build inclusive UIs by guiding semantic HTML, proper ARIA attributes, keyboard navigation, and color-contrast considerations.

Core Features & Use Cases

  • Semantic HTML guidance for structural elements (header, main, nav, aside, footer) and appropriate tag choices.
  • ARIA usage recommendations, labeling strategies, and roles for dynamic components like modals, tabs, and accordions.
  • Keyboard navigation patterns including focus management, logical tab order, and visible focus indicators for interactive controls.
  • Use Case: crafting accessible login forms, menus, and alerts that are usable with screen readers and assistive devices.

Quick Start

Audit a sample frontend component to verify semantic structure, ARIA labeling, and keyboard operability.

Frequently Asked Questions about Frontend Accessibility

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

FAQPage Schema
How do I make a React modal accessible with ARIA and keyboard navigation?▼

To make a React modal accessible, enforce proper ARIA roles, logical tab order, and focus management. This ensures dynamic content like modals is fully operable via keyboard and readable by screen readers.

What's the best way to add ARIA attributes to dynamic frontend components?▼

The best way to add ARIA attributes is by applying semantic HTML first, then using ARIA labeling and roles for dynamic components like tabs and accordions to ensure accurate screen reader communication.

Does this accessibility guidance work with Vue and vanilla JS UI code?▼

Yes, this accessibility guidance applies to React, Vue, HTML templates, and vanilla JS UI code. It ensures semantic structure, ARIA labeling, and color-contrast compliance across these frontend frameworks.

How do I ensure keyboard navigation works for frontend login forms?▼

Ensure keyboard navigation works for frontend login forms by verifying logical tab order, visible focus indicators, and semantic structural elements. This makes interactive controls fully usable without a mouse.

When do I need semantic HTML versus ARIA roles for frontend accessibility?▼

You need semantic HTML for structural elements like header, main, and nav first. Apply ARIA roles when semantic HTML is insufficient, specifically for labeling dynamic components like modals and alerts for screen readers.

Related Skills

Explore More Software Engineering Skills→
parhummparhumm
25

frontend-design

Scaffold frontend UI components for React, Vue, or vanilla JS projects.

Community
Advanced
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate
nanorepublicananorepublica
61

Frontend Accessibility

Enforce frontend accessibility compliance in HTML, CSS, and JavaScript components.

Community
Basic
t-stringst-strings

Frontend Accessibility

Review frontend UI code for HTML semantics, ARIA, keyboard navigation, and contrast.

Official
Basic