Web Accessibility - For Web Developers - Forms, Frames and Advanced Topics

Information for web developerss on how to make your website or web application accessibile if it contains forms, frames, or more advanced features.

This document covers Advanced Forms, Advanced Frames and other Advanced Topics.

It is a supplement to “Web Accessibility for Web Developers,” which covers Advanced Organization, Advanced Text and Images, and Advanced Audiovisual.

CMS users have a parallel document titled "Web Accessibility for Users of Content Management Systems - Form and Frames Supplement" that omits recommendations for features that are usually not controllable by a CMS user, and avoids reference to HTML elements not usually visible to someone using a GUI editor.


Advanced Forms

The CMS user forms supplement offers the same guidance, except as noted.
  • 1.1.1 Non-text Content (for forms)

    • All form image buttons have appropriate, equivalent alternative text.

    • Form buttons have a descriptive value.

    • Form inputs have associated text labels.

  • 1.3.1 Info and Relationships (for forms)

    • Text labels are associated with form input elements. Related form elements are grouped with fieldset/legend.

      • For CMS user forms supplement: similar, (except that fieldset/legend are marked as advanced.)

  • 1.3.2 Meaningful Sequence

    • The reading and navigation order (determined by code order) is logical and intuitive.

      • For CMS user forms supplement: "The tab order through a form is logical and intuitive."

  • 1.3.3 Sensory Characteristics

    • Instructions do not rely upon shape, size, or visual location (e.g., "Click the square icon to continue" or "Instructions are in the right-hand column").

    • Instructions do not rely upon sound (e.g., "A beeping sound indicates you may continue.")

  • 2.4.3 Focus Order (for forms)

    • The navigation order of form elements is logical and intuitive.

      • For CMS user forms supplement: "The tab order through a form is logical and intuitive."

  • 2.4.4 Link Purpose (In Context) (for forms)

    • The purpose of each form image button can be determined from the link text alone, or from the link text and its context.

    • Form image buttons with the same text that go to different locations are readily distinguishable.

  • 2.4.6 Headings and Labels (for forms)

    • Labels for form controls are informative. Avoid duplicating label text (e.g., "First Name") unless the structure provides adequate differentiation between them.

  • 2.4.7 Focus Visible

    • It is visually apparent which page element has the current keyboard focus (i.e., as you tab through the form, you can see where you are).

  • 3.2.1 On Focus

    • When a page element receives focus, it does not result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user.

  • 3.2.2 On Input

    • When a user inputs information or interacts with a control, it does not result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user unless the user is informed of the change ahead of time.

  • 3.3.1 Error Identification

    • Required form elements or form elements that require a specific format, value, or length provide this information within the element's label.

    • If utilized, form validation errors are presented in an efficient, intuitive, and accessible manner. The error is clearly identified, quick access to the problematic element is provided, and user is allowed to easily fix the error and resubmit the form.

  • 3.3.2 Labels or Instructions

    • Sufficient labels, cues, and instructions for required interactive elements are provided via instructions, examples, properly positioned form labels, and/or fieldsets/legends.

      • For CMS user forms supplement: similar, (except that fieldsets/legends are marked as advanced.)

  • 3.3.3 Error Suggestion

    • If an input error is detected (via client-side or server-side validation), provide suggestions for fixing the input in a timely and accessible manner.

  • 3.3.4 Error Prevention (Legal, Financial, Data)

    • If the user can change or delete legal, financial, or test data, the changes/deletions can be reversed, verified, or confirmed.

      • For CMS user forms supplement this is omitted.

  • 4.1.2 Name, Role, Value (for forms)

    • Markup is used in a way that facilitates accessibility. This includes using forms and form labels, appropriately.

      • For CMS user forms supplement this is omitted.

Optional for Advanced Forms

Advanced Frames

The CMS user frames supplement offers the same guidance, except as noted.
  • 1.1.1 Non-text Content (for frames)

    • Frames are appropriately titled.

  • 1.3.2 Meaningful Sequence (in and among frames)

    • The reading and navigation order (determined by code order) is logical and intuitive.

      • For CMS user frames supplement: "The reading and navigation order (between frames and within a frame) is logical and intuitive."

  • 2.4.1 Bypass Blocks (that are repeated across web pages)

    • If a page uses frames and the frames are appropriately titled, this is a sufficient technique for bypassing individual frames.

  • 2.4.3 Focus Order (in and among frames)

    • The navigation order is logical and intuitive.

      • For CMS user frames supplement: "The reading and navigation order (between frames and within a frame) is logical and intuitive."

  • 2.4.7 Focus Visible (while tabbing in and among frames)

    • It is visually apparent which page element has the current keyboard focus (i.e., as you tab through the page, you can see where you are).

  • 3.2.1 On Focus

    • When a page element receives focus, it does not result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user.

  • 3.2.3 Consistent Navigation (across multiple web pages)

    • Navigation links that are repeated on web pages do not change order when navigating through the site.

  • 3.2.4 Consistent Identification (across multiple web pages)

    • Elements that have the same functionality across multiple web pages are consistently identified. For example, a search box at the top of the site should always be labeled the same way.

  • 4.1.2 Name, Role, Value (for frames)

    • Markup is used in a way that facilitates accessibility. This includes using frame titles.

      • For CMS user frames supplement this is omitted.

