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.
   
Isolate this demo as a stand-alone application

RadEditor is compliant with "Section 508" and Level AAA of the WCAG 2.0 Guidelines.

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:
    • F10 moves the focus from the edit area to the first toolbar button (standard MS Word shortcut).
    • Shift + Tab moves the focus from the edit area to the last toolbar button (standard MS Word shortcut).
    • Ctrl + Shift + T runs the TableWizard dialog which provides many table options.
    • Ctrl + H the Help dialog.
    • Alt + Heading weight to add different heading. For example, Alt + 2 is a shortcut for Heading 2.
    • Ctrl + Shift + N the Help dialog.
  • TAB enabled for navigation through the web page
  • Standard browser dialogs instead of RadWindow are used in order to allow screen readers such as JAWS to work better
  • 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).

<%@ Page 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>Telerik ASP.NET Example</title>
<link href="../Common/styles.css" rel="stylesheet" type="text/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 size-wide">
        <telerik:AccessibleRadEditor ID="RadEditor1" runat="server" ImageManager-ViewPaths="~/images/Northwind/Customers/" Width="800px">
        </telerik:AccessibleRadEditor>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?