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.
... standards are being ignored, common decency in design is abandoned and .NET is rampant.
Let me take a second to introduce myself. A "Manc Manx", I moved to the Isle of Man from the great city of Manchester, UK. Having left Salford University in 2001, I have worked for a number of companies including one specialising in collective purchasing and e-billing, one specialising in web design and accessible web sites for the NHS and now for a major Powersport company that operates from the "Home of Road Racing", The Isle of Man.
From the depths of VB6, to the heady heights of ASP.NET with C#, I have had the opportunities to find my niche, which is accessibility and web standards.
Why Accessibility is Important
Accessibility is not just about letting disabled people use your site. It is about taking the time to consider those with other browsers, other platforms and other footprints. Loading a site with widgets, blinkies and tickers is not, in my opinion, a great step in creating an attractive and stimulating site.
Web Designers often fall foul of basic gotcha's in poor site design:
- Use of tables for formatting
- Use of tags for styling instead of what they actually mean, eg. heading tags should start from 1 and increment - not jump.
- JavaScript is all very good, but it is a pain to get to work on all browsers and if it provides functoinality, rather than complements it, then people lose out.
- Reliance on poor standards implementation by a certain browser - and forget anyone else!
- .... and when the rules have been broken, achieving immunity by adding "This site is best viewed at 800x600 in MS Internet Explorer v6", with a big button to download the latest version!
I will doubtless evangelise about these points and more as and when I find the time.
This blog will probably name and shame sites that are not up to scratch, it will spout personal opinions that will probably be entirely unreliable but I think it needs to be said.
Thanks for stopping by, hope to see you soon ....