Accessibility issues related to Telerik RadEditor Classic Render Mode

[Atul]

The tab toolbar items (Bold (B), italic (I), underlined (U), etc.) act like a Tab list (one can be selected), but when we navigate on it, the screen reader announces the role as a link, which is confusing.

Also, with the role link, the user is not getting enough information about which one is currently selected (visually with colour indication). The screen reader announces as 'Bold, link'.

The recording is attached in the zip file.

 

[Rumen]

You are welcome, Atul!

The small height issue when switching RadEditor to Lightweight render mode is a known behavior due to differences in how layouts are handled:

• Classic Render Mode: Uses table-based layout, which allows height inheritance and stretches to fit its container.
• Lightweight Render Mode: Uses div-based layout, which does not inherit height unless parent containers have explicit heights.

How to resolve the small height issue in Lightweight mode:

1. Set an explicit height for RadEditor:

   RadEditor1.RenderMode = RenderMode.Lightweight;
   RadEditor1.EnableAriaSupport = true;
   RadEditor1.Height = Unit.Pixel(400); // Adjust to your preferred height
   

2. Ensure all parent containers have defined heights: If you want to use height: inherit, make sure each parent container in your markup has a set height. Without this, the editor may render with minimal height.

3. You can also set the desired initial height and disable resizing:
   
   

   <telerik:RadEditor ID="RadEditor1" runat="server" EnableResize="false" Height="300px">
   </telerik:RadEditor>

4. You may also find interesting the automatic height resize: http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/managing-content/automatic-height-resize.
   
   

   <telerik:RadEditor ID="RadEditor1" runat="server" EnableResize="false" Height="300px" AutoResizeHeight="true">
   </telerik:RadEditor>

Next steps:

• If you have specific layout requirements or if these solutions do not resolve the issue, please share details about your container structure or any custom styles you're using. This will help me provide more targeted guidance.

 

 

Regards,
Rumen
Progress Telerik

[Rumen]

Hi Atul,

Thank you for the details and the recording.

The Classic render mode of RadEditor has been discontinued since 2015 (see the docs) and does not offer accessibility compliance with the latest accessibility standards and screen readers in 2025. This is the reason the toolbar items are announced as links instead of following proper ARIA roles, and why the selection state is not conveyed correctly to assistive technologies.

Our recommendation is to switch the RadEditor to RenderMode="Lightweight" and enable WAI-ARIA support, which provides improved accessibility and compliance with current standards:

RadEditor1.RenderMode = RenderMode.Lightweight;
RadEditor1.EnableAriaSupport = true;

You can find more details on enabling WAI-ARIA support here:
https://www.telerik.com/products/aspnet-ajax/documentation/controls/editor/accessibility-and-internationalization/standards-compliance/wai-aria-support 

This change will ensure that the toolbar items are announced correctly by screen readers, including their state, and will align your implementation with modern accessibility guidelines.

Regards,
Rumen
Progress Telerik

[Atul]

Thank you for your detailed response, Rumen.

When I changed the Editor to LightWeight render mode, the Editor window's height become very small