VoiceOver Practice: Forms

Return to the main article

Labeled Form

Choose a color:


Choose a car:


Unlabeled Form

The following form is similar to the previous form, but without labels, fieldsets, alt text, etc. When a form does not have a label, the screen reader will attempt to auto-label the form.

First Name:

Last Name:

Choose a color:

Blue
Green
Yellow

Choose a car:

Chrysler PT Cruiser
Dodge Stratus
Ford Pinto

Which is your favorite city?

Form Inside a Table

This form offers an example of how a screen reader will not correctly auto label form elements where:

  1. The text description is not adjacent to the label, and
  2. The <label> element is not used.
First Name
Email
Home Phone
Middle Initial
Computer type
Work Phone
Last Name
Mac PC
Country
Internet speed 28.8 56k T1

Quick Navigation

Screen reader users often encounter problems with JavaScript jump menus. This is because the menu is set to "jump" to a link as soon as it receives focus, making it difficult or impossible to navigate past the first item in the list.

Return to the main article