Responsive design and accessibility QA

[fusion94]

Description

Ensure the application meets accessibility standards and works well across all device sizes.

Accessibility (WCAG 2.1 AA)

Requirements

• All interactive elements have accessible labels (aria-label, aria-labelledby)
• Form fields have associated labels
• Color contrast meets 4.5:1 ratio for normal text, 3:1 for large text
• Focus indicators visible on all interactive elements
• Keyboard navigation works for all workflows:
  • Tab through all interactive elements
  • Enter/Space to activate buttons
  • Arrow keys for dropdowns/selects
  • Escape to close modals/dialogs
• Screen reader compatibility (semantic HTML, ARIA landmarks)
• Error messages associated with form fields (aria-describedby)
• Loading states announced to screen readers (aria-live)
• Skip navigation link

Audit Tools

• axe-core browser extension for automated checks
• Manual keyboard navigation testing
• Screen reader testing (VoiceOver on macOS)

Responsive Design

Breakpoints

• Mobile: 375px – 767px
• Tablet: 768px – 1023px
• Desktop: 1024px+

Mobile Specific

• Navigation: hamburger menu or bottom navigation
• Wine list: card view instead of table on mobile
• Forms: full-width inputs, stacked layout
• Charts: simplified or swipeable on mobile
• Touch targets: minimum 44x44px
• No horizontal scrolling

Desktop Specific

• Sidebar navigation
• Table view for wine list with sortable columns
• Dashboard with multi-column chart grid
• Side-by-side layouts where appropriate

Cross-Browser Testing

• Chrome (latest)
• Firefox (latest)
• Safari (latest, macOS + iOS)
• Edge (latest)

Acceptance Criteria

• WCAG 2.1 AA compliance verified (0 critical/serious axe violations)
• All workflows completable via keyboard only
• App usable at 375px viewport width
• App usable at 1024px+ viewport width
• No horizontal scrolling on mobile
• Touch targets meet minimum size
• Color contrast ratios meet standards
• Tested on Chrome, Firefox, Safari

References

• PRD Section 5: Non-Functional Requirements (Accessibility)
• PRD Section 9: Testing Strategy (F-13: Responsive layout)