What Makes a Form Accessible

Accessible forms allow all users — including those using screen readers, keyboard navigation, or voice control — to understand, complete, and submit the form. Key requirements are:

• Each field has a visible and machine-readable label
• Instructions are clear and present before the form
• Error messages are descriptive and tell users how to fix the problem
• The form is keyboard navigable (tab order follows visual order)
• Color contrast meets 4.5:1 for all text
• Required fields are clearly marked (not by color alone)

Note: This guide covers general principles. For tool-specific guidance on Microsoft Forms, Formstack, Qualtrics, or Drupal forms, contact Web Services.

Form Tools at SRJC

SRJC uses several form tools. The general principles below apply to all of them. For tool-specific guidance, check the tool's documentation or contact Web Services.

Step-by-Step: Creating Accessible Forms

Step 1: Label Every Field

Every form field needs a visible text label that is programmatically associated with the field. This means the screen reader announces the label when the user focuses on the field.
 

❌ Don't	✅ Do
Use placeholder text as the label ("Enter your email" inside the field)	Use a visible label above the field: "Email Address" + placeholder as a hint
No label at all	Label every field clearly

Placeholder text is not a label — it disappears when the user starts typing, leaving screen reader users without context.
 

Step 2: Group Related Fields

Use fieldsets and legends to group related fields, such as the group label ("Address") to give context to all fields within it — street, town, ZIP code.

Step 3: Mark Required Fields Clearly

Don't rely on color alone to indicate required fields. Use:

• A text indicator ("Required"), or
• An asterisk (*) with a legend explaining what it means
• Both visual and semantic indicators

Step 4: Provide Clear Instructions

• Add instructions before the form explaining what it's for and how to complete it
• Add field-specific instructions below the label when needed
• Example: "Email Address — Use your SRJC email (username@santarosa.edu)"

Step 5: Write Descriptive Error Messages

Note: Some software allows user to customize error messages. If this is not the case for the software you are using, skip this step.

When a user submits a form with errors, the messages must be:

❌ Bad Error Message	✅ Good Error Message
"Error"	"Email address is required"
"Invalid input"	"Please enter a valid email address (e.g., name@example.com)"
"Field required"	"Phone number is required. Please enter your phone number as XXX-XXX-XXXX"

Errors should also be:

• Programmatically associated with the field (so screen readers announce them)
• Visible on the page (not just in a popup or status bar)
• Specific about which field has the error and how to fix it

Step 6: Ensure Logical Tab Order

Users navigating by keyboard (Tab key) should move through the form in the same order as the visual layout — top to bottom, left to right.

Test by clicking into the first field and pressing Tab repeatedly — verify the focus moves in a logical sequence.

Step 7: Check Color Contrast

All form text — labels, instructions, error messages, button text — must meet the 4.5:1 contrast ratio against its background.

Testing Forms

Before publishing a form, test it by:

1. Keyboard-only navigation — put away the mouse. Can you complete the entire form using only Tab, Shift+Tab, Enter, and Space? If not, it's not accessible.
2. Screen reader test — if possible, test with NVDA (free), VoiceOver (Mac), or ask staff accessibility specialists for help.
3. Error handling — submit the form with errors and verify the error messages are clear and associated with the correct fields.
4. Zoom test — zoom to 200% and verify the form is still usable.
    

Common Issues & Fixes