RadButton 508 Accessibility

4 posts, 0 answers
  1. Sandeep
    Sandeep avatar
    17 posts
    Member since:
    May 2011

    Posted 20 Apr 2012 Link to this post

    I uses a RadButton with Icon. This Icon RadButton does not access according 508 UI standard.

    <telerik:RadButton ID="rbSearchButton" runat="server" >
    <
    Icon PrimaryIconUrl="Images/search.png" PrimaryIconLeft="5"/>
    </
    telerik:RadButton>


    So Please suggest to make it 508 Enable.

    Thanks. 
  2. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 21 Apr 2012 Link to this post

    Hello,

    To be section 508 compliant the image should be rendered with a background-image style as shown in the following demo on the subject: Accessibility ,e.g.

    <Icon SecondaryIconCssClass="rbSave" />

    All the best,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sandeep
    Sandeep avatar
    17 posts
    Member since:
    May 2011

    Posted 23 Apr 2012 Link to this post

    Sorry Rumen, It is not working.

    It is accessible if I define text property of Button. but I want use a image without text as a Button.

    Please suggest.

    Thanks.
  5. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 23 Apr 2012 Link to this post

    Hi,

    As explained in my earlier response, the validation will pass if the image is defined with a background-image css property.

    You can see that

    <telerik:RadButton ID="rbSearchButton" runat="server" >
    <
    Icon PrimaryIconUrl="Images/search.png" PrimaryIconLeft="5"/>
    </
    telerik:RadButton>

    will pass the Accessibility validation of Wave Accessibility Evaluation tool in the following video: http://screencast.com/t/Rrh4WxPk because the icon is rendered using background-image CSS property, but not a real <img> tag, which is not accessible.


    Here is the markup of my test page:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
        <head id="Head1" runat="server">
            <style type="text/css">
                .myIconClass { background-image: url(e.gif); }
            </style>
        </head>
        <body>
            <form id="form1" runat="server">
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
     
                <telerik:RadButton ID="rbSearchButton" runat="server" >
                    <Icon PrimaryIconUrl="e.gif" PrimaryIconLeft="5"/>
                </telerik:RadButton>
                <telerik:RadButton ID="RadButton1" runat="server" >
                    <Icon PrimaryIconCssClass="myIconClass" PrimaryIconLeft="5"/>
                </telerik:RadButton>
            </form>
        </body>
    </html>


    Regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top