a11y

Accessible interfaces are not a separate thing from good interfaces. Almost every rule here also makes the interface better for someone with a mouse and perfect vision. Treat it as craft, not compliance.

HTML first

The element carries the behaviour. Use it:

Want	Use	Not
Something that does an action	`<button type="button">`	`<div onClick>`
Something that navigates	`<a href>`	`<button>` that calls `router.push`
A list	`<ul>`/`<ol>` with `<li>`	divs
A form	`<form>` with `<button type="submit">`	`onClick` on a button outside a form
A checkbox, radio, switch	`<input type="checkbox">`, `role="switch"` on a button	custom divs
A section with a heading	`<section aria-labelledby>`	a div with a bold paragraph
Emphasis	`<strong>`, `<em>`	`<b>`, `<i>` or a span with font-weight
A dialog	`<dialog>` or a primitive with `role="dialog"`	a fixed div