Find the toolbar in index.html — empty buttons with no text. Add labels:
<nav id="toolbar" class="toolbar">
<button id="upload-btn" class="tool-btn" title="Upload image (Ctrl+U)">Upload</button>
<button id="grayscale-btn" class="tool-btn" title="Apply grayscale">Grayscale</button>
<button id="brightness-btn" class="tool-btn" title="Adjust brightness">Brightness</button>
<button id="contrast-btn" class="tool-btn" title="Adjust contrast">Contrast</button>
<button id="invert-btn" class="tool-btn" title="Invert colors">Invert</button>
<button id="crop-btn" class="tool-btn" title="Crop image">Crop</button>
<button id="undo-btn" class="tool-btn" title="Undo (Ctrl+Z)">Undo</button>
<button id="redo-btn" class="tool-btn" title="Redo (Ctrl+Y)">Redo</button>
<button id="export-btn" class="tool-btn" title="Export image">Export</button>
</nav>
<aside id="settings-panel" class="settings-panel">
<h2>Adjustments</h2>
<div class="filter-group">
<label for="brightness">Brightness</label>
<input type="range" id="brightness" min="-100" max="100" value="0">
<span id="brightness-value">0</span>
</div>
<!-- ... more filter groups for Contrast, Saturation, etc. ... -->
</aside>
The for="brightness" on the label links to the input's id="brightness". Click the label → the slider gets focus.
<main id="canvas-area" class="canvas-area">
<canvas id="canvas" width="800" height="600"></canvas>
</main>
<main> tells the browser and screen readers: "this is the primary content." There should be only one <main> per page.
Check DevTools Elements tab — is the structure clean? Does the nesting make sense?
Test semantics: Use the Tab key to navigate through the page. Every <button> and <input> should receive focus with a visible outline. Press Enter or Space on a focused button — it should "click."
git switch -c feature/PIXELCRAFT-002-toolbar-labels
git add src/index.html
git commit -m "Add toolbar labels and settings structure (PIXELCRAFT-002)"
git push origin feature/PIXELCRAFT-002-toolbar-labels
# PR → Review → Merge → Close ticket ✅
Semantics = meaning attached to structure.
A <button> tells the browser: "this is interactive — make it focusable, make it clickable with keyboard (Enter/Space)." A <div> with an onclick tells nothing — screen readers skip it, keyboards can't reach it.