ASP.NetPage

ASP.Net - Web Accessibility

Web Accessibility

Certain locations require you to write your software to be Web Accessible. That is, written in such a way so that certain people with disabilities can view your screen.

You need to review the requirements, and adjust your code accordingly. However there are tools that will check your code to see if there are any immediate concerns.

There’s quite a few tools available to the Visual Studio looking to avoid expenses.

Visual Studio - There is a tool called “Check Accessibility”. When you activate this and press validate, it will perform a test by looking at your code of whatever project you are working on and place it’s results in an output view.

Web Accessibility Checker - this is a website that contains a web accessiblity checker as well. The primary difference between this and the Visual Studio checker, is that it is looking at the HTML rather than your source code. Subsequently it comes up with a different set of errors than you would see on the Visual Studio tool.

Here is information about the Web Accessibility Checker.

http://achecker.ca/checker/index.php

To use this website on a website located in the IntraNet.

  1. Open your web page, then do the view source.
  2. Copy the contents of the source.
  3. Switch to the achecker.ca website, to the ‘Paste HTML Markup’ tab.
  4. Paste your code into the window and press the ‘Check It’ button.

Within a minute the screen will change (you can tell by the window’s scrollbar), when you scroll down, you’ll be presented with the review output, showing you the problems it found. THe ones that should be reviewed immediately are the ones listed in the known problems.

Here’s a few, and workarounds for ASP.NET web pages.

Check 57: input element, type of “text”, missing an associated label.

This will give you an example like this

1
<input name="ctl00$cphMain$TabControl$TabPanel2$txtLegalFirstName2" type="text" maxlength="50" id="c ...

Really - it’s your txtLegalFirstName2 control that has the issue.

You problably have something like this :

1
2
3
4
5
  first name: <asp:TextBox 
id="txtLegalFirstName2" 
runat="server"
	MaxLength="50"
/>

You need to change it to something like this:

1
2
3
4
5
6
7
8
9
10
11
<asp:Label 
	ID="lbltxtLegalFirstName2" 
	runat="server" 
	Text="Legal first" 
	AssociatedControlID="txtLegalFirstName2"
	/>
<asp:TextBox 
	id="txtLegalFirstName2" 
	runat="server" 
	MaxLength="50"
	/>

That is you want to remove your text that describes the textbox and replace it with a lable. That label should also reference the textbox.In ASP.Net this is done with the AssociatedControlID property of the asp:Label control.

Check 91: select element missing an associated label.

This will give you an error like this

1
<select size="28" name="ctl00$cphMain$ddlEmployee" onchange="javascript:setTimeout(&#39;__doPostBack ...

Really, the listbox or dropdown needs a lable. Your code might show something like this:

1
2
3
4
5
<asp:listbox 
	id="ddlEmployee" 
	runat="server" 
	AutoPostBack="True" 
	Rows="28" />

You need to change it to something like this:

1
2
3
4
5
6
7
8
9
10
11
12
<asp:listbox 
	id="ddlEmployee" 
	runat="server" 
	AutoPostBack="True" 
	Rows="28" />
<asp:Label 
	id="lblddlEmployee" 
	runat="server"
	Text="Staff List"
	AssociatedControlID="ddlEmployee"
	cssClass="hidden"
	/>

Notice - the css on the lable is a style to not show the label on the form. (This is optional I did not want to see the label in this context.)

Check 119: input element, type of “checkbox”, missing an associated label.

for example

1
<input id="ctl00_cphMain_TabControl_TabPanel2_chkSysHold2"          type="checkbox" name="ctl00$cphMain$TabCo ...

You problably have something like this 

1
2
System Hold:
<asp:CheckBox id="chkSysHold2" runat="server" />(if checked)

You need to change it to something like this

1
2
3
4
5
6
7
<asp:Label 
	ID="lblchkSysHold2" 
	runat="server" 
	Text="System Hold:" 
	AssociatedControlID="chkSysHold2"
	/>
<asp:CheckBox id="chkSysHold2" runat="server" />(if checked)