This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

ButtonWidget/Example/Accessibility

24th July 2026 at 11:58pm

A button can carry accessibility and metadata attributes that pass straight through to the HTML element. They have no visible effect, so this example shows the markup rather than a result:

  • aria-label gives an accessible name when the label is only an icon
  • role overrides the implied ARIA role
  • tabindex sets the keyboard focus order
  • data-* attaches custom data attributes for scripts
  • selectedAria chooses which ARIA state selectedClass toggles

Inspect the button in your browser to see the attributes on the element.

titleOutput

<button aria-label="Close" class="" data-action="close" role="button" tabindex="0"> × </button>