From W3C Wiki
< PF‎ | ARIA‎ | BestPractices

Tokenizing text box

This is part of the ARIA Best Practices document. There may be discussion about this page; please use the discussion page to address issues and add only content to this page. Editorial guidelines:

Text box (for reference)

Many browsers support editable document text areas outside of standard form controls through the use of the contenteditable property. Setting this property to true results in the creation of an editable textbox area in the document. To convey the proper semantics for assistive technology, a role of textbox must be supplied.

<div contenteditable="true" role="wairole:textbox" aaa:readonly="false">
  type away

Tokenizing Text Box

The attached page (filename: tokenizer.xhtml) is an example for the tokenization of the content of a "To:" address field behaving similarly to popular desktop mail programs. This example is in XHTML and requires Firefox at present. To get an idea of it but without the interaction, view the companion file (filename: tokenizer.gif).

Each of the items is a separate object with role/state assigned. Element useage is described in two hidden labels associated with describedBy.

By pressing Tab, the user enters the text box and navigates the items.

Currently, the Firefox example does not allow for direct input (no contentEditable property for spans like in Internet Explorer, therefore static example).

Questions / Open Issues

  • WAI role/state assignments appropriate? Is Input Tokenizer a list with

(editable) listitems?

  • Do we have to use two labels for different sets of additional info or

can we concatenate it into one?

  • how document hotkey?
  • demonstrates activedescendant?
  • demonstrates menu for multiple actions on one object?
  • demonstrates hotkey usage?


  • Navigate Items via Left/right Arrow
  • Validate with Enter
  • validates to application-specific parse on request (not on type-in)
  • structured content reveals where invalid text is
  • validate request available by button
  • validate request available by hot-key
  • contentEditable property in FF 3 (?)