New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
WCAG 2.0 and Section 508 Accessibility Compliance

HHome
VView
IInsert
Paste
CutZ
CopyFP
Format
Clipboard
FFFS
Font
Paragraph
Normal
No Spacing
Heading 1
Heading 2
Title
Subtitle
Subtle Emphasis
Emphasis
Intense Emphasis
Strong
Quote
Intense Quote
Subtle Reference
Intense Reference
Book Title
List Paragraph
Styles
Find
FFind...
GGo to...
ReplaceSL
Editing
Zoom
WView Macros
RRecord Macro...
Macros
PictureF
Clip ArtSH
Shapes
SmartArtC
Chart
Illustrations
HyperlinkK bookmark
BookmarkRF cross reference
Cross-reference
Links
Validate with WAVE
About this demo
C#
VB
Download demo code files
Isolate this demo as a stand-alone application
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.
<%@ Page Language="C#"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<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">
                                <Items>
                                    <telerik:RibbonBarMenuItem Text="Triangle">
                                    </telerik:RibbonBarMenuItem>
                                    <telerik:RibbonBarMenuItem Text="Square">
                                    </telerik:RibbonBarMenuItem>
                                    <telerik:RibbonBarMenuItem Text="Rectangle">
                                    </telerik:RibbonBarMenuItem>
                                    <telerik:RibbonBarMenuItem Text="Hexagon">
                                    </telerik:RibbonBarMenuItem>
                                    <telerik:RibbonBarMenuItem Text="Circle">
                                    </telerik:RibbonBarMenuItem>
                                </Items>
                            </telerik:RibbonBarMenu>
                            <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

Submit a support ticket if you have an active license or trial
Post in the forum if you don't have access to support