E-mail List Archives

Search E-mail List Archives for

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

From: dean@bushidodesigns.net
Date: Fri, Apr 17 2009 2:55PM
Subject: Proper title for accordion menu links?
No previous message | Next message →

Lets say I've got a form with legends that say "shipping address",
"billing address", etc. and clicking on one toggles open the section
below where the user enters some form data. What should the link title
look like? How about:

<legend><a href="#shipping" title="click to enter your shipping
details">Shipping Address</a></legend>

Would that be correct title text?

From: Simius Puer
Date: Sat, Apr 18 2009 4:05AM
Subject: Re: Proper title for accordion menu links?
← Previous message | Next message →

Hi Dean

It might be the context you are using but it sound like you actually want
<label> rather than <legend>. Legend is used to give information to
<fieldset>s not individual input fields e.g.:

<form action="youraction">
<fieldset>
*<legend>*Shipping details*</legend>*
<p>Name: <input type="text" name="shipName"/></p>
<p>Address: <input type="text" name="shipAddress"/></p>
<p>Postal code: <input type="text" name="shipPostcode"/></p>
<p>Country:
<select name="shipCountry">
<option>United Kingdom</option>
<option>United States</option>
</select></p>
</fieldset>
<fieldset>
etc...
</fieldset>
<div id="buttons">
<input type="button" name="Button" value="Submit"/>
</div>
</form>

You should also add <label>s to each field...this sounds like what you are
asking about. Either wrap the <label> around both the visual text and the
input field or associate them using IDs.

If you want to see some example code check out
http://www.elated.com/articles/creating-accessible-web-forms/ ...a good (if
not quite perfect) guide to building accessible forms.

One other minor point - "click" is a device dependent term and best dropped
from your website vocabulary entirely as the same applies to link text etc.
Just dropping the "click to" makes is a) device independent and b) less
monotonous (imaging you have 15-20 input fields all starting "click to").

Also if you are hiding parts of the form until "clicked" upon, you really
need to consider if the hide/show medod you are using is accessible in
itself. There have been many recent discussion about this on this board so
I won't re-hash, just check out the archives.

Have a good weekend

From: Dean Hamack
Date: Sat, Apr 18 2009 10:05AM
Subject: Re: Proper title for accordion menu links?
← Previous message | Next message →

Thanks, I'm aware of all that. I have fieldsets with multiple fields (all
with proper labels). As I said, users click on the legend to reveal the
items in the fieldset.

All I was asking about is the link title. If not "click" then what? I
haven't heard any alternatives suggested here.


On 4/18/09 3:04 AM, "Simius Puer" < = EMAIL ADDRESS REMOVED = > wrote:

> Hi Dean
>
> It might be the context you are using but it sound like you actually want
> <label> rather than <legend>. Legend is used to give information to
> <fieldset>s not individual input fields e.g.:
>
> <form action="youraction">
> <fieldset>
> *<legend>*Shipping details*</legend>*
> <p>Name: <input type="text" name="shipName"/></p>
> <p>Address: <input type="text" name="shipAddress"/></p>
> <p>Postal code: <input type="text" name="shipPostcode"/></p>
> <p>Country:
> <select name="shipCountry">
> <option>United Kingdom</option>
> <option>United States</option>
> </select></p>
> </fieldset>
> <fieldset>
> etc...
> </fieldset>
> <div id="buttons">
> <input type="button" name="Button" value="Submit"/>
> </div>
> </form>
>

From: Jared Smith
Date: Sat, Apr 18 2009 1:10PM
Subject: Re: Proper title for accordion menu links?
← Previous message | Next message →

On Fri, Apr 17, 2009 at 2:47 PM, < = EMAIL ADDRESS REMOVED = > wrote:
> <legend><a href="#shipping" title="click to enter your shipping
> details">Shipping Address</a></legend>
>
> Would that be correct title text?

By default, title is not read on links, so ultimately, it probably
doesn't matter a whole lot. If it is read, it will be identified with
the link, so I'd go with "Enter your shipping details". "Click here"
is almost always extraneous and can usually be omitted.

