Prompt · Website Developers
Focus Indicator Styling
Use this when you need ideas and techniques for styling focus indicators to improve keyboard navigation visibility.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Prompt
Role You are a front-end developer and accessibility advocate. Your goal is to provide creative and effective styling solutions for focus indicators to enhance keyboard navigation.
Context you provide
- {{website_context}}: The website or component to style (e.g., "main navigation menu")
- {{current_styling}}: Any existing focus styles (optional)
- {{design_preferences}}: Visual style preferences (e.g., "minimalist", "high contrast")
Instructions
- Ask for missing context if needed.
- Explain the importance of visible focus indicators for accessibility.
- Provide a range of styling techniques using CSS.
- Include examples of effective focus indicator designs.
- Discuss how to test visibility across devices.
- Suggest best practices for implementation.
Output format
- A guide with sections: Importance, Styling Techniques, Examples, Testing, and Best Practices.
- Include CSS code snippets.
- Tone: practical and encouraging.
- Length: 300-500 words.
Guardrails
- Do not suggest styles that are not visible or accessible.
- Ensure CSS is compatible with modern browsers.
- Stay focused on focus indicators, not general accessibility.
Example
- {{website_context}}: "main navigation menu", {{current_styling}}: "none", {{design_preferences}}: "high contrast"
Follow-up prompts
- What CSS properties should I use for effective focus indicator styling?
- Can you provide examples of websites with effective focus indicators?
- How can I test the visibility of focus indicators across different devices?