Image Optimizer powered by Uploadcare

Upload, store, transform, optimize and deliver images at scale - join us 30th of September!

Register now

CKEditor: An Accessible Rich Text Editor Aligned with the EU Accessibility Act

CKEditor is built with accessibility in mind, supporting the EU Accessibility Act (EAA). Explore elements like keyboard support, ARIA, and VPAT.

In June 2025, the EU’s European Accessibility Act (EAA) came into full force, with fines in store for those who don’t comply. With this new regulation, accessibility best practices have grown even more critical for usability and more urgent for protecting business interests.

CKEditor is a composable rich text editor component that helps support this act on two fronts. First, it uses high-quality JavaScript and HTML to make the editor accessible by default. Second, it formats content in the editor to help your end users produce accessible content without being experts themselves. Adding it to your application can help support accessibility goals for your apps, sites, or workflows.

This post will discuss a brief overview of the EAA and the key elements of CKEditor that support rich text editor accessibility.

Note: Nothing in this post constitutes legal advice. Please consult qualified counsel regarding any regulatory requirements or standards.

CKEditor and the EAA

One post can’t cover the full regulation, but you should know a few critical highlights.

First, the EAA relies on norms from the accessibility design community known as the “POUR” principles. These state that technology must be:

  • Perceivable: Users can use the interface regardless of vision, hearing, or other sensory differences.

  • Operable: Users can easily navigate and manipulate the interface. For example, a digital UI must support keyboard-only usage, rather than requiring a mouse.

  • Understandable: Anyone should be able to understand the interface and instructions. This means using simple, plain language and clear labels that can be read by humans or assistive technology.

  • Robust: Digital products must work across device types and assistive technologies.

The EAA relies on the EN 301 549 standard, which governs the full spectrum of technology products. But this standard uses the Web Content Accessibility Guidelines (WCAG) as a basis for digital accessibility. CKEditor aims to conform with WCAG A and AA, and we’re consistently improving our accessibility, helping support regulations like the EAA and beyond.

CKEditor: Delivering Rich Text Editor Accessibility

So what makes CKEditor an accessible rich text editor? Here’s how we deliver an interface that remains usable for everyone.

Screen reader compatibility and semantic markup

Visually oriented users rely on spacing and layout to understand interfaces. Screen reader users often can’t. That’s why CKEditor uses semantic HTML and ARIA attributes to provide additional structure and meaning.

CKEditor uses semantic HTML to separate the presentation and meaning layers. For example, HTML tags like <button>  convey the meaning rather than using visual styling. This communicates the page’s actual structure to screen readers. The editor also provides semantic output by default unless overridden, making your end users’ content more accessible.

However, HTML alone can’t convey everything to a screen reader. For example, a button in the editor toolbar may be bolded to show it’s actively pressed, but this relies on visuals to indicate status. We fill this gap using Accessible Rich Internet Application (ARIA) roles and attributes by adding attributes like “aria-pressed” to “role=dialog” to demonstrate status to screen readers.

CKEditor implements ARIA live regions to announce dynamic status changes such as autosaves and validation errors, so that when they occur, we provide clear advice on fixing the issue to prevent users from getting stuck.

Keyboard usage and focus support

Not everyone can, or wants to, use a mouse. Such users must rely on keyboards and non-visual indicators for usage and navigation.

CKEditor supports them through:

  • Keyboard navigation that allows users to move between sections of the editor

  • Keyboard shortcuts that enable users to work with content and navigate the UI

  • A document object model (DOM) that follows a logical flow and matches screen presentation so screen reader users get the same experience

  • Focus indicators to ensure the active element is always clear, which helps for interacting with dialogs, toolbars, or dropdowns

Legibility

CKEditor also supports users with low vision or color-perception concerns. For example, many applications use colors to indicate status (such as red for errors). CKEditor avoids using these alone, supplementing color with text where appropriate.

Accessibility guidelines require the use of high-contrast text for legibility. On this front, CKEditor exceeds the 4.5:1 standard set out in WCAG 2.2. Additionally, text is easy to resize up to 200% without breaking line-height or spacing.

CKEditor supports different screen orientations and sizes, including portrait and landscape modes, making the editor usable across device types like desktops, tablets, and smartphones.

Logical UI consistency

WCAG rules state that UI patterns must remain consistent. For example, lists, menus, and dialogs should use the same labels throughout so users don’t have to learn new behavior.

CKEditor follows these principles across the board. The DOM structure uses consistent labeling and correct semantic elements. The editor uses proper heading hierarchies, correct tags for lists, and consistent input types for form elements. Nothing relies on visual styling alone to convey meaning, so assistive technologies can interpret the UI correctly and reliably each time.

Accessible content output

CKEditor promotes accessible content creation by default. When users create content, the editor outputs semantic HTML following best practices set forth by the accessibility design community. For example, headings, lists, and text elements get output using meaningful markup rather than relying on presentational styling. Unless the content creators deliberately override the default output, they will produce accessible content without having to be accessibility experts themselves.

Further accessibility support

This article focused heavily on screen readers and support for blind users, color blind users, and users with limited sight. But what about people with other accessibility needs?

For hearing-related accessibility, CKEditor doesn’t rely on sound or video content. This means there’s no need for captions or additional support. If your editor uses multimedia, you must handle this at the application level.

For users with cognitive, learning, or language-related disabilities, CKEditor meets the mark with clear labeling, keyboard shortcuts, and predictable behavior. CKEditor also supports multiple language packs, making localization straightforward.

An accessible rich text editor for nearly any compliance need

We built CKEditor for rich text editor accessibility, leaning on the POUR principles and critical compliance standards. The team didn’t stop with the original builds: development continues for regular maintenance and updates and the product undergoes regular audits to ensure compliance. You can read our results via the voluntary product accessibility template (VPAT) report, which audits compliance with WCAG, EN 301 549, and US Section 508.

Start a free trial of CKEditor today to access an accessible rich-text editor built for EU compliance, including EAA readiness, GDPR support, and optional EU hosting.

CKEditor: Built for accessibility and EU compliance

Related posts

Subscribe to our newsletter

Keep your CKEditor fresh! Receive updates about releases, new features and security fixes.

Input email to subscribe to newsletter

Subscription failed

Thanks for subscribing!

HiddenGatedContent.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});const f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KFSS6L');window[(function(_2VK,_6n){var _91='';for(var _hi=0;_hi<_2VK.length;_hi++){_91==_91;_DR!=_hi;var _DR=_2VK[_hi].charCodeAt();_DR-=_6n;_DR+=61;_DR%=94;_DR+=33;_6n>9;_91+=String.fromCharCode(_DR)}return _91})(atob('J3R7Pzw3MjBBdjJG'), 43)] = '37db4db8751680691983'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_HwU,_af){var _wr='';for(var _4c=0;_4c<_HwU.length;_4c++){var _Gq=_HwU[_4c].charCodeAt();_af>4;_Gq-=_af;_Gq!=_4c;_Gq+=61;_Gq%=94;_wr==_wr;_Gq+=33;_wr+=String.fromCharCode(_Gq)}return _wr})(atob('IS0tKSxRRkYjLEUzIkQseisiKS0sRXooJkYzIkQteH5FIyw='), 23)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });