Category 9: Accessibility & Compliance

Create a navigation menu section that:

• Uses ARIA roles and labels for all interactive elements
• Supports keyboard navigation and focus indicators
• Has sufficient color contrast for all text and icons

Build a form section (e.g., contact, newsletter) that:

• Uses proper label associations for all inputs
• Supports keyboard navigation and screen reader compatibility
• Provides clear error and success messages

Create a toggle button for high-contrast mode that:

• Increases contrast for text, backgrounds, and buttons
• Remembers user preference with localStorage
• Is accessible and visible on all pages

Generate an accordion section that:

• Uses ARIA-expanded and ARIA-controls attributes
• Is fully navigable by keyboard
• Includes visually clear focus states

Build a content block that:

• Is hidden visually but readable by screen readers
• Lets merchants add accessibility notes or descriptions

Create an image gallery section that:

• Ensures all images have descriptive alt text
• Supports keyboard navigation between images
• Uses ARIA roles for gallery and controls

Generate pagination for collections/blogs that:

• Uses ARIA labels and roles
• Has clear focus and active states
• Is fully keyboard navigable

Build a cookie consent banner that:

• Blocks analytics and marketing scripts until accepted
• Lets users manage their preferences
• Is accessible and mobile-friendly

Create a modal or popup section that:

• Traps keyboard focus inside the modal when open
• Can be closed with ESC key or close button
• Announces itself to screen readers

Build a table section that:

• Uses semantic table markup with <caption>, <th>, and <td>
• Supports keyboard navigation and screen reader compatibility
• Has sufficient color contrast and clear borders

Generate a section for an accessibility statement that:

• Is linked from the header or footer
• Lets merchants edit the statement in the theme editor
• Is clear and easy to read

Create a live region for dynamic content (e.g., cart updates, notifications) that:

• Uses aria-live="polite" or aria-live="assertive"
• Announces updates to screen readers automatically

Build a countdown timer section that:

• Announces time changes to screen readers
• Uses ARIA labels for timer elements
• Is keyboard accessible

Create a social icons section that:

• Includes descriptive labels for each icon (e.g., "Follow us on Twitter")
• Supports keyboard navigation and focus states

Build a product variant selector that:

• Uses ARIA roles for radio buttons or dropdowns
• Announces selected variant to screen readers
• Is keyboard navigable

Generate a slider or carousel section that:

• Has pause/play controls and ARIA labels
• Is fully keyboard navigable
• Announces slide changes to screen readers

Create a breadcrumb section that:

• Uses semantic markup and ARIA labels
• Is easily navigable by keyboard and screen readers

Build a notification section for errors and successes that:

• Uses ARIA live regions for announcements
• Is visually distinct and screen reader friendly

Create a "Skip to Content" link at the top of every page that:

• Is visible on keyboard focus
• Jumps directly to the main content area

Generate policy page sections (privacy, terms, returns) that:

• Use semantic headings and clear structure
• Are easy to read and navigate for all users

Build a color palette switcher that:

• Lets users choose from accessible color themes
• Ensures all combinations meet WCAG AA contrast standards
• Remembers user preference

Create a language selector that:

• Uses ARIA roles and labels
• Announces language changes to screen readers
• Is keyboard accessible