Accessibility Basics

One-sentence summary

Accessibility is a set of practices that make a web page comfortable to use for everyone, including people who cannot see, who use only a keyboard, or who have other needs.

Why does it matter?

A web page is not written only for people looking at a screen with a mouse. Some users cannot see the screen at all and use a screen reader, a program that reads the page text out loud. Some users cannot use a mouse and move around with the keyboard only. Some users find it hard to tell colours apart.

Accessibility (often shortened to a11y) means thinking about these people too. The good news is that writing an accessible page is not a lot of extra work. Using the right element in the right place is usually enough.

Accessibility is not only for one group of people, either. Someone looking at their phone in bright sunlight, someone using one hand on the keyboard because of a broken arm, or someone who simply likes read-aloud features all benefit from it. An accessible page is a more usable page for everyone.

Images and alternative text

A screen reader cannot look inside an image and understand what it shows. So we write alternative text (alt text) for it. The alt attribute is the description that is read when the image does not load or the user cannot see it.

Meaningful image

If an image carries information, the alt text should describe that information briefly.

<img src="cat.jpg" alt="An orange cat sleeping on a windowsill">

A screen reader reads this as "An orange cat sleeping on a windowsill, image." Even without seeing the picture, the user understands what is there.

Decorative image

If an image is only for decoration and carries no information, we leave the alt text empty. This way the screen reader skips it and does not tire the user with extra noise.

<img src="line-decoration.png" alt="">

Note: removing the alt attribute is not the same as leaving it empty. An empty alt="" means "this is decoration, skip it." Omitting it entirely can make the screen reader read out the file name instead.

Forms and labels

In the previous lesson we learned about forms. The most important step in making a form accessible is connecting a label to every input box. The label says what the box is for.

To connect a label to a box, we make the for value of the label element match the id value of the input element.

<label for="nickname">Your nickname</label>
<input id="nickname" type="text" name="nickname">

Thanks to this link, a screen reader says "Your nickname, text box" when it reaches the box. Clicking the label also moves the cursor straight into the box, which helps on small screens.

Reminder: This academy has no real form and never asks you for personal details like your name, email or phone number. The examples below are for practice only. Never type your real personal information into any practice page.

Keyboard, focus and colour

Moving with the keyboard

Someone who cannot use a mouse moves through the page with the Tab key. Each press jumps to the next link or button. This is called focus. Links (a), buttons (button) and form boxes receive focus naturally. That is why, when you make something clickable, using a real button instead of a div matters.

<button type="button">Open the menu</button>

A border usually appears around the focused element. Removing this border completely with CSS breaks accessibility, because the user can no longer see where they are. If you remove the border, you must replace it with your own visible marker.

Colour contrast

If the text colour and the background colour are too close to each other, some users cannot read the text. Enough contrast is needed. Light grey text on a light grey background is a poor choice; dark text on a light background is good.

Also, do not rely on colour alone to carry meaning. If you say "the green one is correct, the red one is wrong," a colour-blind user cannot tell them apart. Add an icon or a word alongside the colour.

Heading order and basic ARIA

Use headings in order

Heading tags (h1, h2, h3) work like a table of contents for the page. Someone using a screen reader can jump between headings to move through the page quickly. So h1 is used once (the page's main title) and sub-headings go down in order. Do not pick headings just to "make the text look big"; pick them by their meaning.

aria-label and aria-hidden

Some buttons have no visible text, only an icon. A screen reader cannot read the icon. In that case we give it a name with aria-label.

<button type="button" aria-label="Start search">
  <span aria-hidden="true">🔍</span>
</button>

Here aria-label makes the button's name "Start search." The magnifying-glass icon inside is only decoration, so aria-hidden="true" hides it from the screen reader, so it does not also try to read the icon.

Rule: always use the correct HTML element first. ARIA is a helper you add only when HTML alone is not enough; it does not replace HTML.

Hands-on practice

Below is both an accessible image and an accessible button. Save it to a file and open it in a browser.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Accessibility practice</title>
  </head>
  <body>
    <h1>Cute animals</h1>
    <img src="dog.jpg"
         alt="A brown dog running across the grass">
    <button type="button" aria-label="Turn sound on">
      <span aria-hidden="true">🔊</span>
    </button>
  </body>
</html>

Now try these:

• Write a different image name and change the alt text to match that image.
• Press Tab and watch the button receive focus; notice the border appear.
• Change the button's aria-label value and think about what will be read out.

Common mistakes

Empty or meaningless alt text

Writing alt="image" for a meaningful image does not help. It does not say what it is. Describe the content of the image briefly.

A form box with no label

Placing only the box without a label leaves a screen reader user unable to tell what the box is for. Connect a label to every box.

Removing the focus border

Writing outline: none and adding no replacement makes keyboard users lose track of where they are. Either keep the border or add your own visible marker.

Using a clickable div

A div acting as a button does not receive keyboard focus. For anything clickable, use a real button or a.

Using ARIA when it is not needed

Adding aria-label to a button that already has text creates a conflict. Use ARIA only when it is genuinely needed.

Safety note

Accessibility and privacy go together. Do not write your real name, address, phone number or the name of your school inside an alt text or an aria-label; that text is visible to everyone in the page source. When practising, use made-up names and example data. Any time you think you need to enter real personal information on a site, check with an adult first. Remember: this academy has no real form and does not collect personal information from you.

Lesson summary

• Accessibility (a11y) means the page is usable for everyone, including people who cannot see, who use a keyboard, or who have other needs.
• Meaningful images get descriptive alt text; decorative images get an empty alt="".
• Every form box should be labelled through a for/id link with a label.
• For keyboard users, use real button/a and keep the focus border visible; colour contrast must be sufficient.
• Icon buttons get an aria-label, decorative icons are hidden with aria-hidden="true"; ARIA is added alongside correct HTML, not in its place.

Review questions

1. What is a screen reader and what is it for?
2. If an image is only decorative, what do you put in the alt attribute?
3. How do you connect a label element to an input box?
4. Why is it a problem to remove the focus border with CSS for a keyboard user?
5. What do aria-label and aria-hidden="true" do? Explain briefly.

Answers

1. A screen reader is a program that reads the text and elements of a page out loud; users who cannot see, or who see little, use it to work with the page.
2. Leave it empty: alt="". This way the screen reader skips the decorative image.
3. By making the for value of the label match the id value of the input. Example: <label for="nickname"> with <input id="nickname">.
4. Because a keyboard user can no longer see which element they are currently on; if you remove the border, you must add your own visible marker instead.
5. aria-label gives an element with no text a name that the screen reader reads; aria-hidden="true" hides a decorative element from the screen reader.

Source and verification note

For “Accessibility Basics”, verification focuses on whether the relationship between Images and alternative text and Decorative image remains consistent across examples. Examples use standards-oriented HTML, CSS and browser JavaScript. A page should be checked not only visually but also for keyboard use, focus order, mobile layout and meaningful heading structure.

Next lesson

Project: Personal Project Page