ShadowJSShadowJSv1.0.0
[]previous and next page

Common mistakes

Common mistakes in the Accessibility guide.

For agentsUpdated
  • aria-expanded and friends written as presence attributes. Pass the boolean; the runtime writes "true"/"false". Do not write aria-expanded={open() || undefined}, which removes the state when closed.
  • hidden={open() ? undefined : true} on a panel whose content you still want searchable. hidden removes it from the tree; use <Show> only when you want it gone from the DOM too.
  • Focus in a ref. The element is not in the document yet; use onMount.
  • Clickable divs and spans. Use a button or an a.
  • Icon-only buttons without a name. Add aria-label (or visually hidden text).
  • Show around a live region. Render the region always.
  • Ids from counters or Math.random(). Use useId.
  • Focus lost on route change or when the focused element is removed. Decide where focus goes.