One line of CSS that breaks keyboard accessibility sitewide and two other patterns we keep finding in audits

Short summary

Three CSS/HTML patterns—removed focus indicators, non-focusable interactive elements, and keyboard-unreachable form fields—independently break keyboard navigation across sites and violate WCAG AA standards. Each pattern includes a documented fix: use :focus-visible for indicators, semantic HTML buttons for navigation, and proper keyboard event handlers for custom controls.

• •One-line CSS rule (outline: none) removes focus indicators sitewide; replace with :focus-visible to maintain keyboard visibility
• •Interactive elements built with <div> or unhref'd <a> tags skip tab order; use <button> with ARIA labels and aria-expanded states
• •Hidden input + custom UI pattern in date pickers and dropdowns blocks keyboard users entirely; add keydown handlers and reflect selection in accessible name

Generated with AI, which can make mistakes.