Accessible Web Interfaces

Web Development · 3 minute lesson

An accessible interface helps people use the web with different devices and abilities. Begin with meaningful HTML and ordinary browser controls. A native button supports keyboard interaction without extra code, while a form label explains the purpose of an input.

Keep headings in a logical order and write link text that describes the destination. Provide text alternatives for informative images; decorative images can use an empty alt attribute. Do not rely only on color to explain an error or indicate the selected item.

Keyboard testing is a practical habit. Move through the page with Tab, activate controls, and check that focus remains visible. A control that looks attractive but cannot be reached is incomplete. Small improvements made during implementation are usually easier than repairing every interaction at the end.

Try the example

<form>
  <label for="topic">Topic to learn</label>
  <input id="topic" name="topic" type="text" required>
  <button type="submit">Find lessons</button>
</form>

Practice

Use your keyboard to reach every navigation link and form field. Check that each field has a visible label and every focused control has a clear visual indicator. Write down one improvement you can make.

Continue learning: Official documentation.