What does this project ask you to do?
Crumb and Crust Bakery has a home page that looks warm and tidy. A sighted mouse user can read the hours, see the loaves and find the cake order link in seconds. Everyone else runs into trouble almost at once. The page has no language, no title, no main landmark, a heading outline with gaps, a photo read as a file name, a decorative image that talks, pale text and a link that says “click here”.
None of these is new. Each one comes from a lesson in Foundations or Content. What is new is meeting them all together on one realistic page, the way you will on real sites. The skill being practised is the order of work: find the problems, hear what they cost, fix them one at a time and check after each fix that nothing else broke.
Work in the editor on the left. Keep the four views open as you go. The Check my work button runs seven checks, one for each kind of barrier plus a final one that the Checks view is clear of serious and moderate problems.
Where should you start on a page with many problems?
Start with the **Checks** view, because it gives you a list in seconds. It finds the problems a machine can measure: a missing attribute, a ratio below 4.5:1, a heading that skips a level. Each item names the lesson that covers it, so if you forget how a fix works you can go back and read it.
Then open the **Screen reader** view and read it from top to bottom before changing anything. This is the slower step and the more useful one. You hear the page the way a blind visitor meets it: no title to confirm where you are, the shop name read as plain text, image, DSC_0187.jpg in the middle of the content, image, wheat-divider.svg straight after, and a link announced as link, click here.
Fix the page from the top down. The lang attribute and <title> come first in the file and first in what a screen reader says, so they are a natural place to begin. Structure comes next, because headings and landmarks decide how people move around. Images, colour and links follow.
Why do lang and the title come first?
The lang attribute on <html> tells the screen reader which voice and pronunciation rules to use. Without it, the reader falls back on the user's default language. A French speaker reading this English page with a French voice hears “sourdough” mangled beyond recognition. That is success criterion 3.1.1 Language of Page.
The <title> is the first thing announced when the page loads, and it names the tab, the bookmark and the entry in the browser history. A screen reader user with eight tabs open moves between them by title. A page with no title is announced by its address, which for a bakery might be a long string of folders. That is 2.4.2 Page Titled.
Put the most specific part first so the title is useful when it is cut short in a narrow tab. For a home page, the shop name and what it offers works well.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Crumb and Crust: fresh bread in Riverside</title>How should the structure be fixed?
The content is wrapped in <div class="content">. A <div> has no role, so the Screen reader view shows no main landmark and a screen reader user has no shortcut past the header. Change it to <main> and keep the class so the CSS still applies. Check the closing tag too: it has to become </main>.
The headings tell a stranger story. The shop name is a <div> styled to look big, the first real heading is an <h2>, and the two sections under it are <h4>. In the Screen reader view that reads as level 2, then level 4, then level 4, with no level 1 and no level 3. People who press the heading shortcut hear a page that seems to be missing parts.
Make “Fresh bread every morning” the <h1>, since it says what the page is about, and turn both <h4> headings into <h2>. The shop name can stay a paragraph in the header: it is branding, and the banner landmark already marks it as site furniture. Changing heading levels changes their default size, so check the Page view afterwards and adjust the CSS if a heading looks wrong. Pick the level for meaning and the size with CSS.
<main class="content">
<h1>Fresh bread every morning</h1>
...
<h2>Opening hours</h2>
...
<h2>Birthday cakes</h2>
</main>What do the two images need?
The two images do different jobs, so they need different alt values. The photo of the loaves carries meaning: it shows the bread the paragraph is about. Describe it in a short sentence, the way you would to a friend on the phone, such as alt="Rows of round sourdough loaves cooling on a wooden rack". Leave out “image of”, because the screen reader already says “image”.
The wheat divider is decoration. It separates two blocks of text and says nothing a visitor needs. Give it an empty alt="". Empty is different from missing: an empty alt tells the browser to leave the image out of the accessibility tree, while a missing alt leaves the screen reader guessing, and it often reads the file name. After the fix, the divider vanishes from the Screen reader view entirely.
The check here looks for a described image and for no file names. It does not judge your wording, so read your alt text aloud and ask whether it would help someone who cannot see the photo.
How do you fix the pale note and the vague link?
The note “Loaves sell out by noon on Saturdays” uses #b0a597 on a cream background, which comes out near 2.3:1. Normal-sized text needs at least 4.5:1 under 1.4.3 Contrast (Minimum). Pale grey for secondary text is a common design habit, and it is the text people with low vision, older eyes or a phone in sunlight lose first. A warm dark grey like #6b5e50 keeps the soft look and clears the ratio easily. Change the colour and leave the font size alone.
The cake link reads “click here”. In a screen reader's list of links, it appears alone, and “click here” could go anywhere. Move the meaning into the link: <a href="/order">Order a birthday cake</a>. The sentence around it can lose the “To order one” phrase, since the link now says it. This meets 2.4.4 Link Purpose (In Context) and also helps voice control users, who say the words they see on a link to follow it.
Notice that the header already has a link called “Order a cake” pointing at the same page. Similar text for the same destination is fine and even helpful.
<p class="note">Loaves sell out by noon on Saturdays.</p>
/* CSS */
.note { color: #6b5e50; font-size: 15px; }
<p>Cakes need three days' notice. <a href="/order">Order a birthday cake</a>.</p>How do you know you have finished?
The last check needs the Checks view to show no serious or moderate problems. A clean Checks view is a floor. It tells you the measurable parts are right and says nothing about whether the words make sense.
Finish with a full read of the Screen reader view. You should hear the banner landmark, the shop name, a navigation landmark with three links, then the main landmark, heading level 1, Fresh bread every morning, your description of the loaves, the opening hours under a level 2 heading, and a cake link that says what it does. If any line would confuse you with your eyes closed, change it.
Then try the keyboard. Press Tab in the **Keyboard** view and watch focus move through the three menu links and the cake link. Nothing on this page needed keyboard fixes, which makes it a good baseline for the Keyboard lessons that follow.
What should you look for when an AI tool writes a page like this?
Ask an AI tool for a bakery home page and you will often get something very close to the starting code. Generated pages commonly skip lang, wrap everything in <div> elements, pick heading levels for their size, write “click here” or “learn more” links, and use pale grey for anything that seems secondary. Generated alt text tends to be either missing or a vague phrase like “bakery image”.
Run the same routine on generated code that you ran here: Checks first, then a top to bottom read of the Screen reader view, then a pass with the keyboard. It takes a couple of minutes on a page this size and catches most of what the tool got wrong. When you ask a tool for code, you can also ask it up front for lang, a <title>, landmarks, a heading outline with no gaps and 4.5:1 text contrast. It will usually follow the instruction, and you still check the result.
Field notes
- Start with Checks to get a quick list of problems.
- Set
langand a<title>first so the page reads correctly. - A meaningful photo needs a description, and decoration needs empty
alt. - A clean Checks view is a starting floor, so listen to the page too.
Easy to get wrong
Heading levels describe the outline, so a section directly under the page heading is level 2. If the <h2> looks too big, change its size in CSS and keep the level.
A decorative image with no alt gets its file name read aloud. An empty alt removes it from the accessibility tree so the screen reader skips it.
Small notes are often the text people most need, such as “sells out by noon”. Normal text needs 4.5:1 against its background, whatever its role in the design.
A checker can confirm that alt text exists. Only a person can tell whether it describes the right thing, or whether a heading matches its section.
Questions people ask
Does the shop name in the header need to be a heading?
Usually it doesn't. The shop name repeats on every page, and the <h1> is more useful when it says what this page is about. Keeping the name as a paragraph or a home link inside <header> is common and fine. Some sites make the home page <h1> the shop name; either works as long as there is one clear level 1.
Why is the cake link allowed to repeat the header link?
Both go to the same order page with similar words, which is consistent and predictable. The problem to avoid is the reverse: the same words, such as “Order”, leading to different places.
Can I use a darker colour only for the Saturday note and leave other pale text?
Fix every piece of text that falls below the ratio. On this page the note is the only one, which is why the Checks view clears after one change. On a real site, search the stylesheet for pale greys and check each one.
What if my alt text is different from the solution?
That is expected. The checks only confirm that the photo has a description of reasonable length and no file name. Write what the photo shows that is relevant to this page: fresh loaves from this bakery.