learnAcode LogoLearnACode
Back to subject
HTML5/HTML Accessibility Basics

Make One Small Accessible Page

Practical lesson

Let's make a small page easier to understand with a keyboard, screen reader, and other assistive technology.

- Use semantic elements such as <nav>, <main>, <button>, and <header> when they match the job. - Give images meaningful alt text when the image communicates information. - Use real <button> elements for buttons instead of clickable <div> elements. - Connect every important form control to a visible <label>. - Use heading levels to create a logical document outline. - Keep link text descriptive instead of using vague text such as "click here" when the destination can be named. - Set the document's lang attribute so assistive technology can choose the correct language behavior. - Do not remove visible focus indicators without providing an accessible replacement in CSS. - Use ARIA only when native HTML does not already provide the required meaning or behavior.

Accessibility is not one special tag. It comes from using the right HTML meaning, clear text, labels, alternatives, and usable interactions together.

Try it yourself
Code

Starter example

Code
<main>
  <h1>Profile</h1>
  <img src="person.jpg" alt="A student smiling at a desk">
  <form>
    <label for="email">Email</label>
    <input id="email" type="email">
    <button type="submit">Save</button>
  </form>
</main>
Live preview