Fieldset, Legond, Optgroup and Accesskeys: *3

HTML 4.0 introduced a number of new features to make FORMS more accessible. When you look at a page, the relationship between form fields may be clear, but if you are seeing the page as interpreted by a text reader, for example, the proximity that holds sections of the form together may be skewed, especially since tables are often used to align form elements.

FIELDSET

The FIELDSET tag allows the content developer to define the relationship between a set of input fields. This will enable user agents to group the content together for more logical delivery. To specify a FIELDSET, simply wrap the related fields in the FIELDSET container:

<FORM>
<FIELDSET>
First name:
<INPUT type="text" NAME="firstname">
MI:
<INPUT TYPE="text" NAME="middle_initial">
Last name:
<INPUT type="text" NAME="lastname">
</FIELDSET>
</FORM>

LABEL

The FIELDSET tag should be coupled with the LABEL tag, which links descriptive text that often precedes or accompanies a field with the field itself. Using the previous example, the text <I>'First Name, </I>" <I>MI, </I> and <I>Last name</I> should be labeled as follows:

<FORM>
<FIELDSET>
<LEGEND>Contact information</LEGEND>
<LABEL for="firstname">First name:</LABEL>
<INPUT type="text" NAME="firstname">
<LABEL for="middle_initial">MI:</LABEL>
<INPUT TYPE="text" NAME="middle_initial">
<LABEL for="lastname ">Last name:</LABEL>
<INPUT type="text" NAME="lastname">
</FIELDSET>
</FORM>
Index

LEGEND

In addition, LEGEND should precede the group of information and offer a brief description of the relationship between the fields or of the purpose of the fields. The previous example used Contact Information as its LEGEND description.

Index

OPTGROUP

Finally, the OPTGROUP container allows you to group together clusters of related information within a long SELECT menu. Take the following chart of fruit as an example:

<FORM>
<SELECT name="fruit">
<OPTGROUP label="Apples">
<OPTION value="apples_gs">Apples--Granny Smith
<OPTION value="apples_gd">Apples--Golden Delicious
<OPTION value="apples_mac">Apples--Macintosh
</OPTGROUP>
<OPTGROUP label="oranges">
<OPTION value="grapes_white">Grapes--White
<OPTION value="grapes_red">Grapes--Red
</OPTGROUP>
</SELECT>

By using the OPTGROUP container, you can break up the longer list into more manageable sub-lists.

Index

AccessKey

To assign a keyboard shortcut that simulates pressing a button or clicking a link, you use the ACCESSKEY attribute. An ACCESSKEY can be set in HTML 4.0 for any of the following elements: A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA.

The method for using the key varies by platform. For example, on a PC you use the ALT key and the ACCESSKEY code.

This starting anchor tag shows an ACCESSKEY being assigned to allow users to follow this link:

<A ACCESSKEY="B" href="http://www.builder.com" title="Builder.com home page">

This example shows ACCESSKEYs being assigned to Submit and/or Clear this form

<FORM>
<INPUT TYPE="TEXT" NAME="text3" TABINDEX="4"><BR>
<INPUT TYPE="TEXT" NAME="text4" TABINDEX="3"><BR>
<INPUT TYPE="TEXT" NAME="text5" TABINDEX="2"><BR>
<INPUT TYPE="TEXT" NAME="text6" TABINDEX="1"><BR>
<I>To send this form, press Alt+S. To clear it, press
Alt+C.</I>
<P>
<INPUT TYPE="SUBMIT" ACCESSKEY="S">
<INPUT TYPE="CLEAR" ACCESSKEY="C">
</FORM>

f you copy this code and take a look in a browser that supports the ACCESSKEY (IE version 4.0 or later), you'll see that pressing Alt-C clears the form and pressing ALT–S submit it. (Note: There is no action set for this form, but you'll see the data be concatenated in the URL as a result of "pressing" the submit button.)

Index

Tabindex

The TABINDEX sets the order for tabbing through a set of links or navigating the fields of a form without relying upon the mouse. Using the TABINDEX for links lets users skip

from link to link or even skim over a repetitive opening section of a page. (end* 3)

Index

SVG and XML:

The newest solutions are Scalable Vector Graphics (SVG) and Extensible Markup Language (XML).

