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