Best prompts for Image Generation ChatGPT for UX mockups using AI for accessibility enhancements

Create a 1080x1920 mobile login screen mockup (portrait) optimized for WCAG AA/AAA readability. Use a high-contrast palette (foreground #0A0A0A on background #FFFFFF and accent #005A9C). Typeface: large, legible sans-serif (>= 18pt for body; 28pt heading). Include: 'Email' and 'Password' fields with persistent labels, password reveal button, a blue high-contrast 'Sign In' CTA (48px height, 44px min touch target), visible focus ring (4px #FFD54F) for keyboard/tab focus, and an inline error state below password in red (#B00020) with 3:1 contrast against background. Overlay a small annotation panel at bottom-right with: alt text for the screen, example alt string, and suggested aria-labels for email, password, and sign-in button. Export as PNG and include an alternate metadata block with: alt: 'Login screen with email and password fields and a high-contrast Sign In button.'

Generate a 1440x900 desktop analytics dashboard mockup. Layout: left nav (vertical), top bar, content grid with 3 cards. Specify keyboard tab order numbers overlayed near each interactive element (nav links 1-6, search 7, filter dropdown 8, first card CTA 9). Show visible focus states (3px dashed outline in #FFB300) and ensure interactive elements are minimum 32px height. Use neutral color scheme with accessible contrast (text >= 4.5:1). Include annotations describing DOM order and suggested tabindex values. Provide export as PNG and a separate JSON snippet with 'tabOrder' array matching overlaid numbers.

Design a 1200x800 web form mockup for profile creation. Include fields: Full Name, Email, Phone, Birthday, Country (select), and a 'Save' CTA. Use a colorblind-safe palette (blue #2B6CB0, orange #DD6B20, green patterns for success). For validation: show inline validation icons + text for invalid email and required phone, provide aria-live error region annotation at top, and ensure error messages are reachable via keyboard focus. Add patterned textures (diagonal lines) to success states so color alone isn't used. Annotate ARIA attributes (aria-invalid, aria-describedby) in a side panel and show contrast ratios for labels and error text (e.g., label 5.2:1). Export PNG and include an accessibility summary beneath.

Create a 1024x768 mockup of a top navigation bar with a dropdown labeled 'Products'. Provide three variants side-by-side: default, keyboard-opened (highlighted focus on first menu item), and reduced-motion mode (no animation, instant open). Show visible focus outlines (dual-color ring), logical DOM order callouts, and include microcopy for keyboard hints: 'Press Enter to open, Arrow Down to navigate, Esc to close'. Include an overlay that states 'prefers-reduced-motion: true' for the reduced-motion variant. Export as a single combined PNG with labels.

Generate a responsive settings page mockup sized 1366x768 with callouts showing 100% and 200% zoom states. Ensure text reflows (no horizontal scroll) at 200%, controls stack vertically, font sizes scale proportionally, and tap targets remain >= 44px. Use clear labels and visible separators. Add an accessibility annotation panel demonstrating keyboard navigation order and note: 'All interactive controls remain reachable at 200% zoom'. Export combined PNG with both zoom states side-by-side and a short accessibility metadata block.

Create a 900x600 modal dialog mockup layered on a dimmed page. Modal includes: heading 'Confirm Deletion', body text, primary 'Delete' (danger) and secondary 'Cancel' buttons. Show visible focus ring transitions, overlay notation 'focus trapped inside modal', and include suggested ARIA attributes: role='dialog', aria-modal='true', aria-labelledby, aria-describedby. Add a side annotation with the exact screen reader announcement text: 'Dialog: Confirm Deletion. Press Escape to close.' Export PNG and include a JSON snippet for aria properties.