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 Q2 2011 released 07/12/2011
select

Editor / Accessible Content

   
  
 
 
   

  • Accessibility Compliance and Support

    Telerik RadEditor satisfies the requirements for accessibility, which is a result of the following:

    1. The interface of the RadEditor is "Level A" accessible (in compliance with the W3C Web Accessibility Guidelines 1.0). The control is also Section 508 compliant. Verified with the HiSoftware Compliance Sheriff automated content compliance tool.
    2. RadEditor passes the check of the W3C accessibility validator (click the W3C logo Accessibility Verified! on one of the on-line examples). Verified with the HiSoftware Compliance Sheriff automated content compliance tool.
    3. Semantic rendering - helps the screen readers and alternative browsing devices to read and interpret the content easier. RadEditor offers title attributes for all tools.
    4. Keyboard Shortcuts - All tools and commands can be associated with shortcuts either with a property of the object or in the ToolsFile.xml file. You can find more information in the following help article: Keyboard Shortcuts.
    5. Toolbar optimization - when the ToolbarMode property is not set to "Default", but for example to "ShowOnFocus" then the editor's tools are initialized at the moment of displaying, but not on page load.
    6. ToolProviderID - this property helps significantly reduce the HTML markup and JSON sent from server to the client when multiple RadEditor objects with the same tools are used on the same page. The ToolProviderID should be set to the ID of another RadEditor, e.g.

      <telerik:radeditor runat="server" ID="RadEditor1"></telerik:radeditor>
      <telerik:radeditor runat="server" ID="RadEditor2" ToolProviderID="RadEditor1"></telerik:radeditor>
      <telerik:radeditor runat="server" ID="RadEditor3" ToolProviderID="RadEditor1"></telerik:radeditor>

    7. AccessKey - This accessibility property sets a keyboard shortcut key to access the content area of RadEditor, e.g.

      <telerik:radeditor runat="server" ID="RadEditor1" AccessKey="1"></telerik:radeditor>
      <telerik:radeditor runat="server" ID="RadEditor2" AccessKey="2"></telerik:radeditor>
      <telerik:radeditor runat="server" ID="RadEditor3" AccessKey="3"></telerik:radeditor>

      Note: In Internet Explorer use Alt + AccessKey to give focus to the element with a specified access key.
      To activate an access key in Firefox 2.0 use Shift + Alt + AccessKey.

    8. Full keyboard accessibility - RadEditor is a fully keyboard navigable component, including shortcuts to open and operate with drop-downs, tools and dialogs, achieving true accessibility.

      • F10 special key - focus goes on toolbars
      • Full toolbars navigation - use arrow keys or TAB / Ctrl-TAB key
      • Navigatable dropdowns - RadEditor also provides the ability to navigate dropdown items as well. Press enter to execute command.
    9. FullScreen mode (FullScreen modeF11 shortcut) - this feature maximizes your available space to better access, view and edit the editor's content

      Full Screen mode - click to enlarge 
    10. Zoom tool ( Zoom tool - Internet Explorer only) - changes the level of content magnification. You can use the 'zoom' dropdown to increase the zoom factor of all elements inside the content area and make them larger and much easier for reading and observation

      Zoom tool - click to enlarge
    11. Dialogs accessibility - ability to switch dialog tabs with keyboard and to navigate dialog controls with Tab. You can switch to the next tab by clicking TAB and after that Enter. You can navigate through the elements in the Dialog using the TAB key.

      Hyperlink Manager

    12. Optional accessibility settings according to W3C WAI and Section 508 Accessibility Guidelines - the content generated by the RadEditor can become accessible if the author fills in all required fields (marked with a special accessibility icon Section 508 - Section 508).
      • every content element, which is more complex than pure text, has additional accessibility fields for detailed description (e.g. tooltip, long description, etc.)
        Set Image Properties dialog - click to enlarge

      • new or existing tables can be enriched with special accessibility fields from the Table Wizard or from the Table Properties dialog

        Table Wizard Accessibility Tab - click to enlarge

    13. OnClientPasteHtml - The OnClientPasteHtml event is useful in scenarios where the developers need to examine or modify the HTMl to be pasted by an editor tool before it is inserted in the editor content area. Using this event the developer can enforce the creation of accessible HTML/XHTML content.

      Some common cases where the event can be used are:
      • Check whether user specified alt attribute for an image
      • Make modifications to a table being inserted (e.g. set a specific classname, etc)
      • Examine or modify a link before it is inserted
    14. Custom skins - RadEditor offers the ability to create custom skins with more accessible appearance (e.g. larger buttons, high-contrast colors, etc.). You can find more information how to make your own custom skin in the following help articles: Creating a custom skin and Creating Custom Skin for RadEditor.


    Section 508 Section 508

    The USA federal mandate requires that information technology be made accessible to people with disabilities. Much of Section 508 compliance concerns making Web sites, intranets, and web-enabled applications accessible. Section 508 compliance has since become a major prerequisite not only in government related software, but also in most enterprise and corporate software solutions.

    W3C Web Content Accessibility Guidelines 1.0

    The main goal of these guidelines is to encourage developers in creating applications providing accessible contents. However, adhering to these guidelines will also make Web content more accessible to all kind of users, using different devices and interfaces: desktop browser, voice browser, mobile phone, automobile-based personal computer, etc.

    In accordance with these guidelines W3C defines three levels of conformance developers may implement in order to provide some level of content compliance to their products:

    • Compliance Level "A"
    • Compliance Level "AA"
    • Compliance Level "AAA"

    For more details on W3C "Web Content Accessibility Guidelines 1.0" see http://www.w3.org/TR/WAI-WEBCONTENT/

    In our attempt to make our products content compliant, each web-control we develop and its QSF strive to obtain at least one of conformance levels listed above.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Theme="Default" Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Editor.AccessibilitySupport.DefaultVB" %>

    <%@ 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" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="VB" XhtmlCompliant="false" />
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
        <telerik:RadEditor runat="server" ID="RadEditor1" AccessKey="1" Height="400px">
            <ImageManager ViewPaths="~/Editor/Img/UserDir/Marketing,~/Editor/Img/UserDir/PublicRelations"
                UploadPaths="~/Editor/Img/UserDir/Marketing,~/Editor/Img/UserDir/PublicRelations"
                DeletePaths="~/Editor/Img/UserDir/Marketing,~/Editor/Img/UserDir/PublicRelations">
            </ImageManager>
        </telerik:RadEditor>
        <qsf:Footer runat="server" ID="Footer1" />
        </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-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451