Screen Reader Guide

SCREEN READER FOUNDATIONS

0 of 20
Course progress: 0 / 20 lessons

PRACTICE 2 OF 5 · Forms and validation

Required fields and instructions

Test whether required state and input instructions are available before a form is submitted.

  • Level: Beginner
  • Time: 5-10 minutes
Objective

Confirm that field requirements and format instructions are exposed before validation fails.

PREPARE

Set up your test

  1. Turn on a screen reader you know how to operate.
  2. Navigate by controls or use Tab where the task asks you to.
  3. Listen for purpose and state, not one exact sequence of spoken words.

WORKING EXAMPLE

Establish the expected behavior

Navigate to the field before submitting. Listen for the required state and format instruction.

Required. Use 10 digits, including area code.

Expected behavior: users can discover the requirement and format before validation fails.

INTENTIONAL DEFECT

Find the barrier

The example below deliberately contains one accessibility defect. Skip the defective example.

Navigate to the field before submitting. Determine whether the visual asterisk and instruction are available.

Required. Use 10 digits, including area code.

Hint

Check what is announced when focus first lands on the input.

End of intentional defect.

DIAGNOSE

Choose the primary cause

What is the primary problem with the defective required field?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The defective field shows an asterisk and instruction visually, but the input is not marked required and does not reference the instruction text.

Repair

Expose required state and associate format instructions with the input. Keep the visible instruction close to the field.

<label for="phone">Phone number <span aria-hidden="true">*</span></label>
<p id="phone-help">Required. Use 10 digits, including area code.</p>
<input id="phone" required aria-describedby="phone-help">

Retest

  • Move focus to the field before submitting and confirm the requirement is available.
  • Confirm the format instruction is available from the field.
  • Submit invalid data and confirm the later error does not replace necessary instructions permanently.

Report it

Example: The phone number field visually indicates that it is required, but screen reader users do not receive the required state or format instruction before submission.

Standards and support

This exercise describes behavior rather than promising identical speech across screen reader and browser combinations.

Editorially reviewed 20 July 2026.