with the skill
# Accessibility review: toolbar
I found 4 violations (plus one optional improvement), ordered by priority.
## 1. Div used as a button (keyboard access, critical)
```html
<div class="btn" onclick="saveDoc()">Save</div>
```
**Why it matters:** A `div` isn't focusable and doesn't respond to Enter/Space, so keyboard and screen reader users can't use it.
**Fix:** Use a native button. Keep the class so styling carries over.
```html
<button type="button" class="btn" onclick="saveDoc()">Save</button>
```
If the `.btn` styles assume a div, you may need to reset default button styles (border, background, font). Don't add `role`/`tabindex` hacks.
Show the rest (70 more lines)
## 2. Icon-only Delete button has no accessible name (critical)
```html
<button onclick="deleteDoc()"><svg viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2m-9 0v14h10V6"/></svg></button>
```
**Why it matters:** Screen readers announce this as just "button", so users can't tell it deletes the document.
**Fix:** Add an `aria-label` and hide the decorative SVG.
```html
<button type="button" onclick="deleteDoc()" aria-label="Delete document">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2m-9 0v14h10V6"/></svg>
</button>
```
## 3. Decorative icon in the Share button isn't hidden (names, minor)
```html
<button onclick="share()"><svg viewBox="0 0 24 24">...</svg> Share</button>
```
**Why it matters:** The button already has a name ("Share") from its text, but the unhidden SVG can add noise for some assistive tech.
**Fix:**
```html
<button type="button" onclick="share()">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12v8h16v-8M12 3v13M7 8l5-5 5 5"/></svg>
Share
</button>
```
## 4. Non-descriptive link text (names, critical)
```html
<a href="/help/editor">Click here</a> to learn about the editor.
```
**Why it matters:** Screen reader users often browse a list of links out of context, where "Click here" says nothing about the destination.
**Fix:** Put the descriptive words inside the link.
```html
Learn about the editor in the <a href="/help/editor">editor help guide</a>.
```
## Optional improvements
- **`type="button"`:** I added it to all buttons. It's not an a11y violation by itself, but it prevents accidental form submission if the toolbar is ever placed inside a `<form>`.
- **Focus visibility:** Your snippet has no CSS, so I can't verify this. Make sure `.btn`/`button` styles don't have `outline: none` without a visible `:focus-visible` replacement.
- **Toolbar semantics:** I'd leave `class="toolbar"` as is. Adding `role="toolbar"` would require arrow-key navigation (roving tabindex), which is more than this simple set of controls needs. A plain group of buttons is fine.
## Corrected snippet
```html
<div class="toolbar">
<button type="button" class="btn" onclick="saveDoc()">Save</button>
<button type="button" onclick="deleteDoc()" aria-label="Delete document">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2m-9 0v14h10V6"/></svg>
</button>
<button type="button" onclick="share()">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12v8h16v-8M12 3v13M7 8l5-5 5 5"/></svg>
Share
</button>
Learn about the editor in the <a href="/help/editor">editor help guide</a>.
</div>
```
One more consideration: `deleteDoc()` is destructive. If it doesn't already confirm with the user, consider a confirmation dialog. If you add one, follow the dialog rules: trap focus, close on Escape, and restore focus to the Delete button.