Syncfusion AI Assistant

How can I help you?

Accessibility in the Vue Markdown Editor Component

27 Mar 202514 minutes to read

The Vue Markdown Editor is designed to be fully accessible, following WAI-ARIA specifications and implementing ARIA roles, states, and properties. These accessibility features ensure that the editor is user-friendly for individuals relying on assistive technologies (AT) or keyboard navigation.

The following table summarizes the accessibility support of the Markdown Editor component:

Accessibility Criteria Compatibility
WCAG 2.2 Support Yes
Section 508 Support Yes
Screen Reader Support Yes
Right-To-Left Support Yes
Color Contrast Intermediate
Mobile Device Support Yes
Keyboard Navigation Support Yes
Accessibility Checker Validation Intermediate
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.

ARIA Attributes

The toolbar in the Rich Text Editor is assigned the role of ‘Toolbar’ and includes the following attributes.

Property Functionalities
role=”toolbar” This attribute added to the ToolBar element describes the actual role of the element.
aria-orientation Indicates the ToolBar orientation. Default value is horizontal.
aria-haspopup Indicates the popup mode of the Toolbar. Default value is false. When popup mode is enabled, attribute value has to be changed to true.
aria-disabled Indicates the disabled state of the toolbar.
aria-owns Identifies an element to define a visual, functional, or contextual parent/child relationship between DOM elements when the DOM hierarchy cannot represent the relationship. In the Rich Text Editor, the attribute contains the ID of the Rich Text Editor to indicate the popup as a child element.

For more details on Toolbar ARIA attributes, refer to the Accessibility of Toolbar documentation.

  • The Rich Text Editor element is assigned the role of application.
Property Functionalities
role=”application” This attribute added to the Rich Text Editor element describes the actual role of the element.
aria-disabled Indicates the disabled state of the ToolBar. 
<template>
  <div id="markdown-editor">
      <ejs-richtexteditor
        ref="editor"
        :height="340"
        :width="500"
        editorMode="Markdown"
        :value="rteValue"
        :toolbarSettings="toolbarSettings"
      ></ejs-richtexteditor>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image,Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';

const toolbarSettings = {
    type: 'Scrollable',
    items: [ 'Bold',
        'Italic',
        'StrikeThrough',
        'InlineCode',
        'SuperScript',
        'SubScript',
        '|',
        'Formats',
        'Blockquote',
        '|',
        'OrderedList',
        'UnorderedList',
        'CreateLink',
        'Image',
        'CreateTable',
        'Undo',
        'Redo',]
};
const rteValue=`In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;
provide('richtexteditor', [Toolbar, Link, Image,Table, MarkdownEditor]);
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/tailwind3.css";
</style>
<template>
  <div id="markdown-editor">
    <ejs-richtexteditor
        ref="editor"
        :height="340"
        :width="500"
        editorMode="Markdown"
        :value="rteValue"
        :toolbarSettings="toolbarSettings"
      ></ejs-richtexteditor>
  </div>
</template>

<script>
import { RichTextEditorComponent, Toolbar, Link, Image,Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
export default {
    name: "App",
    components: {
        'ejs-richtexteditor': RichTextEditorComponent
    },
   data: function () {
    return {
      rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
      toolbarSettings: {
        items: [
          'Bold',
          'Italic',
          'StrikeThrough',
          'InlineCode',
          'SuperScript',
          'SubScript',
          '|',
          'Formats',
          'Blockquote',
          '|',
          'OrderedList',
          'UnorderedList',
          'CreateLink',
          'Image',
          'CreateTable',
          '|',
          'Undo',
          'Redo',
        ],
      },
    };
  },
  provide: {
    richtexteditor: [Toolbar, Link, Image, Table, MarkdownEditor],
  },
}
</script>

<style>@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/tailwind3.css";</style>

Keyboard Navigation

The Rich Text Editor component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Rich Text Editor component.

For more details on keyboard navigation, refer to the Keyboard support documentation.

Customizing Shortcut Keys

You can customize shortcut keys using the formatter property.This allows you to configure custom key combinations for various actions in the Rich Text Editor. For example, you can set ctrl+q to open the Insert Hyperlink dialog.

<template>
  <ejs-richtexteditor ref="markdown-editor" :placeholder="placeholder" editorMode="Markdown" :formatter="formatter" :value="rteValue">
  </ejs-richtexteditor>
</template>

<script setup>
import { provide } from "vue";
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, MarkdownEditor, MarkdownFormatter } from '@syncfusion/ej2-vue-richtexteditor';
const customHTMLModel = {
  keyConfig: {
    'insert-link': 'ctrl+q', // confite the desired key
  }
}
const rteValue = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
const placeholder = "Type Something";
const formatter = new MarkdownFormatter(customHTMLModel); // to configure custom key
provide('richtexteditor', [Toolbar, Link, Image, MarkdownEditor]);
</script>

<style>
@import 'https://ej2.syncfusion.com/vue/documentation./node_modules/@syncfusion/ej2/tailwind3.css';
</style>
<template>
  <ejs-richtexteditor ref="markdown-editor" :placeholder="placeholder" editorMode="Markdown" :formatter="formatter" :value="rteValue">
  </ejs-richtexteditor>
</template>

<script>

import { RichTextEditorComponent, Toolbar, Link, Image, MarkdownEditor, MarkdownFormatter } from '@syncfusion/ej2-vue-richtexteditor';
export default {
  name: "App",
  components: {
    "ejs-richtexteditor": RichTextEditorComponent
  },
  data() {
    var customHTMLModel = {
      keyConfig: {
        'insert-link': 'ctrl+q', // confite the desired key
      }
    }
    return {
      rteValue: `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`,
      placeholder: "Type Something",
      formatter: new MarkdownFormatter(customHTMLModel), // to configure custom key
    }
  },
  provide: {
    richtexteditor: [Toolbar, Link, Image, MarkdownEditor]
  }
}
</script>

<style>
@import 'https://ej2.syncfusion.com/vue/documentation./node_modules/@syncfusion/ej2/tailwind3.css';
</style>

We need to import IHtmlFormatterModel and HTMLFormatter to configure the shortcut key.

Implementing Accessibility Best Practices

The Rich Text Editor component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.

The accessibility compliance of the Rich Text Editor component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Rich Text Editor component with accessibility tools.

See Also