Accessibility and RadEditor

Posted by: the telerik blogs, on 16 Jul 2008 | View original | Bookmarked: 0 time(s)

The followingblog post was written together with Rumen Jekov, whois the most experienced support officer at Telerik and has been supporting RadEditor for a number of years now. If you are a RadEditor user, and you contact us, chances are you will be receiving an answer from him.

The blog post discusses the accessibility features of RadEditor. While accessibility options were not considered important couple of years ago, things have changed - and will be changing even more in the future. For enterprize customers and governmental institutions accessibility is becoming a top priority, and we have gone at great lengths to add accessibility features to our products. Of course, this is an ongoing effort, rather than a one-time go. We keep adding accessibility features to the RadEditor, such as the ability to navigate tools with the keyboard, or switch focus from the content area to the toolbars and back using a keyboard shortcut. One accessibility feature that was added recently to RadEditor is (cross-browser) support for AccessKey.

We hope the following information will be helpful to all who want to learn more about the editor's accessibility features.

Accessibility and RadEditor

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). Verified with the HiSoftware's AccVerify 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's AccVerify 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 ( src=F11 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 (  src= - 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.

  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  src= - 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 Create New Skin.

Section 508  src=

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

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.

Category: XML | Other Posts: View all posts by this blogger | Report as irrelevant | View bloggers stats | Views: 3383 | Hits: 85

Similar Posts

  • Section 508 Compliant Renamed Accessibility Compliant more
  • RadCombobox with disabled javascript more
  • New online resources for the past four weeks (05/26/2008 - 06/20/2008) more
  • New online resources for the past three weeks (04/14/2008 - 05/04/2008) more
  • RadEditor... on more
  • RadControls on iPhone: Part 2 more
  • RadEditor and Community Server 2007 integration more
  • Building ASP.NET 2.0 Web Sites Using Web Standards more
  • Book Review: DOM Scripting more
  • New major version of AspLib component library more

News Categories

.NET | Agile | Ajax | Architecture | ASP.NET | BizTalk | C# | Certification | Data | DataGrid | DataSet | Debugger | DotNetNuke | Events | GridView | IIS | Indigo | JavaScript | Mobile | Mono | Patterns and Practices | Performance | Podcast | Refactor | Regex | Security | Sharepoint | Silverlight | Smart Client Applications | Software | SQL | VB.NET | Visual Studio | W3 | WCF | WinFx | WPF | WSE | XAML | XLinq | XML | XSD