✅ Semantic HTML

• Use correct semantic elements (<header>, <nav>, <main>, <footer>, etc.).
• Prefer native HTML controls over custom ARIA widgets.
• Use correct heading hierarchy (<h1>, <h2>, etc.) without skipping levels.

✅ ARIA Usage

• Only use ARIA where necessary (and correctly).
• Provide appropriate role, aria-label, aria-labelledby, and aria-describedby attributes.
• Maintain correct ARIA states (aria-expanded, aria-pressed, etc.) dynamically.

✅ Keyboard Navigation

• Ensure all functionality is keyboard accessible (Tab, Enter, Space, Arrow Keys).
• No keyboard traps: users can enter and exit any interactive element smoothly.
• Manage focus states properly when opening/closing modals or dynamic components.

✅ Forms and Error Handling

• Label all form elements properly using <label>.
• Display clear, descriptive error messages linked via aria-describedby.
• Validate inputs in real-time without causing disruptive behavior.

✅ Media Accessibility

• Provide text alternatives for images (basic and complex).
• Add captions for videos and transcripts for audio-only content.
• Provide audio descriptions for visual-only content if applicable.

✅ Responsive and Touch Accessibility

• Maintain target size (minimum 44×44 CSS pixels for interactive elements).
• Ensure gestures (like swipe) have simpler, accessible alternatives.

✅ Dynamic Content

• Use aria-live regions to announce dynamic changes where necessary.
• Ensure users are informed without needing to refresh or poll the page manually.

Advanced Accessibility QA Checklist

✅ General Testing

• Navigate all features using only a keyboard (without using a mouse).
• Confirm visible focus indicators on all focusable elements.
• Check text contrast ratios meet WCAG minimums (4.5:1 normal text, 3:1 large text).
• Confirm color is never the only way to convey information (use text/icons too).

✅ Screen Reader Testing

• Test using at least one screen reader (NVDA, VoiceOver, or JAWS).
• Verify that screen readers announce page structure correctly (headings, landmarks).
• Ensure dynamic announcements (live regions, status messages) are read out correctly.

✅ Mobile Accessibility

• Test touch targets (buttons, links) for appropriate size and spacing.
• Check that custom gestures are accessible or have keyboard-friendly fallbacks.
• Ensure responsiveness does not break accessibility (no hidden/inaccessible elements).

✅ Forms and Modals

• Validate that errors are announced immediately after submission failure.
• Test that form fields have labels and hints correctly connected.
• Ensure modals trap focus when open and return focus when closed.

✅ Advanced Use Cases

• Confirm that custom widgets like dropdowns, tabs, sliders, and dialogs:
  • Have correct roles and ARIA attributes.
  • Are operable by keyboard.
  • Provide appropriate screen reader feedback.

✅ Automated + Manual Testing Combo

• Run automated tests using axe DevTools, WAVE, and Lighthouse.
• Manually inspect areas automated tools can miss, such as:
  • Logical tab order
  • Screen reader behavior
  • Gesture fallback support