form: A Proposed Predefined role for the XHTML Role Module

Proposals

• PROPOSAL: Add a role value "form" to the vocabulary (Shane McCarron, 2009-04-29)
  • XHTML2 Issue 5 - addition of "form" to Role Module's list of predefined roles

Related Issues & Proposals

• ARIA 1.0 Last Call Comment: role="form" missing (closest construct: role="search") (Gregory J. Rosmaita, 2009-04-08)

Examples

Use of role="form" on a Hybrid Form

Background

The following is an example of the intended use of role="form", taken from Wikimedia's default "edit this page" template. Note that the Wikimedia form is a hybrid form -- while there are actual form controls, there are also form controls and javascripted input mechanisms that are NOT included in the form's tab order, and which do not appear in an assistive technology's list of form controls. This is problematic because the user reasonably expects the "Cancel" mechanism to be in the FORM's tabindex, but since the Wikimedia template closes the FORM immediately after the "Summary" text input field, despite the use of FORM controls outside of the FORM block, such controls need to be programmatically bound to the actual FORM controls through the use of the role="form".

Wikimedia Edit Page Hybrid Form with role="form" Added to Include FORM controls outside of the FORM declaration

 
  <div role="form">
  <form id="editform" name="editform" method="post" 
  action="/wiki/index.php?title=Fake&action=submit" 
  enctype="multipart/form-data">
  <input type='hidden' value="" name="wpSection" />
  <input type='hidden' value="20090518162219" name="wpStarttime" />
  <input type='hidden' value="20090518162219" name="wpEdittime" />
  <input type='hidden' value="" name="wpScrolltop" id="wpScrolltop" />

  <textarea tabindex='1' accesskey="," name="wpTextbox1" id="wpTextbox1" 
  rows='25'cols='80' ></textarea>

    <div id="editpage-copywarn">
    <p>Please note that all contributions to XHTML2 may be edited, altered, or 
    removed by other contributors. If you don't want your writing to be edited 
    mercilessly, then don't submit it here.<br />
    You are also promising us that you wrote this yourself, or copied it from a 
    public domain or similar free resource (see <a 
    href="/wiki/index.php?title=Fake:Copyrights&action=edit" class="new" 
    title="XHTML2:Copyrights">XHTML2:Copyrights</a> for details).
    <strong>DO NOT SUBMIT COPYRIGHTED WORK WITHOUT PERMISSION!</strong>
    </p>
    </div>

  <span id='wpSummaryLabel'><label for='wpSummary'>Summary:</label></span>
  <div class='editOptions'>
  <input tabindex='2' type='text' value="" name='wpSummary' id='wpSummary' 
  maxlength='200' size='60' /><br />
  <input name="wpMinoredit" type="checkbox" value="1" tabindex="3" 
  accesskey="i" id="wpMinoredit" /> <label for='wpMinoredit' 
  title="Mark this as a minor edit [i]" accesskey="i">This is a minor 
  edit</label>
  <input name="wpWatchthis" type="checkbox" value="1" tabindex="4" 
  accesskey="w" id="wpWatchthis" /> <label for='wpWatchthis' 
  title="Add this page to your watchlist [w]" accesskey="w">Watch 
  this page</label>

  <div class='editButtons'>
  <input id="wpSave" name="wpSave" type="submit" tabindex="5" 
  value="Save page" accesskey="s" title="Save your changes [s]" />
  <input id="wpPreview" name="wpPreview" type="submit" tabindex="6" 
  value="Show preview" accesskey="p" title="Preview your changes, please 
  use this before saving! [p]" />
  <input id="wpDiff" name="wpDiff" type="submit" tabindex="7" 
  value="Show changes" accesskey="v" title="Show which changes you made to 
  the text. [v]" />
  <span class='editHelp'><a href="/wiki/Fake" title="Fake">Cancel</a> | 
  <a target="helpwindow" href="/MarkUp/xhtml2/wiki/Help:Editing">Editing 
  help</a> (opens in new window)</span>
  </div>
  <!-- editButtons -->
  </div>

  <!-- editOptions -->
  <div class="mw-editTools"></div>
  <div class='templatesUsed'>
  </div>

  <input type='hidden' value="253f6a4e393d7f38931dbe2aa31bedf8+\" 
  name="wpEditToken" />
  <input name="wpAutoSummary" type="hidden" 
  value="d41d8cd98f00b204e9800998ecf8427e" />
  </form>

  <input name="wpMinoredit" type="checkbox" value="1" tabindex="3" accesskey="i" 
  id="wpMinoredit" /> <label for='wpMinoredit' title="Mark this as a minor 
  edit [i]" accesskey="i">This is a minor edit</label>
  <input name="wpWatchthis" type="checkbox" value="1" tabindex="4" accesskey="w" 
  id="wpWatchthis" /> <label for='wpWatchthis' title="Add this page to your 
  watchlist [w]" accesskey="w">Watch this page</label>

  <div class='editButtons'>
  <input id="wpSave" name="wpSave" type="submit" tabindex="5" value="Save page" 
  accesskey="s" title="Save your changes [s]" />
  <input id="wpPreview" name="wpPreview" type="submit" tabindex="6" value="Show 
  preview" accesskey="p" title="Preview your changes, please use this before 
  saving! [p]" />
  <input id="wpDiff" name="wpDiff" type="submit" tabindex="7" value="Show 
  changes" accesskey="v" title="Show which changes you made to the text. [v]" />
  <span class='editHelp'><a href="/wiki/Fake" title="Fake">Cancel</a> | 
  <a target="helpwindow" href="/wiki/Help:Editing">Editing help</a> (opens in 
  new window)</span>
  </div>

  <!-- the next /div closes the DIV marked with a role of 'form' -->
  </div>

• PFWG's Role Module Wiki Index