Optional for Advanced Frames (none applicable)

Advanced Topics

The following recommendations are for advanced topics that may need to be considered when creating an application. Most applications will also involve elements of Advanced Organization, Advanced Text and Images, and Advanced Audiovisual, all of which are covered in “Web Accessibility for Web Developers.” If the application includes forms or frames, see Advanced Forms and Advanced Frames above.

  • 2.1.1 Keyboard

    • All page functionality is available using the keyboard, unless the functionality cannot be accomplished in any known way using a keyboard (e.g., free hand drawing).

    • Page-specified shortcut keys and accesskeys (accesskey should typically be avoided) do not conflict with existing browser and screen reader shortcuts.

  • 2.1.2 No Keyboard Trap

    • Keyboard focus is never locked or trapped at one particular page element. The user can navigate to and from all navigable page elements using only a keyboard.

  • 2.2.1 Timing Adjustable

    • If a page or application has a time limit, the user is given options to turn off, adjust, or extend that time limit. This is not a requirement for real-time events (e.g., an auction), where the time limit is absolutely required, or if the time limit is longer than 20 hours.

  • 2.2.2 Pause, Stop, Hide

    • Automatically moving, blinking, or scrolling content that lasts longer than 5 seconds can be paused, stopped, or hidden by the user. Moving, blinking, or scrolling can be used to draw attention to or highlight content as long as it lasts less than 5 seconds.

    • Automatically updating content (e.g., automatically redirecting or refreshing a page, a news ticker, AJAX updated field, a notification alert, etc.) can be paused, stopped, or hidden by the user or the user can manually control the timing of the updates.

  • 3.2.1 On Focus

    • When a page element receives focus, it does not result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user.

  • 3.2.2 On Input

    • When a user inputs information or interacts with a control, it does not result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user unless the user is informed of the change ahead of time.

  • 3.3.2 Labels or Instructions

    • Sufficient labels, cues, and instructions for required interactive elements are provided via instructions, examples, properly positioned form labels, and/or fieldsets/legends.

  • 3.3.3 Error Suggestion

    • If an input error is detected (via client-side or server-side validation), provide suggestions for fixing the input in a timely and accessible manner.

  • 3.3.4 Error Prevention (Legal, Financial, Data)

    • If the user can change or delete legal, financial, or test data, the changes/deletions can be reversed, verified, or confirmed.

  • 4.1.1 Parsing

  • 4.1.2 Name, Role, Value (follow HTML/XHTML specifications)*

    • Markup is used in a way that facilitates accessibility. This includes following the HTML/XHTML specifications.

Optional for Advanced Topics

Optional

Optional for Advanced Forms

The CMS user forms supplement offers the same guidance, except as noted.
  • 2.4.9 Link Purpose (Link Only) (for forms)*

    • The purpose of each form image button can be determined from the link text alone.

    • There are no links (or form image buttons) with the same text that go to different locations.

  • 3.2.5 Change on Request

    • Substantial changes to the page, the spawning of pop-up windows, uncontrolled changes of keyboard focus, or any other change that could confuse or disorient the user must be initiated by the user. Alternatively, the user is provided an option to disable such changes.

      • For CMS user forms supplement this is omitted.

  • 3.3.5 Help

    • Provide instructions and cues in context to help in form completion and submission.

  • 3.3.6 Error Prevention (All)

    • If the user can submit information, the submission is reversible, verified, or confirmed.

Back to Advanced Forms

Optional for Advanced Frames

None Applicable.

Back to Advanced Frames

Optional for Advanced Topics

  • 2.1.3 Keyboard (No Exception)

    • All page functionality is available using the keyboard.

  • 2.2.3 No Timing

    • The content and functionality has no time limits or constraints.

  • 2.2.4 Interruptions

    • Interruptions (alerts, page updates, etc.) can be postponed or suppressed by the user.

  • 2.2.5 Re-authenticating

    • If an authentication session expires, the user can re-authenticate and continue the activity without losing any data from the current page.

  • 3.2.5 Change on Request

    • Substantial changes to the page, the spawning of pop-up windows, uncontrolled changes of keyboard focus, or any other change that could confuse or disorient the user must be initiated by the user. Alternatively, the user is provided an option to disable such changes.

Back to Advanced Topics



Keywords:web, accessibility, accessibility standards, Section 508, WCAG 2.0, forms, frames, web applications, supplement, for web developers   Doc ID:50814
Owner:Sandi A.Group:Accessibility
Created:2015-04-23 15:31 CDTUpdated:2015-06-30 13:20 CDT
Sites:Accessibility, DoIT Help Desk
Feedback:  0   0