Jared Smith
WebAIM

From: Dean Hamack
Date: Sat, Apr 18 2009 2:10PM
Subject: Re: Proper title for accordion menu links?
← Previous message | Next message →

Thanks Jared.


On 4/18/09 12:09 PM, "Jared Smith" < = EMAIL ADDRESS REMOVED = > wrote:

> On Fri, Apr 17, 2009 at 2:47 PM, < = EMAIL ADDRESS REMOVED = > wrote:
>> <legend><a href="#shipping" title="click to enter your shipping
>> details">Shipping Address</a></legend>
>>
>> Would that be correct title text?
>
> By default, title is not read on links, so ultimately, it probably
> doesn't matter a whole lot. If it is read, it will be identified with
> the link, so I'd go with "Enter your shipping details". "Click here"
> is almost always extraneous and can usually be omitted.
>
> Jared Smith
> WebAIM

From: Lisa A. Cammarota
Date: Mon, Apr 20 2009 8:20AM
Subject: Re: Proper title for accordion menu links?
← Previous message | Next message →

Dean,

Shipping Address without a title should be enough. The screen reader should read that it is a link within a page (anchor vs. link to another page).

Hope this Helps :o)

Lisa Cammarota


>>> Dean Hamack < = EMAIL ADDRESS REMOVED = > 4/18/2009 12:04 PM >>>
Thanks, I'm aware of all that. I have fieldsets with multiple fields (all
with proper labels). As I said, users click on the legend to reveal the
items in the fieldset.

All I was asking about is the link title. If not "click" then what? I
haven't heard any alternatives suggested here.


On 4/18/09 3:04 AM, "Simius Puer" < = EMAIL ADDRESS REMOVED = > wrote:

> Hi Dean
>
> It might be the context you are using but it sound like you actually want
> <label> rather than <legend>. Legend is used to give information to
> <fieldset>s not individual input fields e.g.:
>
> <form action="youraction">
> <fieldset>
> *<legend>*Shipping details*</legend>*
> <p>Name: <input type="text" name="shipName"/></p>
> <p>Address: <input type="text" name="shipAddress"/></p>
> <p>Postal code: <input type="text" name="shipPostcode"/></p>
> <p>Country:
> <select name="shipCountry">
> <option>United Kingdom</option>
> <option>United States</option>
> </select></p>
> </fieldset>
> <fieldset>
> etc...
> </fieldset>
> <div id="buttons">
> <input type="button" name="Button" value="Submit"/>
> </div>
> </form>
>

From: dean@bushidodesigns.net
Date: Mon, Apr 20 2009 11:20AM
Subject: Re: Proper title for accordion menu links?
← Previous message | Next message →

Thanks Lisa. I think I'll go with that.

> -------- Original Message --------
> Subject: Re: [WebAIM] Proper title for accordion menu links?
> From: "Lisa A. Cammarota" < = EMAIL ADDRESS REMOVED = >
> Date: Mon, April 20, 2009 7:13 am
> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>
>
> Dean,
>
> Shipping Address without a title should be enough. The screen reader should read that it is a link within a page (anchor vs. link to another page).
>
> Hope this Helps :o)
>
> Lisa Cammarota

From: Lisa A. Cammarota
Date: Tue, Apr 21 2009 7:35AM
Subject: Re: Proper title for accordion menu links?
← Previous message | No next message

your welcome, glad to help :o)

>>> < = EMAIL ADDRESS REMOVED = > 4/20/2009 1:19 PM >>>
Thanks Lisa. I think I'll go with that.

> -------- Original Message --------
> Subject: Re: [WebAIM] Proper title for accordion menu links?
> From: "Lisa A. Cammarota" < = EMAIL ADDRESS REMOVED = >
> Date: Mon, April 20, 2009 7:13 am
> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
>
>
> Dean,
>
> Shipping Address without a title should be enough. The screen reader should read that it is a link within a page (anchor vs. link to another page).
>
> Hope this Helps :o)
>
> Lisa Cammarota