Have you ever wanted to embed an application into a page? Wanted to write one page that works on PC's and hand held devices? Want to make up your own tag? XML may be the way. It is a metalanguage, helping you to define other languages. You can design your own ways of describing information, for storage, transmission, or for processing by a program. Development of the language is ongoing, and tools for writing it are still being created.

DTD: Even though we use the acronym DTD, we don't want people to assume we are only talking about a DTD as defined in XML 1.0 but rather some document or collection of documents which contains all the references for interpreting a document which is encoded in accordance with the usage of some application or community of discourse. Schema or profile might be a better word for our usage. An XML DTD is accessible if it enables and promotes the creation of accessible documents. *4

VoiceXML is an XML-based markup language in development by AT&T, IBM, Lucent and Motorola, VoiceXML would require a separate page to be composed for the phone to speak the important information contained on the viewable page.

SVG are resizable by the viewer, and can be animated. They also include the alternative information to make them accessible to the blind user. Vector images are coded using XML, because they are vector graphics the file size is small so the images load very fast. As text images they are inherently accessible and indexable by search engines.

Using Adobe or other available imaging tools you can create the graphic and the tools will create the code. Currently you will need to install an Adobe plug-in to view the images, they intend to include the plug-in future issues of Acrobat Reader but for now go to the Adobe site and download it.

Index

Tools are available at

Adobe SVG plug–in–Download Form ACCESS Adobe Adobe PDF Conversion | W3C Scalable Vector Graphics (SVG) | SVG Toolkit - CSIRO Mathematical & Information Sciences | CSIRO SVG Toolkit | Scalable Vector Graphics (SVG) viewer.

Accessibility Tools CAST's Bobby: Web Accessibility Tester | Web Design Group CSSCheck | Home Page Reader | Shoutmail | Evoice | Teleserf

To find out more about making web pages accessible the best place to look is the W3c, they provide a listserv - 'w3c-wai-ig@w3.org', the archives for that list are found at WAI emali list Archives To join, the desired command should be sent in the Subject of a mail message to 'w3c-wai-ig-request@w3.org'.

subscribe – Subscribe to the list.

If you want to subscribe under a different address, use a Reply–To: address header in the message.

unsubscribe – Unsubscribe from the list.

help – Get information about the mailing list.

archive help – Get information about the list archive(s).*1

Index

References:

*1 W3c/ The World Wide Web Consortiom.

*2 Date: From: Scott Luebking To: w3c-wai-ig@w3.org Sun, 12 Nov 2000 21:45:01 -0800

*3 7/20/99, Accessible Web Site, Amy Cowen, web accessibility Builder.com

*4 XML Accessibility Guidelines, http://www.w3.org/WAI/PF/xmlgl.htm

More Information

Accessibility Guidelines for Santa Rosa Junior College Proposal by Terry Hammon, Kristen Nicolaisen and Stephanie Figueroa, May 2000 http://www.santarosa.edu/access/

The Potential of Open Source for the Visually Impaired SVG Brings Fast Vector Graphics to Web – http://tech.irt.org/articles/js176/ | W3c Scalable Vector Graphics (SVG) 1.0 Specification | The Emperor has New Clothes : HTML Recast as an XML Application - http://tech.irt.org/articles/js192/index.htm

Tiresias - International Information on Visual Disability This web site is an information resource for professionals who work in the field of visual disabilities. The site has evolved from work carried out by Dr Janet Silver of Moorfields Eye Hospital, London and Dr John Gill of the Royal National Institute for the Blind.

The First Global TV Network for people with diabilities powered by the Web | Organizations and Publications 4Assistive Technology | ACCESSIBILITY LINKS (90 links) | Web Browsers and Assistive Technology from The Adaptive Technology Resource Centre ATRC.

RehabTool.com offers a variety of high-tech assistive and adaptive technology products, augmentative and alternative communication devices, computer access equipment, multilingual speech synthesis and voice recognition software..

Layout with Cascading Style Sheets | Alt text in IMGs | U.S. Access Board - A Federal Agency Committed to Accesssible Design for People with Disabilities | Guidelines for the Design of Screen and Web Phones to be Accessible by Visually Disabled Persons | Electronic and Information Technology Accessibility Standards | WebABLE

AWARE Center Accessible Web Authoring Resources and Education, (HTML Writers Guild.) Our mission is to serve as a central resource for web authors for learning about web accessibility.

U.S. Department of Justice Americans with Disabilities Act ADA HOME PAGE

Index