Modify HTML Generated By Server Controls

[clintonG]

Technically speaking, this issue is not about modifying the HTML
generated by server controls but preceding the HTML generated by
server controls with an HTML control generated on the basis of the
type and the context of the server control itself. Clear as mud?

Consider the following server control...
<asp:textbox id="MemberEmail" runat="server" ></asp:textbox>

TextBox renders at run-time as an HTML control...
<input name="MemberEmail" type="text" id="MemberEmail" ... />

Section508 Accessibility requires the TextBox server control to
be preceded by the following HTML control...
<label for="MemberEmail">E-mail:</label>
<asp:textbox id="MemberEmail" runat="server" ></asp:textbox>

As I understand it, at run-time, a screen reader will stop on the
HTML label control named 'MemberEmail', read it aloud and put
the focus on the rendered input control allowing the person to enter
data into the form field.

Preceding the TextBox Server Control with a Label Server Control
is out of the question as the screen reader will not read what the
Label Server Control renders at run-time...
<span id="lblMemberEmail">E-mail</span>

I can get properties of the TextBox control(s) using...
foreach (Control ctl in parent.Controls) ...and I can use those properties
to build the HTML label control but I don't know how to output and
render the HTML label control so it will precede its respectively rendered
TextBox control in the HTML that is generated when the TextBox
Server Control is rendered ar run-time.

I hope this makes sense and somebody can comment as it is much more
effective to automate a page to validate and function as Section508
accessible
than to write each HTML label control manually.

 

[Karl]

Clinton,
I handled the FOR compliance by creating a custom control, not sure if
that'll work for you..

Imports System.Web.UI.WebControls

Public Class ForLabel
Inherits Label

Private _for As String
Public Property [For]() As String
Get
Return _for
End Get
Set(ByVal Value As String)
_for = Value
End Set
End Property

Protected Overrides ReadOnly Property TagKey() As
System.Web.UI.HtmlTextWriterTag
Get
Return HtmlTextWriterTag.Label
End Get
End Property

Protected Overrides Sub Render(ByVal writer As
System.Web.UI.HtmlTextWriter)
writer.AddAttribute(HtmlTextWriterAttribute.For, ClientID.Substring(0,
ClientID.Length - ID.Length) & _for)
MyBase.Render(writer)
End Sub

End Class


and then using it via:
<%@ Register TagPrefix="compliant" NameSpace="YOURNAMESPACE"
Assembly="YOURASSEMBLY" %>

<compliant:ForLabel runat="server" id="emailLabel" text="Email" For="Email"
/> <asp:TextBox ID="Email" Runat="server" />


Basically the FOR of the ForLabel will point to the ID of the textbox. It's
pretty basic, but ought to work so long as your label and your control is at
the same level (ie, don' tput the label on a page with the FOR poiting to a
textbox in a usercontrol)

Karl

 

[clintonG]

Thanks Karl. Your 'multilingual' Code Project articles are outstanding
and on my To-Do list. First things first...

Does this custom control you've developed actually write the <label>
element into the output stream so it will immediately precede the
<input> element when source is viewed?

<%= Clinton

Clinton,
I handled the FOR compliance by creating a custom control, not sure if
that'll work for you..

Imports System.Web.UI.WebControls

Public Class ForLabel
Inherits Label

Private _for As String
Public Property [For]() As String
Get
Return _for
End Get
Set(ByVal Value As String)
_for = Value
End Set
End Property

Protected Overrides ReadOnly Property TagKey() As
System.Web.UI.HtmlTextWriterTag
Get
Return HtmlTextWriterTag.Label
End Get
End Property

Protected Overrides Sub Render(ByVal writer As
System.Web.UI.HtmlTextWriter)
writer.AddAttribute(HtmlTextWriterAttribute.For, ClientID.Substring(0,
ClientID.Length - ID.Length) & _for)
MyBase.Render(writer)
End Sub

End Class


and then using it via:
<%@ Register TagPrefix="compliant" NameSpace="YOURNAMESPACE"
Assembly="YOURASSEMBLY" %>

<compliant:ForLabel runat="server" id="emailLabel" text="Email" For="Email"
/> <asp:TextBox ID="Email" Runat="server" />


Basically the FOR of the ForLabel will point to the ID of the textbox. It's
pretty basic, but ought to work so long as your label and your control is at
the same level (ie, don' tput the label on a page with the FOR poiting to a
textbox in a usercontrol)

