LWCAdvanceda11ykeyboarddatagrid
Implement accessible keyboard navigation for custom LWC datagrid
Real World Scenario
Custom datagrid LWC passes visual QA but fails WCAG audit — screen reader cannot navigate rows and arrow keys trap focus.
Expected Answer
• Use role="grid", role="row", role="gridcell" with proper aria-rowindex
• Implement roving tabindex on rows — one tab stop per row
• Arrow keys move focus between cells; Enter activates row action
• Announce sort changes via aria-live region
• Do not rebuild entire DOM on sort — preserve focus target
• Test with NVDA and VoiceOver on real browsers
• Prefer lightning-datatable when requirements allow — platform a11y maintained
Follow-Up Questions & Answers
Click to expand — each follow-up includes a direct, interview-ready answer
Direct answer: Use role="grid", role="row", role="gridcell" with proper aria-rowindex Also consider: Implement roving tabindex on rows — one tab stop per row In practice: Arrow keys move focus between cells; Enter activates row action Optimize for scale and operational observability.
Architect Perspective
Custom datagrids are expensive for a11y — default to lightning-datatable unless requirement truly unique.