In the example below, group boxes are used to organize the information. The billing and shipping information require some of the same information, but users need to know which set of information has the focus. When a screen reader user tabs to a new field, the name, role and state of the control are announced.
For example, when users navigate to the Billing Information: Last Name field, they should hear "Billing Information: Last Name; Edit; Type in Text". "Billing Information: Last Name" is the name of the field. "Edit" indicates a text edit field which is the role, and "Type in Text" is the state of the control. An edit field can be editable or read-only; having a state of "Type in Text" allows users to enter data into the field.
When users navigate to the Shipping Information, the first field they will encounter is the "Same as Billing Address" checkbox. Upon encountering this control, the screen reader should announce "Shipping Information; Same as Billing Address; Checkbox; Checked". Since the checkbox is the first field in the Shipping Information group that will receive focus, the group name "Shipping Information" is announced. It is vital that the name, role and state of a control are rendered to the users so that they know how to interact with it.
Select Next to learn about testing for this requirement.