FREE LESSON · People, interfaces & ethics · 2 OF 5

Accessible structure, focus, and feedback

Accessible structure, focus, and feedback: Make the same task operable through different input and perception modes.

Prerequisites: HTML and interface state.

Learning objectives

Use semantic controls and labels.
Plan keyboard focus across state changes.
Explain why automated checks are incomplete.

Accessibility begins with the task

A usable interface exposes information and actions through more than one narrow interaction pattern. People may navigate by keyboard, screen reader, magnification, touch, speech input, or combinations of these. Temporary circumstances such as a broken mouse or bright sunlight can expose the same design weaknesses.

Semantic HTML supplies meaningful roles and behavior. A button performs an action; a link navigates to a destination. A styled generic element does not automatically acquire keyboard behavior, an accessible name, or the expected role. Start with the appropriate native control, then add only the behavior the task requires.

Trace a form error

Suppose a sign-in form has an email field and submit button. Associate a visible label with the field. After an invalid submission, identify the error in text, connect it to the field, preserve the entered value, and give the user a clear way to correct it. Red coloring alone does not explain what failed and may not be perceived.

If an asynchronous request fails, announce the change through an appropriate status or alert mechanism without repeatedly interrupting the user. If a dialog opens, move focus into it deliberately, keep keyboard interaction within the active modal while it is open, and return focus to a sensible place when it closes. The exact implementation depends on the dialog pattern and platform behavior.

Headings describe the document hierarchy; they should not be chosen only for font size. Landmarks identify major regions such as navigation and main content. Lists and tables preserve relationships that visual spacing alone cannot communicate. An image that conveys information needs an equivalent description; a decorative image generally should not add distracting repetition.

Visible focus, adequate contrast, readable zoom behavior, and sufficiently usable targets all contribute to the interaction. Motion should respect user preferences where appropriate. Avoid placing essential information only in hover states or relying on color as the sole distinction.

Verify with multiple kinds of evidence

Automated tools can detect some missing labels, invalid structures, and contrast problems. They cannot establish whether an alternative description is meaningful, whether focus order supports the task, or whether error recovery makes sense. Combine automation with keyboard walkthroughs, screen-reader checks, zoom testing, and feedback from people with relevant access needs.

Accessibility is maintained through component contracts and regression checks. A new loading state can remove a focused control, and a refactor can break a label association. Test the complete task, including failure and recovery, rather than treating one successful scan as a permanent certification.

Practice problem

Specify an accessible quiz interaction with four radio choices, a Check answer button, and feedback. Include grouping, naming, keyboard behavior, and what happens after an incorrect answer.

Worked solution

Use a fieldset and legend for the question, a labeled radio input for each choice, and a native button to submit. Native radio behavior supports keyboard selection within the group. Keep focus predictable when feedback appears, provide textual feedback connected to the question or announced appropriately, and do not communicate correctness by color alone. Preserve the chosen answer and allow revision. Test tab order, arrow-key selection, visible focus, screen-reader labels, zoom, and error feedback. A passing automated scan alone does not establish that the explanation or interaction is understandable.

Check your understanding

Why prefer a native button for an action?

It guarantees the whole page is accessible.
It supplies expected semantics and keyboard behavior.
It prevents all network errors.
It eliminates the need for a label.

Explanation

Native semantics provide a sound starting point, though the complete flow still needs review.

Which feedback is insufficient by itself?

A clear text explanation.
A linked field error.
An appropriate status announcement.
Turning the answer border red.