Skip to navigation content (Press Enter).

Understandable and Robust Guidelines

Lesson 12 of Section 3

Consistent Navigation

Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.

This is another simple rule that states that you must make all navigational mechanisms the same within every web page. McMaster's website uses the same consistent navigation so you will have most likely achieved this section already.

Consistent Identification

Components that have the same functionality within a set of Web pages are identified consistently.

This is the last section in the guideline that also follows the practice of consistency. You are simply required to make consistent components that occur between pages have the same text alternatives and functions. For example, if you use a button that says "Search" on one page but then says "Find" on another, you are violating this section.


Input Assistance

Help users avoid and correct mistakes.

If your webpage doesn't have forms or any other sort of interactive function this guideline doesn't apply to you. The following sections help the end-user to create error free input when attempting to fill out information on your web page:

Labels or Instructions

Labels or instructions are provided when content requires user input.

There are several techniques you should employ when creating a form to make it WCAG accessible:


  • Provide descriptive labels. This has been discussed earlier in the WCAG guide where you describe the purpose of each form element using a <label> tag.
  • Providing text instructions at the beginning of a form or set of fields that describes the necessary input. For example, at the beginning of the form you should specify to the user how dates should be entered ("Dates should be entered in mm/dd/yyyy format.")
  • You can also place a specific format instruction in a particular field's label. For example:
    <label for="date">Date (mm/dd/yyyy)</label>
    <input type="text" name="date" id="date" />
  • Place checkboxes and radio buttons before their labels, not after. Another obvious point is to place the labels for text input before the text input and not after.
  • Indicating a required field with text in the label. Simply adding the phrase "(required)" in the label for your field will be adequate.
  • Indicating an uncompleted field that was required after submission. For example, if someone's name was required and they didn't complete it, you can modify the label to say "(not completed)" in addition to its name. This isn't necessary but it helps.
  • Finally, like mentioned before in this guide, you can use the title attribute to name the purpose of a field when using a label isn't possible.
    <input type="text" name="date" id="date" title="Date (required)" />

Error Identification and Suggestion

If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.

If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.

The best way to achieve this is to provide a Javascript alert window that notifies the user of bad input. This is effective because some users of assisted technology might be confused that the same page was reloaded again. However, this is not required.

The normal practice is to use server-side technology (such as PHP, CFML, etc.) to check for bad user input and then reload the form page with the previous content entered using proper labeling of the bad user input. Make sure you use proper <label> tags when describing the bad user input, and that you are offering suggestions on how to enter the correct input that your script needs.

One last suggestion (not required) is to add a few words to the <title> tag of the page, such as "Form Submission Invalid," since it will relay the title of the page to an impaired user first.

Error Prevention

For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, actions are reversible, checked, and/or confirmed.

This section can be easily satisfied by making a "Confirmation Page" the last step in the process you are creating. This confirmation page will display all of the critical data that the user has entered before placing a verified submission button at the end, saying something along the lines of "I have checked the information above and agree that it is correct."


This confirmation page also applies to actions where users are deleting information or doing other irreversible actions. When in doubt, implement a confirmation page!

Parsing

In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.

You automatically pass this section if your web page is XHTML Compliant. If you don't know how to write an XHTML Compliant page, there are several tutorials available on the web. The basics to proper XHTML conformance is:


  • Proper tag nesting.
  • Closing tags properly/self close your tags.
  • Elements and attributes must always be lower case.
  • Attributes must always have a value.

Once you've coded your page, you can validate your work by using the XHTML Validator. You are also allowed to design your page in HTML5 as long as it also passes the validator!

Test your knowledge!

Take the test or continue to the next section.

Sources

Service Bulletins

  • MAC ID Password Expiry

    Beginning in May 2016, MAC ID passwords at McMaster expire annually. Learn more at www.mcmaster.ca/uts/macid

Service Desk

Client Self Service:
https://servicedesk.mcmaster.ca
Hours: Monday - Friday
8:30 am - 4:30 pm
Phone: 905-525-9140 x24357 (2HELP)
Email: uts@mcmaster.ca
Location: Main Campus BSB Rm. 245
Service Catalogue:
http://www.mcmaster.ca/uts

Great Idea Site

Great Idea