WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessible forms with multiple duplicated sections for bill payment

for

From: Hock-Kei Chau
Date: Feb 28, 2017 10:17AM

Hi,

Need help if i'm going towards the right direction in making this form more
accessible.

By default, the first sections has a heading with a radio selection for
account/payment type to pay with several fields to identify the customer.

Customer has option to pay up to 10 multiple accounts.

The problem is i'm not sure what is the best way to label when they want to
pay multiple accounts.

Labels for first default account section:
heading: Payment Type
fieldset legend for radio options: Please select a payment type
radio options: utility bill, water bill
field 1 label: Account Number
field 2 label: Zip Code:

Now there are 2 variations I have for the text for multiple accounts:

*Variation 1 (all 10 duplicate sections will have these exact same
verbiage):*
heading: Additional Payment Type
fieldset legend for radio options: Please select a payment type for your
additional account to pay
radio options: utility bill, water bill
field 1 label: Account Number
field 2 label: Zip Code

*Variation 2 *
heading: Payment Type
fieldset legend for radio options: Please select a payment type for your
"first/second/third/fourth/fifth/sixth/seventh/eigth/ninth/tenth" account
to pay
radio options: utility bill, water bill
field 1 label: Account Number for second account
field 2 label: Zip Code: for second account

I'm leaning towards variation 1 but i'm not sure if either approach is
good. Is the verbiage for the legend too long since in JAWS Insert + F5
menu it'll repeat the legend in each radio option.

Any help is greatly appreciated,
Thanks

--


*Hock-Kei Chau | UI Developer*