New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WCAG 2.0 and Section 508 Accessibility Compliance

  • HHome
  • VView
  • IInsert
VpastePaste 
XcutCutZcopyCopyFPformat painterFormat
Clipboard
FFFS
1bold2italic3underline4strike5superscript6subscript
7change case 
FGItem ImageFKItem ImageEItem ImageFCimage
Font
ALalign leftACalign centerARalign rightAJjustify
UulNol
AOdecrease indentAIincrease indent
Paragraph
L
  • imageNormal
  • imageNo Spacing
  • imageHeading 1
  • imageHeading 2
  • imageTitle
  • imageSubtitle
  • imageSubtle Emphasis
  • imageEmphasis
  • imageIntense Emphasis
  • imageStrong
  • imageQuote
  • imageIntense Quote
  • imageSubtle Reference
  • imageIntense Reference
  • imageBook Title
  • imageList Paragraph
Styles
FDfindFind 
  • FfindFind...
  • GgoGo to...
RreplaceReplaceSLselectSelect 
Editing
QzoomZoomJ100100%1one pageOne Page2two pagesTwo PagesIpage widthPage Width
Zoom
MmacrosMacros 
  • WmacrosView Macros
  • Rmacros recordRecord Macro...
Macros
PpicturePictureFclipartClip ArtSHshapesShapes 
Msmart artSmartArtCchartChart
Illustrations
IlinkHyperlinkKbookmarkBookmarkRFcross referenceCross-reference
Links
Validate with WAVE

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>
<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