skills.rest
Hack23
Hack23OFFICIAL
Explore all skills by this author →
WebsiteGitHub

html-accessibility

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

9|3|Updated Jun 4, 2022
Search Tags:#html#accessibility#css#wcag#contrast#keyboard#aria
One-click install
npx skills add https://github.com/Hack23/riksdagsmonitor --skill html-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-accessibility
Source: https://github.com/Hack23/riksdagsmonitor/tree/main/.github/skills/html-accessibility
Command: npx skills add https://github.com/Hack23/riksdagsmonitor --skill html-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web accessibility (WCAG 2.1 AA) best practices for static HTML/CSS websites to ensure inclusivity and usable experiences for all users.

Core Features & Use Cases

  • Provides semantic HTML guidelines, proper alt text, captions where applicable, keyboard navigation, and ARIA usage to improve screen reader compatibility.
  • Improves color contrast, focus visibility, and responsive behavior for diverse users.
  • Use case: perform an accessibility audit on a static site and implement necessary improvements to meet WCAG 2.1 AA.

Quick Start

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

Frequently Asked Questions about html-accessibility

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

FAQPage Schema
How do I audit a static HTML site for WCAG 2.1 AA compliance?▼

Audit static HTML for WCAG 2.1 AA compliance by checking semantic markup, text alternatives, color contrast, keyboard navigation, and ARIA roles across site pages to identify accessibility gaps.

What is included in WCAG 2.1 AA accessibility improvements for static sites?▼

WCAG 2.1 AA accessibility improvements for static sites include applying semantic HTML, proper alt text, sufficient color contrast, visible focus states, keyboard access, and correct ARIA usage for screen readers.

Can I use this approach to fix keyboard navigation and ARIA roles on my website?▼

Yes, you can fix keyboard navigation and ARIA roles by applying semantic HTML structures, ensuring logical tab order, managing focus visibility, and applying correct ARIA attributes for screen reader compatibility.

Does this process work for improving color contrast in CSS?▼

Yes, the process works for CSS color contrast by evaluating stylesheets against WCAG 2.1 AA ratio requirements and adjusting foreground and background colors to ensure text readability for diverse users.

What are the limitations of applying WCAG 2.1 AA guidelines to static HTML and CSS?▼

Limitations include focusing solely on static HTML and CSS codebases, meaning complex dynamic JavaScript interactions, single-page applications, and server-rendered dynamic content accessibility fall outside this scope.

Why does my static site need semantic HTML and alt text for accessibility?▼

Static sites need semantic HTML and alt text to provide screen readers with meaningful document structure and image context, ensuring visually impaired users can navigate and understand page content effectively.

Related Skills

Explore More Software Engineering Skills→
PaulRBergPaulRBerg
6

web-design-guidelines

Evaluate HTML, CSS, and JavaScript files against current Web Interface Guidelines.

Community
Intermediate
fcsonlinefcsonline
49

accessibility

Apply WCAG 2.1 AA accessibility patterns to the DroneRoute UI.

Community
Intermediate
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
JhabbigJhabbig

wcag-audit-patterns

Audit web interfaces for WCAG 2.2 accessibility violations.

Community
Advanced