Karl




--
MY ASP.Net tutorials
http://www.openmymind.net/

Technically speaking, this issue is not about modifying the HTML
generated by server controls but preceding the HTML generated by
server controls with an HTML control generated on the basis of the
type and the context of the server control itself. Clear as mud?

Consider the following server control...
<asp:textbox id="MemberEmail" runat="server" ></asp:textbox>

TextBox renders at run-time as an HTML control...
<input name="MemberEmail" type="text" id="MemberEmail" ... />

Section508 Accessibility requires the TextBox server control to
be preceded by the following HTML control...
<label for="MemberEmail">E-mail:</label>
<asp:textbox id="MemberEmail" runat="server" ></asp:textbox>

As I understand it, at run-time, a screen reader will stop on the
HTML label control named 'MemberEmail', read it aloud and put
the focus on the rendered input control allowing the person to enter
data into the form field.

Preceding the TextBox Server Control with a Label Server Control
is out of the question as the screen reader will not read what the
Label Server Control renders at run-time...
<span id="lblMemberEmail">E-mail</span>

I can get properties of the TextBox control(s) using...
foreach (Control ctl in parent.Controls) ...and I can use those properties
to build the HTML label control but I don't know how to output and
render the HTML label control so it will precede its respectively rendered
TextBox control in the HTML that is generated when the TextBox
Server Control is rendered ar run-time.

I hope this makes sense and somebody can comment as it is much more
effective to automate a page to validate and function as Section508
accessible
than to write each HTML label control manually.


--
<%= Clinton Gallagher, "Twice the Results -- Half the Cost"
Architectural & e-Business Consulting -- Software Development
NET (e-mail address removed)
URL http://www.metromilwaukee.com/clintongallagher/

 

[Karl]

Thanks clinton

It does write out the <label> element (as you can see it overrides the
TagKey property to do this), but it doesn't automatically place it anywhere.
That's why you still need to position it in the aspx file:

<table>
<tr>
<td><compliant:ForLabel runat="server" id="emailLabel" text="Email"
For="Email" /></td>
<td> <asp:TextBox ID="Email" Runat="server" /></td>
</tr>
</table>

For this reason I wasn't sure if this solution fit your needs.

Karl

--
MY ASP.Net tutorials
http://www.openmymind.net/

Thanks Karl. Your 'multilingual' Code Project articles are outstanding
and on my To-Do list. First things first...

Does this custom control you've developed actually write the <label>
element into the output stream so it will immediately precede the
<input> element when source is viewed?

<%= Clinton

Clinton,
I handled the FOR compliance by creating a custom control, not sure if
that'll work for you..

Imports System.Web.UI.WebControls

Public Class ForLabel
Inherits Label

Private _for As String
Public Property [For]() As String
Get
Return _for
End Get
Set(ByVal Value As String)
_for = Value
End Set
End Property

Protected Overrides ReadOnly Property TagKey() As
System.Web.UI.HtmlTextWriterTag
Get
Return HtmlTextWriterTag.Label
End Get
End Property

Protected Overrides Sub Render(ByVal writer As
System.Web.UI.HtmlTextWriter)
writer.AddAttribute(HtmlTextWriterAttribute.For, ClientID.Substring(0,
ClientID.Length - ID.Length) & _for)
MyBase.Render(writer)
End Sub

End Class


and then using it via:
<%@ Register TagPrefix="compliant" NameSpace="YOURNAMESPACE"
Assembly="YOURASSEMBLY" %>

<compliant:ForLabel runat="server" id="emailLabel" text="Email" For="Email"
/> <asp:TextBox ID="Email" Runat="server" />


Basically the FOR of the ForLabel will point to the ID of the textbox. It's
pretty basic, but ought to work so long as your label and your control

is

