WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Accessible forms with multiple duplicated sections for bill payment

for

Number of posts in this thread: 5 (In chronological order)

From: Hock-Kei Chau
Date: Tue, Feb 28 2017 10:17AM
Subject: Accessible forms with multiple duplicated sections for bill payment
No previous message | Next message →

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*

From: Graham Armfield
Date: Wed, Mar 01 2017 8:56AM
Subject: Re: Accessible forms with multiple duplicated sections for bill payment
← Previous message | Next message →

You could in theory use a fieldset for each of the sections - with the
corresponding <legend> providing the context. Fieldsets can be nested, so
that wouldn't interfere with your use of a fieldset for the radio uttons

Or have I misunderstood the question?

Regards
Graham Armfield

From: Hock-Kei Chau
Date: Wed, Mar 01 2017 9:12AM
Subject: Re: Accessible forms with multiple duplicated sections for bill payment
← Previous message | Next message →

They each have their own fieldset with legend. It's more of which direction
to go with the verbiage.

The first variation is more of a general description but is it good enough
that I can use instead of going with the second variation.

The problem with the second variation if I specify "first, second, third,
etc" is that if they have 5 payment items they added. Then they decide to
remove the fourth payment item, then in JAWS you'll see third and fifth
payment item verbiage rather than fifth payment item verbiage changed into
the fourth item verbiage.

Now I can update all their values by jquery but it just adds to the
development scope since the verbiage is not hard coded but rather retrieved
from a database and can always be changed by another individual if client
wants the verbiage changed.


On Wed, Mar 1, 2017 at 10:56 AM, Graham Armfield <
= EMAIL ADDRESS REMOVED = > wrote:

> You could in theory use a fieldset for each of the sections - with the
> corresponding <legend> providing the context. Fieldsets can be nested, so
> that wouldn't interfere with your use of a fieldset for the radio uttons
>
> Or have I misunderstood the question?
>
> Regards
> Graham Armfield
> > > > >



--


*Hock-Kei Chau | UI Developer*
*Paymentus**Paymentus Corporation*
*The Real-Time Bill Payment CompanyTM*Direct: (289) 379-9549 <2893799549> |
Cell: (416) 721-9844 <4167219844>
www.paymentus.com | Twitter <http://twitter.com/paymentuscorp>; | Facebook
<http://www.facebook.com/paymentus>;

IMPORTANT NOTICE: This electronic message and its attachments contain
information that are PRIVILEGED AND CONFIDENTIAL. The information is
intended for the use of the individual (s) or entity named above. If you
have received this communication in error, please inform us immediately by
replying to the sender and delete this electronic message and its
attachments and all its copies from your system.

From: Arnie Shore
Date: Wed, Mar 01 2017 9:27AM
Subject: Re: Accessible forms with multiple duplicated sections for bill payment
← Previous message | Next message →

Consider: If during a single user session he removes the nth payment item,
then for the duration of that session replace its verbiage with, say,
"removed", while retaining its skeleton.

AS

From: Hock-Kei Chau
Date: Mon, Mar 06 2017 8:37AM
Subject: Re: Accessible forms with multiple duplicated sections for bill payment
← Previous message | No next message

That form section gets removed when they click on the remove button.

Generally most of our users only pay one account. Small percentage pay two
accounts and rare for 3+ accounts.

For the time being I went with variation 1 solution.


On Wed, Mar 1, 2017 at 11:27 AM, Arnie Shore < = EMAIL ADDRESS REMOVED = > wrote:

> Consider: If during a single user session he removes the nth payment item,
> then for the duration of that session replace its verbiage with, say,
> "removed", while retaining its skeleton.
>
> AS
> > > > >



--

*Hock-Kei Chau | UI Developer*