Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select
  • Rate / Review ▼

    • Give your Feedback:

      Rate this demo:


ColorPicker / Accessibility

Default configuration, AccessKey set to A:

No Color
PaletteModes set to All, AccessKey set to G:

No Color
PaletteModes set to RGBSliders, AccessKey set to C:

No ColorApply
ShowIcon set to true, AccessKey set to K:

Pick Color(Current Color is blank)
PaletteModes set to HSB, AccessKey set to E:

No ColorApply
PaletteModes set to HSV, AccessKey set to F:

No ColorApply

Accessibility validation

Validate with WAVE

WAVE is a free web accessibility evaluation tool, which checks for compliance issues with many of the Section 508 and WCAG guidelines. Have in mind that only humans can determine whether a web page is accessible - the above validation link is provided for the sake of completeness.


  • The interface of RadColorPicker for ASP.NET AJAX is level A accessible (in compliance with the W3C Web Accessibility Guidelines 2.0) as well as Section 508 compliant.

    RadColorPicker passes the check of the WAVE automated content compliance tool for Section 508 and WCAG 2.0 - Compliance Level A.

    Keyboard support

    You can use the keyboard to control RadColorPicker. You can focus the elements of the color picker using the Tab key or, alternatively, you can use a shortcut if you set the AccessKey property. Depending on the different configurations of RadColorPicker, the AccessKey gives focus to different elements in the color picker:

    • In case ShowIcon is set to true, the AccessKey gives focus to the button element that opens the popup palette. Once the focus is set to that button, press "Alt + DownArrow/UpArrow" or Enter to open/close the popup palette. After the color picker has received the focus, you can also use the Esc key to close the popup palette.
    • In case ShowIcon is set to false and the tabstrip of the color picked is rendered, the AccessKey gives focus to the first tab in the tabstrip. Pressing the Tab key navigates forward amongst tabs. Shift + Tab navigates backwards. When one of the tabs in the tabstrip is focused, you can use the Enter key to select the active tab.
    • In case ShowIcon is set to false and PaletteModes is set to WebPalette, the AccessKey gives focus to the first color box in the palette. When the focus is in the WebPalette palette, you can use the DownArrow/UpArrow/LeftArrow/RightArrow key to navigate amongst color boxes. Pressing Enter will select the active color.
    • In case ShowIcon is set to false and PaletteModes is set to RGBSliders, HSV or HSB, the AccessKey gives focus to the R input in the palette. Pressing the Tab key will navigate forward amongst inputs. "Shift + Tab" will navigate backwards. Enter will set the current color as selected.

    Once the focus is set to one of the elements in the color picker, you can use the Tab key to iterate through all the elements in the color picker. In case you have specified a TabIndex for the color picker, this TabIndex is applied to all elements in the control.

    Press "Alt + AccessKey" ("Shift + Alt + AccessKey" for Firefox and "Shift + Esc" and then AccessKey for Opera) or use Tab to focus the elements of a color picker. Press Tab to move the focus to the next element in the color picker. Note: By default tab-access is disabled in Safari. To enable it, check "Preferences > Advanced > Press tab to highlight each item on a page".

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.ColorPicker.Accessibility.DefaultCS"
        CodeFile="DefaultCS.aspx.cs" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server" />
    </head>
    <body class="BODY">
        <form id="form1" method="post" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" ShowSkinChooser="false" />
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        
        <div style="width: 370px; margin-bottom: 20px; float: left;">
            <strong>Default configuration</strong>, AccessKey set to <strong>A</strong>:<br /><br />
            <telerik:RadColorPicker runat="server" ID="RadColorPicker1" Preset="None" Columns="18" AccessKey="A" />
        </div>
        <div style="width: 370px; float: left; margin-bottom: 20px;">
            <strong>PaletteModes</strong> set to <strong>All</strong>, AccessKey set to <strong>G</strong>:<br /><br />
            <telerik:RadColorPicker runat="server" ID="RadColorPicker2" Preset="None" Columns="18" PaletteModes="All" AccessKey="G" />
        </div>
        <div class="qsfClearFloat">
            <!-- -->
        </div>
        <div style="width: 370px; float: left;margin-bottom: 20px;">
            <strong>PaletteModes</strong> set to <strong>RGBSliders</strong>, AccessKey set to <strong>C</strong>:<br /><br />
            <telerik:RadColorPicker runat="server" ID="RadColorPicker3" Preset="None" PaletteModes="RGBSliders" AccessKey="C" />
        </div>
        <div style="width: 370px; float: left; margin-bottom: 20px;">
            <strong>ShowIcon</strong> set to <strong>true</strong>, AccessKey set to <strong>K</strong>:<br /><br />
            <telerik:RadColorPicker runat="server" ID="RadColorPicker4" Preset="None" Columns="18" ShowIcon="true" PaletteModes="All" AccessKey="K" />
        </div>
        <div class="qsfClearFloat">
            <!-- -->
        </div>
        <div style="width: 370px; float: left;">
            <strong>PaletteModes</strong> set to <strong>HSB</strong>, AccessKey set to <strong>E</strong>:<br /><br />
            <telerik:RadColorPicker runat="server" ID="RadColorPicker5" Preset="None" PaletteModes="HSB" AccessKey="E" />
        </div>
        <div style="width: 370px; float: left; margin-bottom: 20px;">
            <strong>PaletteModes</strong> set to <strong>HSV</strong>, AccessKey set to <strong>F</strong>:<br /><br />
            <telerik:RadColorPicker runat="server" ID="RadColorPicker6" Preset="None" PaletteModes="HSV" AccessKey="F" />
        </div>
        <div class="qsfClearFloat">
            <!-- -->
        </div>
        <div style="padding-top: 15px;">
            <h3>Accessibility validation</h3>
            <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Validate with WAVE</asp:LinkButton>
            <p>
                WAVE is a free web accessibility evaluation tool, which checks for compliance issues
                with many of the Section 508 and WCAG guidelines. Have in mind that
                only humans can determine whether a web page is accessible - the above validation
                link is provided for the sake of completeness.</p>
        </div>
        <qsf:Footer runat="server" ID="Footer1" ShowCodeViewer="true" />
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451