A Page You Can Skim

Many visitors don't read a page from top to bottom. A screen reader user jumps from heading to heading, or from landmark to landmark (header, nav, main, footer), and a keyboard user presses Tab from link to link. A page you can skim gives them a clear outline.

The rules: one h1 that says what the page is; heading levels that go down one at a time (an h3 needs an h2 above it); a name on the nav with aria-label; a skip link as the first thing Tab reaches, jumping past the menu to main; and an alt on every picture: words that say what it shows, or alt="" when it is only decoration, so a screen reader skips it.

Many sites hide the skip link with CSS until Tab gives it the focus. This page has no CSS, so on Your page the link simply sits above the menu.

A help page could start like this:

<nav aria-label="Help topics">…</nav>
<h1>Help</h1>
<h2>Delivery</h2>
<img src="/van.jpg" alt="Our green delivery van outside the shop" />
<img src="/dots.svg" alt="" />

The check presses Tab, then Enter, and lists the page's outline. It must print:

> press Tab
  screen:
    header
      link: Skip to content -> #content (focused)
      nav "Main"
        …
> press Enter
> the address bar
  /#content
> the page's outline, as a screen reader lists it
  h1 headings: 1
  skipped heading levels: none
  landmarks: header, nav "Main", main, footer
  pictures:
    /shop.jpg: "Our shop window with mugs, lamps and plants on wooden shelves"
    /wave.svg: skipped (alt="" says it is decoration)

Your task: in src/App.jsx, add a Skip to content link to #content first in the header, name the nav Main, add the h1 Corner Shop and an h2 Products above the list, give the wave an empty alt, and give the shop photo an alt that says what it shows.

Assignment
Follow the Coding Tutorial to give the shop page a skip link, a named nav, headings with no skipped levels, and the right alt on both pictures.

Hint
The skip link's href is #content, the id of main. The cards already use h3 (see ProductCard.jsx), so the page needs an h1 and an h2 above them.