Accessible Forms #1 : Using the <label> tag in ASP.NET
One of the more challenging aspects of any persons use of a web page is the submission of form data. Whether that user is disabled, using a small device such as a form or using a fully-specced PC - none of us like filling in forms.
Now imagine that your filling in that form using a speaking browser like Jaws or a browser that cannot lay out your form to identify how it relates to the individual fields. A traditional form is set in a table, with labels on the left and fields on the right. It looks good, it is logical and is a widely accepted means of capturing user data. Apart from the fact that a table has been used for formatting, and not for data, we have the problem of what more relationship is there between the labels and the fields than sharing a common table row?
The <label> tag overcomes this, and is typically written thus:
<label for="txtUsername">Username:</label><input type="text" id="txtUsername" name="txtUsername" />
Using this, the label for Username can be placed anywhere on the page, though this is obviously of limited use. A speaking browser will identify to the user the purpose of the textbox by reading something like " text input, Username " instead of what would otherwise be something next to useless, such as " Text input ".
Now put this in a usercontrol inside ASP.NET and we see that the ID applied to the input is mangled with ASP.NET's hierarchical naming convention.
<label for="txtEmailAddress">Email Address:</label><input name="Basket_LoginClient0:txtEmailAddress" type="text" maxlength="32" id="Basket_LoginClient0_txtEmailAddress" />
They don't match!
Creating an Accessible LABEL control in ASP.NET
Create a new WebControl, with the following simple code:
One of the more challenging aspects of any persons use of a web page is the submission of form data. Whether that user is disabled, using a small device such as a form or using a fully-specced PC - none of us like filling in forms.
Now imagine that your filling in that form using a speaking browser like Jaws or a browser that cannot lay out your form to identify how it relates to the individual fields. A traditional form is set in a table, with labels on the left and fields on the right. It looks good, it is logical and is a widely accepted means of capturing user data. Apart from the fact that a table has been used for formatting, and not for data, we have the problem of what more relationship is there between the labels and the fields than sharing a common table row?
The <label> tag overcomes this, and is typically written thus:
<label for="txtUsername">Username:</label><input type="text" id="txtUsername" name="txtUsername" />
Using this, the label for Username can be placed anywhere on the page, though this is obviously of limited use. A speaking browser will identify to the user the purpose of the textbox by reading something like " text input, Username " instead of what would otherwise be something next to useless, such as " Text input ".
Now put this in a usercontrol inside ASP.NET and we see that the ID applied to the input is mangled with ASP.NET's hierarchical naming convention.
<label for="txtEmailAddress">Email Address:</label><input name="Basket_LoginClient0:txtEmailAddress" type="text" maxlength="32" id="Basket_LoginClient0_txtEmailAddress" />
They don't match!
Creating an Accessible LABEL control in ASP.NET
Create a new WebControl, with the following simple code:
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.ComponentModel;
namespace Duke.Lib.ASPNET.Accessibility
{
[DefaultProperty("Text"),
ToolboxData("<{0}:FormLabel runat=server>"),
ParseChildrenAttribute(false)]
public class FormLabel : WebControl, INamingContainer
{
private string _friend;
#region ~ Properties ~
public string Friend
{
get { return _friend; }
set { _friend=value; }
}
#endregion
public FormLabel() {}
protected override void CreateChildControls()
{
Control control=(Control)Parent.FindControl(_friend);
HtmlGenericControl label=new HtmlGenericControl("label");
if (control!=null) label.Attributes.Add("for",control.ClientID);
else label.Attributes.Add("for",Friend);
foreach (Control childControl in this.Controls) label.Controls.Add(childControl);
this.Controls.Add(label);
}
}
}
Then, refer to your new control using the Register directive showb below, at the top of the page:
<%@ Register TagPrefix="ProgramX" Assembly="ProgramX.Lib.ASPNET" Namespace="ProgramX.Lib.ASPNET.Accessibility" %>
(Obviously your namespaces, assembly name will be different)
When you need to attach a label to a control (any control), add the following code:
<label friend=”txtEmailAddress” runat=”server”>Email Address*:</label><asp:TextBox id=”txtEmailAddress” runat=”server” />
This will attach the labels "for" attribute to the name of the control in the FormLabel's "friend" attribute.
Further
The LABEL method is also useful in CSS, as you can now specifically target labels without having to place them inside a containing SPAN.
Just putting these labels next to your fields doesn't make your form accessible! Rule #1 in accessibility is: everyone is different and no rule is a rule. People have different needs and different preferences. Make sure your labels are consistent with the purpose of the field and use simple language. And never use a "negative selection", which would be something like:
"Do not sign my up to newsletters"
This should be "Sign my up to newsletters" with a default selection of checked if you insist on going down the route of capturing the maximum number of users for your mailing list.
You'll notice the '*' character at the end of the label, thats not accessible, thats just common sense to identify a mandatory field. Consider that when you use such indicators, that the lowest common denominator is always better - which means a character rather than a graphic. Its faster, it works on every platform and if you need to make it fancy, just use CSS.
Finally, form controls should be placed inside a FIELDSET tag, which can at times be challenging to make look anything near decent, so I'll doubtless cover that again later.
Comments turned off due to spamming.