Guides / Web basics

Website accessibility for beginners

Make a website everyone can use: photo descriptions, readable colors, clear headings and more.

What accessibility means

An accessible website is one that everyone can use. That includes people who are blind and listen to pages with a screen reader, people who cannot use a mouse, people with color blindness, and people who get dizzy from moving things on a screen. It also helps someone reading in bright sunlight, holding a baby in one arm, or using an old phone.

The main guide that web builders follow is called WCAG, the Web Content Accessibility Guidelines. The current version is WCAG 2.2. You do not need to read all of it to start. The habits below cover a lot of what matters most.

1. Describe your photos with alt text

A screen reader cannot see a photo. It reads out the photo's alt text instead. Good alt text says what the photo shows, in a short sentence, as if you were describing it to a friend on the phone.

<!-- Not helpful -->
<img src="photo1.jpg" alt="image">

<!-- Helpful -->
<img src="photo1.jpg" alt="A baker pulling a tray of croissants from the oven">

• Do not start with "Image of" or "Picture of". Screen readers already say it is an image.
• If a photo has words in it, put those words in the alt text.
• If an image is only decoration and adds no information, use an empty value, alt="", so screen readers skip it. Never leave alt out completely.

The AI that builds your Kodebloc website writes alt text for the photos it adds, but check it. When you swap a photo for a new one, the old description stays, so it may no longer match. Click the photo in the preview and ask in the chat, for example "Update this photo's alt text to describe it". Read more in Photos in your website.

2. Make colors easy to read

Color contrast is how different the text color is from the background behind it. Light grey text on a white background is hard for many people to read. WCAG measures contrast as a ratio:

• Normal text needs a ratio of at least 4.5:1.
• Large text needs at least 3:1. Large means about 24 pixels or bigger, or about 19 pixels or bigger in bold.
• Icons, button edges and form box borders need at least 3:1 against what is next to them.

You do not have to work out the math. Free contrast checkers on the web let you paste two colors and tell you the ratio. Chrome and Edge also show it in their developer tools when you inspect a piece of text.

Also, never use color as the only way to show something. A form that only turns a box red when something is wrong does not help someone who cannot see red. Add words too, like "Please enter your email".

3. Use headings in order

Many screen reader users jump from heading to heading to find what they want, like flipping through chapter titles. That only works if the headings make a sensible outline.

<h1>Rosa's Bakery</h1>
  <h2>Our breads</h2>
    <h3>Sourdough</h3>
    <h3>Rye</h3>
  <h2>Visit us</h2>

• Use one <h1> for the main title of the page.
• Do not skip levels, like jumping from <h2> to <h4>.
• Choose a heading for its place in the outline, then use CSS to set its size.

Kodebloc builds pages with semantic elements such as <header>, <nav>, <main> and <footer>. Screen readers let people jump straight to these parts too. Our HTML guide explains them.

4. Write link text that makes sense alone

Screen readers can list every link on a page. A list of "Click here, click here, read more" tells the listener nothing. Make the link words say where the link goes.

<!-- Not helpful -->
<p>To see our menu, <a href="#menu">click here</a>.</p>

<!-- Helpful -->
<p>See <a href="#menu">our full menu</a>.</p>

5. Make everything work with a keyboard

Some people cannot use a mouse or a touch screen. They move around a page with the Tab key and press Enter to follow a link or click a button. Try it on your own website:

1. Click in the address bar, then press Tab again and again.
2. Watch for a visible outline or highlight on each link and button as you reach it.
3. Check that you can reach the menu, every button and every form box.
4. Press Shift+Tab to go back, and Enter to follow a link.

If you cannot see where you are, the focus style is missing. Use real <a> and <button> elements, not clickable boxes made from <div>, because they work with the keyboard by default. Kodebloc is told to give every clickable part hover and focus styles.

Make things easy to tap too. WCAG 2.2 asks for targets of at least 24 by 24 pixels, or enough space around smaller ones.

6. Give every form box a label

A form box needs a label that says what to type. The for attribute on the label matches the id on the box, so a screen reader reads the label when the box is selected. Clicking the label also selects the box, which gives a bigger target.

<label for="email">Your email</label>
<input id="email" type="email" name="email" autocomplete="email">

Do not rely on grey placeholder text inside the box as the only label. It disappears as soon as someone starts typing. Kodebloc is told to give every field in a contact or booking form its own visible label.

7. Respect people who want less motion

Sliding, zooming and spinning effects can make some people feel dizzy or sick. Phones and computers have a setting to ask for less motion, and CSS can read it:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Every Kodebloc website gets a rule like this automatically. If a visitor has asked their device for less motion, the website's CSS animations, transitions and smooth scrolling are turned off for them.

Other things Kodebloc does for you

• The page says what language it is in, with <html lang="en">, so screen readers use the right voice. You can change it in Site settings, on the Search tab, under Language.
• In a website with more than one page, screen readers announce the new page's name when a visitor moves to it.
• The viewport tag lets visitors zoom in on phones.