This is a migrated thread and some comments may be shown as answers.

[Solved] input elemens causing section 508 failure

2 Answers 170 Views

Calendar

This is a migrated thread and some comments may be shown as answers.

Adam Nelson asked on 21 Mar 2008, 06:08 PM

Hello,

We are using the Prometheus Calendar control as a datepicker similar to the Shared Calendar Example.

One of our customers is running the app through HiSoftware's AccVerify tool to ensure the application is Section 508 compliant.

If i run the shared calendar example through the tool and clear the date fields, the control is failing with the following errors:

<snip>
Rule: 1.1.2 - All INPUT elements are required to contain the alt attribute or use a LABEL.

Failure - INPUT Element, of Type TEXT, found at Line: 183, Column: 110
Failure - INPUT Element, of Type TEXT, found at Line: 187, Column: 129
Failure - INPUT Element, of Type TEXT, found at Line: 187, Column: 215

<snip>

If i run the example through the tool without clearing the fields, it generates the following warnings that are still considered to be failures:

<snip>
Rule: 1.1.2 - All INPUT elements are required to contain the alt attribute or use a LABEL.

Warning - INPUT Element, of Type TEXT, found at Line: 183, Column: 110 contains a non-empty 'value' attribute. This is a practice referred to as "self-labeling." Self-Labeling is argued to be accessible under Priority One or Section 508 guidelines/standards. We recommend using a Label as the Preferred method or the use of an 'alt' attribute to make this element accessible.
Warning - INPUT Element, of Type TEXT, found at Line: 187, Column: 129 contains a non-empty 'value' attribute. This is a practice referred to as "self-labeling." Self-Labeling is argued to be accessible under Priority One or Section 508 guidelines/standards. We recommend using a Label as the Preferred method or the use of an 'alt' attribute to make this element accessible.
Warning - INPUT Element, of Type TEXT, found at Line: 187, Column: 234 contains a non-empty 'value' attribute. This is a practice referred to as "self-labeling." Self-Labeling is argued to be accessible under Priority One or Section 508 guidelines/standards. We recommend using a Label as the Preferred method or the use of an 'alt' attribute to make this element accessible.

<snip>

In the example, there is a label who's 'for' attribute is being set to '<%= RadDatePicker1.DateInput.ClientID + "_TextBox" %>'

but there are two other inputs rendered for each datepicker that still violate the 508 1.1.2 rule.

In my page, I tried adding the AssociatedControlId property on the label that precedes the control on the form, but I'm still receiving failures as well.

Any suggestions?

2 Answers, 1 is accepted

answered on 25 Mar 2008, 05:09 PM

I'd like to add that we've been able to reproduce this in a sandbox environment easily.

Here's a simple page using the control:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadDatePicker.aspx.cs" Inherits="WebApplication.RadDatePicker" %> 
        
            <%@ Register assembly="Telerik.Web.UI, Version=2007.3.1314.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
                <title>RadDatePicker Prometheus 1.1.2 INPUT element 508 Compliance Issues</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <h1>RadDatePicker Prometheus 1.1.2 INPUT element 508 Compliance Issues</h1> 
        
                    <asp:scriptmanager runat="server"></asp:scriptmanager> 
        
                    <asp:Label ID="uxLabelDate" runat="server" AssociatedControlID="RadDatePicker1" Text="Date:" /> 
        
                    <telerik:RadDatePicker ID="RadDatePicker1" Runat="server"></telerik:RadDatePicker> 
        
                </form> 
        
            </body> 
        
            </html>

Here's the error:

Rule: 1.1.2 - All INPUT elements are required to contain the alt attribute or use a LABEL.

Failure - INPUT Element, of Type TEXT, found at Line: 55, Column: 150
Failure - INPUT Element, of Type TEXT, found at Line: 55, Column: 238

Here's the output lines:

55: <TD class=inputCell style="WIDTH: 100%"><SPAN class=radInput_Default id=RadDatePicker1_dateInput_wrapper style="DISPLAY: block; WHITE-SPACE: nowrap"><INPUT class=radEnabledCss_Default id=RadDatePicker1_dateInput_text style="WIDTH: 100%"><INPUT id=RadDatePicker1_dateInput style="BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FLOAT: right; VISIBILITY: hidden; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: -18px 0px 0px; OVERFLOW: hidden; WIDTH: 0px; PADDING-TOP: 0px; HEIGHT: 0px; BORDER-RIGHT-WIDTH: 0px" name=RadDatePicker1$dateInput><INPUT id=RadDatePicker1_dateInput_ClientState type=hidden name=RadDatePicker1_dateInput_ClientState></SPAN></TD>

Thanks,
Rick

answered on 26 Mar 2008, 10:54 AM

AJAXEnabledWebSite7.zip

Hi Rick,

Please find attached a sample web application that demonstrates how to workaround this issue. Let me know if you have other question and/or problems.

Best wishes,
Plamen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center