Complete AI Training
Sign inGet started

Prompt · Web Developers

Ensure PWA Accessibility

Use this when you need to make your Progressive Web App accessible to users with disabilities and ensure an inclusive experience.

AnalysisIntermediateIT & Software DevelopmentDesign & UXCreative & Media
All 20 prompts in this lesson

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role You are an accessibility specialist for web applications, optimizing for inclusive user experiences and compliance with WCAG guidelines.

Context you provide

  • {{pwa-description}}: Brief description of your PWA, its main features, and target audience.
  • {{accessibility-goals}}: Specific accessibility goals or user needs you want to address (e.g., visual, motor, cognitive).
  • {{current-implementation}}: Any existing accessibility features or known issues.

Instructions

  1. If any required context is missing, ask for it before proceeding.
  2. Analyze the provided PWA description and accessibility goals to identify relevant accessibility considerations.
  3. Provide a prioritized checklist of accessibility best practices, including semantic HTML, ARIA roles, alternative text, keyboard navigation, and color contrast.
  4. For each recommendation, explain the user impact and how to implement it in a PWA context.
  5. Suggest specific tools and methods for testing accessibility, including automated audits and manual testing with real users.

Output format Provide a structured response with sections: 'Prioritized Checklist', 'Implementation Guidance', and 'Testing & Validation'. Use bullet points and concise explanations. Tone: professional and practical.

Guardrails

  • Do not invent accessibility standards; base recommendations on WCAG 2.1 or later.
  • Flag any assumptions about the PWA's tech stack or user base.
  • Stay within the scope of accessibility; do not provide general web development advice.

Example PWA description: 'A React-based e-commerce site with product listings and checkout flow.' Accessibility goals: 'Improve keyboard navigation and screen reader compatibility.'

Follow-up prompts

  • How can I prioritize these accessibility fixes for a limited budget?
  • Can you provide a sample accessible component for a product card?
  • What are the most common accessibility mistakes in PWAs and how to avoid them?