New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Making Screen Readers Work with RadEditor Iframe Content Area

Environment

ProductRadEditor for ASP.NET AJAX
Versionall

Description

When navigating to the RadEditor content using a screen reader, the screen reader does not announce the contents of the editor. Instead, it reads the web page's title. This issue has been observed with Jaws and Windows Narrator screen readers and can be replicated on the Telerik demo site.

Cause

This problem is related to how browsers handle editable iframes, a component the RadEditor uses for its content area. It is notably an issue in browsers other than Firefox and can be demonstrated with any editable iframe, not just the RadEditor.

Solution

To resolve this issue, modify the source (src) value of the editable iframe from javascript:'<html></html>' to about:blank. This adjustment helps the screen reader correctly identify and read the contents of the RadEditor. Implement the solution by including the following JavaScript code in your page:

javascript
<script>
    Telerik.Web.UI.RadEditor.prototype._createIframe = function() {
        var elem = document.createElement('iframe');
        elem.frameBorder = "0";
        elem.src = "about:blank"; // Previously javascript:'<html></html>'
        var ifrStyle = elem.style;
        ifrStyle.width = "100%";
        ifrStyle.height = "2px";
        ifrStyle.margin = "0px";
        ifrStyle.padding = "0px";

        return elem;
    }
</script>
<telerik:RadEditor ContentAreaMode="Iframe" ID="RadEditor1" runat="server" EnableAriaSupport="true"></telerik:RadEditor>

Add this script to your webpage where the RadEditor is initialized. This modification ensures that the screen reader correctly focuses on and reads the RadEditor's content.

See Also