RibbonBar - WCAG 2.0 and Section 508 Accessibility Compliance

  • HHome
  • VView
  • IInsert
VpastePaste XcutCutZcopyCopyFPformat painterFormat
Clipboard
ALalign leftACalign centerARalign rightAJjustify
UulNol
AOdecrease indentAIincrease indent
Paragraph
L
Styles
FDfindFind 
  • FfindFind...
  • GgoGo to...
RreplaceReplaceSLselectSelect 
Editing
MmacrosMacros 
  • WmacrosView Macros
  • Rmacros recordRecord Macro...
Macros
PpicturePictureFclipartClip ArtSHshapesShapes 
Msmart artSmartArtCchartChart
Illustrations
IlinkHyperlinkKbookmarkBookmarkRFcross referenceCross-reference
Links
Validate with WAVE
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Telerik RadRibbonBar for ASP.NET AJAX is compliant with Section 508 and level A of the W3C Web Accessibility Guidelines 2.0. Run WAVE, the automated web accessibility evaluation tool, to check the accessibility level of the control yourself.

This example shows the accessibility features of RadRibbonBar for ASP.NET AJAX. RadRibbonBar has keyboard navigation enabled as well as tooltips for images with the ImageAltText property.

Press ALt + R to activate the RibbonBar and show the key hints.

