Nik's Technology Blog

Travels through programming, networks, and computers

ASP.NET Web Accessibility and Visual Studio 2005

I've been using Visual Studio 2005 on a recent project and was surprised that even though it is supposed to feature lots of web accessiblity tools and options, they don't seem to be turned on by default. I'll bring you an example to back this up.
I created a new ASP.NET page, essentially it was a simple form, which when submitted sent an email; similar to a contact form if you like. The form was built within an HTML table, with ASP:Label controls to hold the textbox definitions.
On viewing the page in a browser and examining the source code, I noticed that the ASP:Label controls are converted to HTML <span> tags, which is a little bizarre. After a little research I found that if you use the AssociatedControlID property of the ASP:Label to link to the related textbox the HTML source code produced now uses an HTML <label> tag.
I also figured out that using the ToolTip property of the ASP:Label control renders as the title property of the HTML label tag.

So the following ASP.NET source code:

<asp:Label ID="LblDayMovedOut" runat="server" ToolTip="Day Moved Out" AssociatedControlID="DayMovedOut">
<asp:DropDownList ID="DayMovedOut" runat="server"></asp:DropDownList>
</asp:Label>
<asp:Label ID="LblMonthMovedOut" runat="server" ToolTip="Month Moved Out" AssociatedControlID="MonthMovedOut">
<asp:DropDownList ID="MonthMovedOut" runat="server"></asp:DropDownList>
</asp:Label>
<asp:Label ID="LblYearMovedOut" runat="server" ToolTip="Year Moved Out" AssociatedControlID="YearMovedOut">
<asp:DropDownList ID="YearMovedOut" runat="server"></asp:DropDownList>
</asp:Label>


Would render the following bloated, but accessible HTML:

<label for="ctl00_ContentPLaceHolder_DayMovedOut" id="ctl00_ContentPLaceHolder_LblDayMovedOut" title="Day Moved Out">
<select name="ctl00$ContentPLaceHolder$DayMovedOut" id="ctl00_ContentPLaceHolder_DayMovedOut">
</select>
</label>
<label for="ctl00_ContentPLaceHolder_MonthMovedOut" id="ctl00_ContentPLaceHolder_LblMonthMovedOut" title="Month Moved Out">
<select name="ctl00$ContentPLaceHolder$MonthMovedOut" id="ctl00_ContentPLaceHolder_MonthMovedOut">
</select>
</label>
<label for="ctl00_ContentPLaceHolder_YearMovedOut" id="ctl00_ContentPLaceHolder_LblYearMovedOut" title="Year Moved Out">
<select name="ctl00$ContentPLaceHolder$YearMovedOut" id="ctl00_ContentPLaceHolder_YearMovedOut">
</select>
</label>

Comments are closed