frontend-wcag-perceivable

Sterne4

Forks0

Aktualisiert4. Juli 2026 um 10:30

Use when writing front-end components that must meet WCAG 2.x perceivability criteria: text alternatives, contrast ratios, responsive layouts, and color usage.

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

Adimac93

Adimac93/built-with-ai

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

Web- und digitale SchnittstellendesignerInformatik- und Mathematikberufe·SOC 15-1255

SKILL.md

readonly

name	frontend-wcag-perceivable
description	Use when writing front-end components that must meet WCAG 2.x perceivability criteria: text alternatives, contrast ratios, responsive layouts, and color usage.

WCAG Perceivable Guidelines

Provide text alternatives for non-text content (images, icons, graphics) with appropriate alt
Ensure pre-recorded audio-visual content has captions, audio descriptions, and transcripts
Maintain minimum contrast ratios: 4.5:1 for normal text, 3:1 for large text and UI components
Enable content to be presented without losing information when zoomed or resized
Avoid using color alone to convey information — pair with text, patterns, or icons
Provide controls to pause, stop, or hide moving, blinking, or auto-updating content
Ensure text can be resized up to 200% without loss of content or functionality
Use responsive design that adapts to different viewports without horizontal scrolling
Allow users to customize text spacing without breaking layouts

Mehr aus diesem Repository

gleiches Repository

coding-practices-git

Adimac93/built-with-ai

Use when committing to the repository, writing commit messages, naming branches, structuring commits, or managing git history.

2026-07-044

coding-practices-github

Adimac93/built-with-ai

Use when changing GitHub configuration, setting up branch protection rules, configuring CODEOWNERS, pull request templates, or GitHub repository settings.

2026-07-044

coding-practices-monorepo

Adimac93/built-with-ai

Use when creating a new package, changing workspace configuration, setting up shared tooling, or making decisions about monorepo structure and package boundaries.

2026-07-044

devops-github-actions

Adimac93/built-with-ai

Use when configuring GitHub Actions workflows, writing CI/CD pipelines, setting up composite actions, or managing workflow secrets and environment variables.

2026-07-044

frontend-angular

Adimac93/built-with-ai

Use when writing Angular TypeScript or HTML template files. Covers modern Angular patterns: standalone components, signals, inject(), control flow syntax, and lazy loading.

2026-07-044

frontend-aria

Adimac93/built-with-ai

Use when writing front-end components that require ARIA attributes, accessible custom widgets, screen reader support, or dynamic content announcements.

2026-07-044

name	frontend-wcag-perceivable
description	Use when writing front-end components that must meet WCAG 2.x perceivability criteria: text alternatives, contrast ratios, responsive layouts, and color usage.

WCAG Perceivable Guidelines

Provide text alternatives for non-text content (images, icons, graphics) with appropriate alt
Ensure pre-recorded audio-visual content has captions, audio descriptions, and transcripts
Maintain minimum contrast ratios: 4.5:1 for normal text, 3:1 for large text and UI components
Enable content to be presented without losing information when zoomed or resized
Avoid using color alone to convey information — pair with text, patterns, or icons
Provide controls to pause, stop, or hide moving, blinking, or auto-updating content
Ensure text can be resized up to 200% without loss of content or functionality
Use responsive design that adapts to different viewports without horizontal scrolling
Allow users to customize text spacing without breaking layouts