Web Accessibility taste — ChatGPT prompt: setup and usage
Sets frontend accessibility standards for interface development. It guides accessible markup, keyboard navigation, and focus handling.
Open on GitHubWhat Web Accessibility taste does
This prompt sets frontend accessibility standards for web interfaces. It demands native HTML semantics before reaching for ARIA attributes. Links handle page navigation while buttons trigger actions. Clicks on plain container tags are prohibited. Each form control must have a visible label, and pages need a structured heading hierarchy.
The guidelines focus on keyboard navigation without focus traps. Modal dialogs rely on the native dialog element, and contrast ratios follow WCAG AA targets. For dynamic widgets, the prompt favors component primitives like Radix or React Aria rather than homebrewed menus. Automated checks through axe or Lighthouse catch roughly a third of accessibility flaws, so manual verification with screen readers remains mandatory.
What it helps with
- Enforce native semantic HTML instead of custom ARIA markup
- Build keyboard navigation flows without focus traps
- Match WCAG AA contrast ratios across text and controls
- Connect form inputs with visible, programmatically linked labels
- Integrate
eslint-plugin-jsx-a11yand automated audits into CI
Example prompts for the agent
- Audit this modal component markup using the Web Accessibility taste criteria
- Refactor our signup form according to Web Accessibility taste guidelines
- Review our keyboard navigation and focus management against Web Accessibility taste
How to install Web Accessibility taste
How to use
Paste the text at the start of a chat or into project instructions
Manually: put the files in place
.claude/commands/prompts.csv.mdQuestions about Web Accessibility taste
How do I install Web Accessibility taste in ChatGPT?
No terminal installation is required for ChatGPT: paste the prompt text into your custom instructions or prompt window. In Claude Code, save it to .claude/commands/prompts.csv.md.
What does Web Accessibility taste do?
It provides accessibility rules for frontend code: native HTML over ARIA, keyboard navigation without traps, WCAG AA contrast ratios, and avoiding click events on div tags.
Are automated axe and Lighthouse audits enough for accessibility?
No, automated tooling flags roughly a third of all issues. Critical user flows must be tested manually with screen readers like VoiceOver and NVDA.
Source text
prompts.csv · CC0-1.0
# Web Accessibility taste of a frontend engineer - Use semantic HTML first (button, a, nav, main, label); add ARIA only when no native element fits. Confidence: 0.95 - Never put click handlers on div or span; if it acts like a button, it is a button. Confidence: 0.95 - Links navigate and buttons perform actions; do not swap them for styling reasons. Confidence: 0.90 - Every form input has a visible, programmatically associated label; placeholders are not labels. Confidence: 0.95 - Keep one h1 per page and never skip heading levels for visual size; style with CSS instead. Confidence: 0.80 - Write alt text that describes the purpose of the image, and use alt="" for purely decorative images. Confidence: 0.90 - Keep a visible focus indicator on every interactive element; use :focus-visible rather than removing outlines. Confidence: 0.95 - Every feature must work with the keyboard alone, in a logical tab order, with no keyboard traps. Confidence: 0.95 - Avoid positive tabindex values; fix the DOM order instead. Confidence: 0.90 - Meet WCAG AA contrast: 4.5:1 for body text and 3:1 for large text and UI components. Confidence: 0.90 - Never convey meaning by color alone; pair it with text, an icon or a pattern. Confidence: 0.90 - Use the native dialog element (or a well-tested library) for modals, trap focus while open and return focus to the trigger on close. Confidence: 0.85 - Announce async status and errors with an aria-live region or role="alert", and move focus to the error summary after a failed submit. Confidence: 0.80 - Honor prefers-reduced-motion and avoid autoplaying motion longer than five seconds. Confidence: 0.85 - Make touch targets at least 24x24 CSS pixels, ideally 44x44. Confidence: 0.75 - Size text in rem and make sure the layout survives 200% zoom and 320px width without horizontal scrolling. Confidence: 0.85 - Add a "Skip to main content" link as the first focusable element. Confidence: 0.80 - Set the lang attribute on html and on any inline passage in another language. Confidence: 0.85 - Run axe or Lighthouse checks in CI, knowing they catch only about a third of issues. Confidence: 0.85 - Test critical flows manually with a screen reader (VoiceOver and NVDA) before each major release. Confidence: 0.80 - Lint JSX with eslint-plugin-jsx-a11y and treat its errors as build failures. Confidence: 0.75 - Prefer accessible component primitives (Radix, React Aria) over building comboboxes and menus from scratch. Confidence: 0.80
© f · CC0-1.0 · f/prompts.chat
