Editor

Controls

All Controls

Editor

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Editor - Accessible UI

RadEditor - HTML WYSIWYG Editor. MS Word-like content editing experience thanks to a rich set of formatting tools, dropdowns, dialogs, system modules and built-in spell-check.
RadEditor's components - toolbar, content area, modes and modules
   
Toolbar's wrapper  
Content area wrapper
RadEditor's bottom area: Design, Html and Preview modes, Statistics module and resize handle.
It contains RadEditor's Modes/views (HTML, Design and Preview), Statistics and Resizer
Editor Mode buttonsStatistics moduleEditor resizer
 
 
RadEditor's Modules - special tools used to provide extra information such as Tag Inspector, Real Time HTML Viewer, Tag Properties and other.
   

Accessible UI

The interface of the RadEditor is "Level A" accessible (in compliance with the W3C Web Accessibility Guidelines 1.0). Verified with the HiSoftware Compliance Sheriff automated content compliance tool.

RadEditor is also Section 508 compliant.

This example demonstrates the new AccessibleRadEditor control. The control offers an accessible UI, which is easier to navigate for blind or partially sighted people. The differences from the normal RadEditor control are mainly in the editor toolbar and the Image Manager dialog. For more specific information, see the list below.

An accessibility compliance check is included at the end of the editor toolbar. The check is performed using HiSoftware's Compliance Sheriff tool. To use this feature on your web application, you will need to register on HiSoftware's web site and get an API Key.

  • Shortcuts
    • To move from edit area to the FIRST toolbar button press F10 (standard MS Word shortcut)
    • To move from edit area to the LAST toolbar button press SHIFT + TAB (standard shortcut)
    • To run the TableWizard dialog which provides many table options run the shortcut - CTRL+SHIFT+T
    • To run the Help dialog press CTRL + H.
    • To close a dialog - such as the Help or the Image Manager press Alt+F4
    • Shortcuts for different heading added (Alt + heading weight, e.g Heading 2 is Alt+2)
    • To clear formatting press CTRL+SHIFT+N
  • Standard browser dialogs instead of RadWindow are used in order to allow screen readers such as JAWS to work better
  • TAB enabled for navigation through the web page
  • A new tool is added at the first position in the toolbar and when pressed it moves the cursor into the edit area
  • Labels are added for select elements which makes them easily and better readable by screen readers (e.g JAWS)
  • The standard file explorer control in the Image Manager is replaced by a more accessible version using simple dropdowns and listboxes for browsing the files on the server.

The demonstrated AccessibleRadEditor has a limited set of tools focused on basic editing functionality but it still provides a lot of flexibility (tables, headings, images, etc).

C# VB
Show code in new window Demo isolation steps
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.AccessibleEditor.DefaultCS"  %>

<%@ 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>Accessible UI in ASP.NET Editor | RadEditor Demo</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <telerik:AccessibleRadEditor ID="RadEditor1" runat="server" ImageManager-ViewPaths="~/Img/Northwind/Customers/" Width="680px">
     </telerik:AccessibleRadEditor>
    </form>
</body>
</html>