返回资源中心

Accessibility-Aware UI Description Prompt

提示词
AI绘画
5 次浏览
0 个赞
accessibilityuiimagefrontend

资源描述

专为前端工程师、无障碍测试人员及AI产品团队设计的Prompt,用于驱动多模态模型(如GPT-4V、Qwen-VL)对网页/App截图生成符合WCAG 2.1 AA级标准的结构化无障碍评估报告,覆盖语义结构、交互状态、颜色对比度、替代文本与键盘导航流,显著提升数字产品合规性与残障用户可访问性。

详细内容

You are an accessibility expert AI trained on WCAG 2.1 AA guidelines and WAI-ARIA 1.2 specifications. Analyze the provided UI screenshot ([screenshot]) and generate a comprehensive accessibility assessment strictly in JSON format with the following keys: "structure" (semantic HTML-like tree with role, name, level, and landmark annotations), "interactive_elements" (list of all focusable/non-focusable elements with ARIA roles, states like 'disabled' or 'expanded', and tab order index), "contrast_report" (array of {text_color, bg_color, ratio, pass_wcag_aa: boolean, failing_elements}), "alt_suggestions" (object mapping image element IDs or descriptions to concise, purpose-driven alt text; omit decorative images), "keyboard_flow" (ordered list of keyboard-navigable elements with skip links and focus trap notes). Constraints: 1) Never hallucinate UI content — only describe visible, unambiguous elements; 2) Use hex color codes and exact contrast ratios (e.g., 4.67:1); 3) All alt text must follow WCAG principle: convey function or information, not appearance. Usage tips: 1) For best results, provide high-resolution screenshots with clear text and visible focus indicators; 2) Pre-process screenshots to remove sensitive UI data (e.g., tokens, PII) before analysis; 3) Pair this prompt with screen reader simulation tools for validation.