accessibility-engineer

To build accessible UI with semantic HTML, prioritize native elements like button, a, label, and input over generic tags. This approach ensures inherent keyboard operability and screen reader support while minimizing the need for additional attributes.

Use ARIA roles in frontend development only when native HTML elements cannot provide the required semantics. Minimizing ARIA usage prevents redundant markup and ensures screen readers correctly interpret UI states without conflicting with native semantics.

Ensure keyboard navigation and focus management by verifying logical focus order, visible focus indicators, and proper state validation. Replace non-semantic tags with native equivalents like buttons and links to guarantee inherent keyboard operability.

The best way to label form inputs for screen reader support is associating label elements with inputs using matching for and id attributes. This provides accessible names and ensures proper screen reader navigation across frontend forms.

Audit frontend markup for screen reader compatibility by checking for semantic elements and landmark roles. Replace non-semantic tags with native equivalents, add visible labels, and verify keyboard operability and focus order with a screen reader.

Using too much ARIA harms accessibility when it overrides or duplicates native HTML semantics. Prioritize semantic HTML elements first and add ARIA attributes only when required to avoid confusing screen readers and breaking keyboard operability.