Editor - Accessible UI

  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • BackgroundReset.css
<%@ Page Theme="Default" Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb"Inherits="Telerik.Web.Examples.Editor.AccessibleEditor.DefaultVB"  %>

<%@ 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">
            <CssFiles>
                <telerik:EditorCssFile Value="~/Editor/Examples/AccessibleEditor/Styles/styles.css" />
            </CssFiles>
        </telerik:AccessibleRadEditor>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?