Warning:
This wiki has been archived and is now read-only.
Role/form
From XHTML2
< Role
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)
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>