The control is also visible in Windows High Contrast mode when using Simple skin.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="C#"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!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">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <telerik:RadRibbonBar RenderMode="Lightweight" ID="RadRibbonBar1" runat="server" TabIndex="1" Skin="Windows7">
            <Tabs>
                <telerik:RibbonBarTab Text="Home" AccessKey="H">
                    <telerik:RibbonBarGroup Text="Clipboard">
                        <Items>
                            <telerik:RibbonBarMenu Size="Large" Text="Paste" ImageAltText="paste"
                                ImageUrl="../../Images/icons/home/Paste.png" AccessKey="V">
                                <Items>
                                    <telerik:RibbonBarMenuItem Text="Paste" ImageAltText="paste"
                                        ImageUrl="../../Images/icons/home/Paste.png" AccessKey="P" />
                                    <telerik:RibbonBarMenuItem Text="Paste Special..." ImageAltText="paste"
                                        ImageUrl="../../Images/icons/home/Paste.png" AccessKey="S" />
                                </Items>
                            </telerik:RibbonBarMenu>
                            <telerik:RibbonBarButton Size="Medium" Text="Cut" ImageAltText="cut"
                                ImageUrl="../../Images/icons/home/Cut.png" AccessKey="X" />
                            <telerik:RibbonBarButton Size="Medium" Text="Copy" ImageAltText="copy"
                                ImageUrl="../../Images/icons/home/Copy.png" AccessKey="Z" />
                            <telerik:RibbonBarButton Size="Medium" Text="Format" ImageAltText="format painter"
                                ImageUrl="../../Images/icons/home/Format_Painter.png" AccessKey="FP" />
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Font">
                        <Items>
                            <telerik:RibbonBarControlGroup Orientation="Vertical">
                                <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                    <telerik:RibbonBarDropDown Width="97" AccessKey="FF">
                                        <Items>
                                            <telerik:RibbonBarListItem Text="Arial" />
                                            <telerik:RibbonBarListItem Text="Calibri (body)" Selected="true" />
                                            <telerik:RibbonBarListItem Text="Comic Sans" />
                                            <telerik:RibbonBarListItem Text="Tahoma" />
                                            <telerik:RibbonBarListItem Text="Verdana" />
                                        </Items>
                                    </telerik:RibbonBarDropDown>
                                    <telerik:RibbonBarComboBox Width="40" AccessKey="FS">
                                        <Items>
                                            <telerik:RibbonBarListItem Text="8" />
                                            <telerik:RibbonBarListItem Text="9" />
                                            <telerik:RibbonBarListItem Text="10" Selected="true" />
                                            <telerik:RibbonBarListItem Text="11" />
                                            <telerik:RibbonBarListItem Text="12" />
                                            <telerik:RibbonBarListItem Text="14" />
                                            <telerik:RibbonBarListItem Text="16" />
                                            <telerik:RibbonBarListItem Text="18" />
                                            <telerik:RibbonBarListItem Text="20" />
                                            <telerik:RibbonBarListItem Text="22" />
                                            <telerik:RibbonBarListItem Text="24" />
                                            <telerik:RibbonBarListItem Text="26" />
                                            <telerik:RibbonBarListItem Text="28" />
                                        </Items>
                                    </telerik:RibbonBarComboBox>
                                </telerik:RibbonBarControlGroup>
                                <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Bold" ImageAltText="bold"
                                        ImageUrl="../../Images/icons/home/font/Bold.png" AccessKey="1" />
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Italic" ImageAltText="italic"
                                        ImageUrl="../../Images/icons/home/font/Italic.png" AccessKey="2" />
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Underline" ImageAltText="underline"
                                        ImageUrl="../../Images/icons/home/font/Underline.png" AccessKey="3" />
                                    <telerik:RibbonBarToggleButton Size="Small" Text="Strikethrough" ImageAltText="strike"
                                        ImageUrl="../../Images/icons/home/font/Strike.png" AccessKey="4" />
                                    <telerik:RibbonBarToggleList>
                                        <ToggleButtons>
                                            <telerik:RibbonBarToggleButton Size="Small" Text="Superscript" ImageAltText="superscript"
                                                ImageUrl="../../Images/icons/home/font/Superscript.png" AccessKey="5" />
                                            <telerik:RibbonBarToggleButton Size="Small" Text="Subscript" ImageAltText="subscript"
                                                ImageUrl="../../Images/icons/home/font/Subscript.png" AccessKey="6" />
                                        </ToggleButtons>
                                    </telerik:RibbonBarToggleList>
                                </telerik:RibbonBarControlGroup>
                                <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                    <telerik:RibbonBarMenu Size="Small" Text="Change Case" ImageUrl="../../Images/icons/home/font/Change_Case.png" ImageAltText="change case" AccessKey="7">
                                        <Items>
                                            <telerik:RibbonBarMenuItem Text="Sentence case." AccessKey="S">
                                            </telerik:RibbonBarMenuItem>
                                            <telerik:RibbonBarMenuItem Text="lowercase" AccessKey="L">
                                            </telerik:RibbonBarMenuItem>
                                            <telerik:RibbonBarMenuItem Text="UPPERCASE" AccessKey="U">
                                            </telerik:RibbonBarMenuItem>
                                            <telerik:RibbonBarMenuItem Text="Capitalize Each Word" AccessKey="C">
                                            </telerik:RibbonBarMenuItem>
                                            <telerik:RibbonBarMenuItem Text="tOGGLE cASE" AccessKey="T">
                                            </telerik:RibbonBarMenuItem>
                                        </Items>
                                    </telerik:RibbonBarMenu>
                                    <telerik:RibbonBarButton Size="Small" Text="Grow Font" ImageUrl="../../Images/icons/home/font/Grow_Font.png"
                                        AccessKey="FG"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Size="Small" Text="Shring Font" ImageUrl="../../Images/icons/home/font/Shrink_Font.png"
                                        AccessKey="FK"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Size="Small" Text="Clear Formatting" ImageUrl="../../Images/icons/home/font/Clear_Formatting.png"
                                        AccessKey="E"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarColorPicker ImageUrl="../../Images/icons/home/font/Font_Color.png" AccessKey="FC">
                                    </telerik:RibbonBarColorPicker>
                                </telerik:RibbonBarControlGroup>
                            </telerik:RibbonBarControlGroup>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Paragraph">
                        <Items>
                            <telerik:RibbonBarButtonStrip>
                                <Buttons>
                                    <telerik:RibbonBarButton Text="Align Left" ImageAltText="align left"
                                        ImageUrl="../../Images/icons/home/paragraph/AlignLeft.png" AccessKey="AL" />
                                    <telerik:RibbonBarButton Text="Align Center" ImageAltText="align center"
                                        ImageUrl="../../Images/icons/home/paragraph/AlignCenter.png" AccessKey="AC" />
                                    <telerik:RibbonBarButton Text="Align Right" ImageAltText="align right"
                                        ImageUrl="../../Images/icons/home/paragraph/AlignRight.png" AccessKey="AR" />
                                    <telerik:RibbonBarButton Text="Justify" ImageAltText="justify"
                                        ImageUrl="../../Images/icons/home/paragraph/Justify.png" AccessKey="AJ" />
                                </Buttons>
                            </telerik:RibbonBarButtonStrip>
                            <telerik:RibbonBarButtonStrip>
                                <Buttons>
                                    <telerik:RibbonBarButton Size="Small" Text="Unordered List" ImageAltText="ul" AccessKey="U"
                                        ImageUrl="../../Images/icons/home/paragraph/UL.png" />
                                    <telerik:RibbonBarButton Size="Small" Text="Numbered List" ImageAltText="ol" AccessKey="N"
                                        ImageUrl="../../Images/icons/home/paragraph/OL.png" />
                                </Buttons>
                            </telerik:RibbonBarButtonStrip>
                            <telerik:RibbonBarButtonStrip>
                                <Buttons>
                                    <telerik:RibbonBarButton Size="Small" Text="Decrease Indent" ImageAltText="decrease indent"
                                        AccessKey="AO" ImageUrl="../../Images/icons/home/paragraph/DecrIndent.png" />
                                    <telerik:RibbonBarButton Size="Small" Text="Increase Indent" ImageAltText="increase indent"
                                        AccessKey="AI" ImageUrl="../../Images/icons/home/paragraph/IncrIndent.png" />
                                </Buttons>
                            </telerik:RibbonBarButtonStrip>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Styles">
                        <Items>
                            <telerik:RibbonBarGallery ItemHeight="50px" ItemWidth="60px" Columns="3" ExpandedColumns="4" AccessKey="L">
                                <telerik:RibbonBarGalleryCategory>
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/icons/home/styles/Normal.png" Text="Normal" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/icons/home/styles/NoSpacing.png" Text="No Spacing" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/icons/home/styles/Heading1.png" Text="Heading 1" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/icons/home/styles/Heading2.png" Text="Heading 2" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/icons/home/styles/Title.png" Text="Title" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/icons/home/styles/Subtitle.png" Text="Subtitle" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/icons/home/styles/SubEmphasis.png" Text="Subtle Emphasis" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/icons/home/styles/Emphasis.png" Text="Emphasis" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/icons/home/styles/IntEmphasis.png" Text="Intense Emphasis" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/icons/home/styles/Strong.png" Text="Strong" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/icons/home/styles/Quote.png" Text="Quote" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/icons/home/styles/IntQuote.png" Text="Intense Quote" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/icons/home/styles/SubReference.png" Text="Subtle Reference" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/icons/home/styles/IntReference.png" Text="Intense Reference" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/icons/home/styles/BookTitle.png" Text="Book Title" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="../../Images/icons/home/styles/ListParagraph.png" Text="List Paragraph" />
                                </telerik:RibbonBarGalleryCategory>
                            </telerik:RibbonBarGallery>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Editing">
                        <Items>
                            <telerik:RibbonBarSplitButton Size="Medium" Text="Find" AccessKey="FD" ImageAltText="find"
                                ImageUrl="../../Images/icons/home/Find.png">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="Find..." AccessKey="F" ImageAltText="find"
                                        ImageUrl="../../Images/icons/home/Find.png" />
                                    <telerik:RibbonBarButton Text="Go to..." AccessKey="G" ImageAltText="go"
                                        ImageUrl="../../Images/icons/home/Go.png" />
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                            <telerik:RibbonBarButton Size="Medium" Text="Replace" AccessKey="R" ImageAltText="replace"
                                ImageUrl="../../Images/icons/home/Replace.png" />
                            <telerik:RibbonBarMenu Size="Medium" Text="Select" AccessKey="SL" ImageAltText="select"
                                ImageUrl="../../Images/icons/home/Select.png">
                                <Items>
                                    <telerik:RibbonBarMenuItem Text="Select All" ImageAltText="select all"
                                        ImageUrl="../../Images/icons/home/Select_All.png" AccessKey="A" />
                                    <telerik:RibbonBarMenuItem Text="Select Objects" ImageAltText="select"
                                        ImageUrl="../../Images/icons/home/Select.png" AccessKey="S" />
                                </Items>
                            </telerik:RibbonBarMenu>
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
                <telerik:RibbonBarTab Text="View" AccessKey="V">
                    <telerik:RibbonBarGroup Text="Zoom">
                        <Items>
                            <telerik:RibbonBarToggleList>
                                <ToggleButtons>
                                    <telerik:RibbonBarToggleButton Size="Large" Text="Zoom" AccessKey="Q" ImageAltText="zoom"
                                        ImageUrl="../../Images/icons/view/Zoom.png" />
                                    <telerik:RibbonBarToggleButton Size="Large" Text="100%" AccessKey="J" ImageAltText="100"
                                        ImageUrl="../../Images/icons/view/100.png" />
                                </ToggleButtons>
                            </telerik:RibbonBarToggleList>
                            <telerik:RibbonBarToggleList>
                                <ToggleButtons>
                                    <telerik:RibbonBarToggleButton Size="Medium" Text="One Page" AccessKey="1" ImageAltText="one page"
                                        ImageUrl="../../Images/icons/view/One_Page.png" />
                                    <telerik:RibbonBarToggleButton Size="Medium" Text="Two Pages" AccessKey="2" ImageAltText="two pages"
                                        ImageUrl="../../Images/icons/view/Two_Pages.png" />
                                    <telerik:RibbonBarToggleButton Size="Medium" Text="Page Width" AccessKey="I" ImageAltText="page width"
                                        ImageUrl="../../Images/icons/view/Page_Width.png" />
                                </ToggleButtons>
                            </telerik:RibbonBarToggleList>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Macros">
                        <Items>
                            <telerik:RibbonBarSplitButton Size="Large" Text="Macros" AccessKey="M" ImageAltText="macros"
                                ImageUrl="../../Images/icons/view/Macros.png">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="View Macros" AccessKey="W" ImageAltText="macros"
                                        ImageUrl="../../Images/icons/view/Macros.png" />
                                    <telerik:RibbonBarButton Text="Record Macro..." AccessKey="R" ImageAltText="macros record"
                                        ImageUrl="../../Images/icons/view/Macros_Record.png" />
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
                <telerik:RibbonBarTab Text="Insert" AccessKey="I">
                    <telerik:RibbonBarGroup Text="Illustrations">
                        <Items>
                            <telerik:RibbonBarButton Size="Large" Text="Picture" ImageAltText="picture"
                                ImageUrl="../../Images/icons/insert/Picture.png" AccessKey="P" />
                            <telerik:RibbonBarButton Size="Large" Text="Clip Art" ImageAltText="clipart"
                                ImageUrl="../../Images/icons/insert/Clipart.png" AccessKey="F" />
                            <telerik:RibbonBarMenu Size="Large" Text="Shapes" ImageAltText="shapes"
                                ImageUrl="../../Images/icons/insert/Shapes.png" AccessKey="SH" />
                            <telerik:RibbonBarButton Size="Large" Text="SmartArt" ImageAltText="smart art"
                                ImageUrl="../../Images/icons/insert/SmartArt.png" AccessKey="M" />
                            <telerik:RibbonBarButton Size="Large" Text="Chart" ImageAltText="chart"
                                 ImageUrl="../../Images/icons/insert/Chart.png" AccessKey="C" />
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Links">
                        <Items>
                            <telerik:RibbonBarButton Size="Large" Text="Hyperlink" ImageAltText="link"
                                ImageUrl="../../Images/icons/insert/Link.png" AccessKey="I" />
                            <telerik:RibbonBarButton Size="Large" Text="Bookmark" ImageAltText="bookmark"
                                ImageUrl="../../Images/icons/insert/Bookmark.png" AccessKey="K" />
                            <telerik:RibbonBarButton Size="Large" Text="Cross-reference" ImageAltText="cross reference"
                                ImageUrl="../../Images/icons/insert/Cross_reference.png" AccessKey="RF" />
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
            </Tabs>
        </telerik:RadRibbonBar>
    </div>

    <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click" Text="Validate with WAVE" />

    <script runat="server">
        protected void LinkButton1_Click(object sender, EventArgs e)
        {
            Response.Redirect("http://wave.webaim.org/report?url=" + Page.Request.Url.AbsoluteUri);
        }
    </script>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?