site-accessibility-layout

Start with semantic HTML landmarks, a skip link, and correct heading hierarchy before adding any ARIA. Then verify keyboard users can reach all major actions, focus stays visible and unobscured, and interactive targets are touch-friendly.

Move focus to a meaningful element when the dialog opens, keep background content non-interactable while modal, and return focus to the invoking control on close. Only trap focus inside true modal contexts and provide an escape or close action.

Use native HTML semantics first and treat ARIA as a supplement, not a substitute. Only add ARIA roles and attributes when a custom widget cannot be expressed with native elements, and define its keyboard behavior and labels explicitly.

Combine inline field errors near each invalid control with a page-level error summary that links to those fields. Move focus to the summary after a failed submit, keep messages specific, and preserve valid user input.

Provide an equal-outcome alternative such as move up or move down buttons, a destination selection menu, or explicit source and target selectors. The requirement is equal outcome, not an identical interaction.