at
the same level (ie, don' tput the label on a page with the FOR poiting

to

 

[clintonG]

Thanks for your attention Karl. After reading some DHTML
documentation such as outerHTML that allows entire HTML
declarations to be replaced in their entirety I imagined the same
could be done via ASP.NET.

There are significant requirements that must be achieved to validate
an ASP.NET application as accessible. The HTML required for
Section508 compliance *must* be well formed (easy) and it *must*
be located in the output source at a specific location preceding the
control it acts upon (difficult and able to do so yet to be determined)
and in the case of DropDownList controls (DDL) the required
Section508 HTML *must* be embedded into one or more locations
of the HTML that the DDL outputs at run-time.

There are many articles that address the general principles of accessiblity
when using ASP.NET but I have yet to find even one that can be used
to actually meet the requirements so the page can be validated.

--
<%= Clinton Gallagher, "Twice the Results -- Half the Cost"
Architectural & e-Business Consulting -- Software Development
NET (e-mail address removed)
URL http://www.metromilwaukee.com/clintongallagher/

Thanks clinton

It does write out the <label> element (as you can see it overrides the
TagKey property to do this), but it doesn't automatically place it anywhere.
That's why you still need to position it in the aspx file:

<table>
<tr>
<td><compliant:ForLabel runat="server" id="emailLabel" text="Email"
For="Email" /></td>
<td> <asp:TextBox ID="Email" Runat="server" /></td>
</tr>
</table>

For this reason I wasn't sure if this solution fit your needs.

Karl

--
MY ASP.Net tutorials
http://www.openmymind.net/

Thanks Karl. Your 'multilingual' Code Project articles are outstanding
and on my To-Do list. First things first...

Does this custom control you've developed actually write the <label>
element into the output stream so it will immediately precede the
<input> element when source is viewed?

<%= Clinton



message news:%[email protected]...

Clinton,
I handled the FOR compliance by creating a custom control, not sure if
that'll work for you..

Imports System.Web.UI.WebControls

Public Class ForLabel
Inherits Label

Private _for As String
Public Property [For]() As String
Get
Return _for
End Get
Set(ByVal Value As String)
_for = Value
End Set
End Property

Protected Overrides ReadOnly Property TagKey() As
System.Web.UI.HtmlTextWriterTag
Get
Return HtmlTextWriterTag.Label
End Get
End Property

Protected Overrides Sub Render(ByVal writer As
System.Web.UI.HtmlTextWriter)
writer.AddAttribute(HtmlTextWriterAttribute.For, ClientID.Substring(0,
ClientID.Length - ID.Length) & _for)
MyBase.Render(writer)
End Sub

End Class


and then using it via:
<%@ Register TagPrefix="compliant" NameSpace="YOURNAMESPACE"
Assembly="YOURASSEMBLY" %>

<compliant:ForLabel runat="server" id="emailLabel" text="Email" For="Email"
/> <asp:TextBox ID="Email" Runat="server" />


Basically the FOR of the ForLabel will point to the ID of the textbox. It's
pretty basic, but ought to work so long as your label and your control

is

at
the same level (ie, don' tput the label on a page with the FOR poiting

to

a
textbox in a usercontrol)

Karl




--
MY ASP.Net tutorials
http://www.openmymind.net/


Technically speaking, this issue is not about modifying the HTML
generated by server controls but preceding the HTML generated by
server controls with an HTML control generated on the basis of the
type and the context of the server control itself. Clear as mud?

Consider the following server control...
<asp:textbox id="MemberEmail" runat="server" ></asp:textbox>

TextBox renders at run-time as an HTML control...
<input name="MemberEmail" type="text" id="MemberEmail" ... />

Section508 Accessibility requires the TextBox server control to
be preceded by the following HTML control...
<label for="MemberEmail">E-mail:</label>
<asp:textbox id="MemberEmail" runat="server" ></asp:textbox>

As I understand it, at run-time, a screen reader will stop on the
HTML label control named 'MemberEmail', read it aloud and put
the focus on the rendered input control allowing the person to enter
data into the form field.

Preceding the TextBox Server Control with a Label Server Control
is out of the question as the screen reader will not read what the
Label Server Control renders at run-time...
<span id="lblMemberEmail">E-mail</span>

I can get properties of the TextBox control(s) using...
foreach (Control ctl in parent.Controls) ...and I can use those properties
to build the HTML label control but I don't know how to output and
render the HTML label control so it will precede its respectively rendered
TextBox control in the HTML that is generated when the TextBox
Server Control is rendered ar run-time.

I hope this makes sense and somebody can comment as it is much more
effective to automate a page to validate and function as Section508
accessible
than to write each HTML label control manually.


--
<%= Clinton Gallagher, "Twice the Results -- Half the Cost"
Architectural & e-Business Consulting -- Software Development
NET (e-mail address removed)
URL http://www.metromilwaukee.com/clintongallagher/