Section 508 Review

Section 508 (n)

Forms that are completed online, need to have directions and cues for people using assitive technology to complete them

Similar Standards

• W3C Web Content Accessibility Guidelines 2.0
  
  • 2.4.6 Labels Descriptive: Labels and headings are descriptive.
  • 3.3.1 Error Identification: If an input error is detected, the item that is in error is identified and the error is described to the user in text.
  • 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input.
  • 3.3.3 Error Suggestion: If an input error is 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.
  • 3.3.4 Error Prevention (Forms including Legal, Financial, Data)
  • 3.3.5 Help: Context-sensitive help is available.
  • 3.3.6 Error Prevention (All forms)
    
    
• W3C Web Content Accessibility Guidelines 1.0
  
  • 10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.
  • 12.4 Associate labels explicitly with their controls.

Best Practices for Labelling

The label "for" identifier and the input "id" identifier need to be unique. Beyond that maintaining semantic value for the label content will aid and benefit the next programer.In doing so, the pairing of the label to its identifier is accomplished and it adheres to the common practices used on the world wide web.

Example:

Consider the simple web form below

Original/Actual Application:

We are using the same example we used for Section 508(a)

Example:

Consider the simple web form below: (The Alt text is read by the screen reader)

Perceived Application:

The Image buttons in the form have alt. text but contain no meaning.

Now is it possible to pick any of the choices? Also, after we run the WAVE toolbar, we will find the labels are missing. This will make it difficult for persons with assistive technology to differentiate between the choices provided.

Example:

Consider the simple web form below

Improved Application:

Now if run the WAVE toolbar again, we will find the labels are assigned properly. This will make it easier for persons with assistive technology to differentiate between the choices provided. Also, the alt text for the submit buttons has a logical value that will make it easier to submit the form

- Section 508(n) errors while 'WAVING' your page

Wave errors related to Section 508 n

Icon	Title	Description	Recommended Actions
	ERROR: Form label missing	A form <input>, <select>, or <textarea> does not have a corresponding label. (Note: Labels are not required for image, submit, reset, button, or hidden form element types.)	Properly associate a form label with the input element.
	ERROR: Empty form label	A form label is present, but it does not contain any content.	Supply appropriate text within the <label> element that describes the function of the associated form element.
	ERROR: Multiple form labels	A form element has two labels associated with it.	Each form element can have at most one <label> associated with it.
	ERROR: Orphaned form label	A form label is present, but it is not associated with any form <input>, <select>, or <textarea>.	Properly associate the label with its corresponding <input>, <select>, or <textarea> or remove the <label>.