2.3.3 Examples

Example #1 - Form Error Reporting

Try submitting the following HTML form to see one way of reporting and dealing with data-entry errors or omissions. This example uses a combination of server-side and client-side scripting techniques for error verification. As long as you are connected to the Web, this form will verify that you have entered information in each required field. With Javascript support enabled, this form will also check whether the email address contains illegal characters. If Javascript support is turned off or unavailable, only the existence of an e-mail address will be checked. NOTE that information you type in this form is not actually posted anywhere... it is for show, only.

An asterisk "*" before a field label means the information is required.

Contact Information

e.g. Toronto
e.g. abc@abcdef.com or abc.def@abcdef.org

If you submit the form leaving a required field blank, or typed an e-mail address with an illegal character (such as a comma, a space, or two periods in a row) the form will:

  1. create an error-reporting box containing a brief description of the problem(s) with a linked to the field where the error occurs;
  2. beside any field with an problem, display another message explaining the error or providing and example of correct content.

If all your entries pass the verification tests, the form lets you know that your submission was successful.

Example #2 - Form Error Reporting Clarification

In Example 1, the error check can catch an illegal e-mail address, but would not specify what was wrong. A developer could program the error routine to report that: "Abc@server,com cannot contain a comma. A period is required in a valid e-mail address"

Also, the more data verification you can do with server-side scripting the better (for accessibility). It is important to note that advances in client-side scripting and assistive-technology's handling of it is improving.

Example #3 - Language and Language Change Example

Here is a simplified HTML example...

<html lang="en"> <!-- the overall language of your content is English ("en") -->
<p>This paragraph is English but the next is French</p>
<p lang="fr">Ce paragraphe est en francais</p> <!-- note the lang attribute! -->
<p>This paragraph is mostly English, except for the phrase <span lang="fr">C'est la vie</span></p>

Visit the following links to access more specific information on coding techniques related to the creation of understandable Web content including the language declaration, context-appropriate information and unambiguous labelling: