Accessibility and Frontend Security

// A clickable div needs all of this to match a button
<div onClick={h} role="button" tabIndex={0}
     onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && h()}>

// A button just works
<button onClick={h}>Run</button>

// Elements that carry meaning for free
<nav> <main> <header> <footer> <aside>
<button> <a href> <label> <fieldset> <table>

// Labels — every input needs one
<label htmlFor="email">Email</label>
<input id="email" name="email" type="email" />
// An icon-only control needs an accessible name
<button aria-label="Close dialog"><X aria-hidden="true" /></button>

// Images: alt describes purpose; decorative images take alt=""
<img src={cover} alt="" />

// Headings are a document outline, not font sizes.
// One h1, no skipped levels — a screen-reader user navigates by them.

// Tab through your page. If you cannot complete a flow, it is broken.
// Never remove the focus ring — restyle it
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

// Modals need three things:
//   1. focus moves into the dialog on open
//   2. focus is trapped while it is open
//   3. focus returns to the trigger on close
//   plus Escape to close, and aria-modal="true"
// Radix, React Aria and Headless UI do all of this — use them.

// Announce async updates a sighted user sees but nobody hears
<div role="status" aria-live="polite">{message}</div>
<div role="alert">{error}</div>            // interrupts, for errors

// The first rule of ARIA is not to use ARIA:
<div role="button">      // needs tabIndex and key handling
<button>                 // already correct

// Wrong ARIA is worse than none — aria-hidden on a focusable
// element creates a control a screen reader cannot see but can land on.

// Check it: axe DevTools, Lighthouse, eslint-plugin-jsx-a11y.
// Automated tools find roughly a third; keyboard-test the rest.

// XSS — injecting untrusted content into the page
element.innerHTML = comment                       // vulnerable
<div dangerouslySetInnerHTML={{ __html: comment }} />   // vulnerable

element.textContent = comment                     // safe
<div>{comment}</div>                              // React escapes by default

// If you must render HTML, sanitise it
import DOMPurify from 'dompurify'
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }} />

// href is an injection point too
<a href={userUrl}>            // 'javascript:...' executes
// Validate the protocol is http/https before rendering.

// CSRF — an httpOnly cookie is sent automatically, including from
// another site's form. SameSite=Lax blocks most of it; state-changing
// requests should also carry a CSRF token.

// Headers, set once, that block whole classes of attack
Content-Security-Policy: default-src 'self'
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Strict-Transport-Security: max-age=63072000

// And the recurring one: never put a secret in client code.
// NEXT_PUBLIC_ anything is published.