Vue HtmlEditor - Accessibility

Accessibility Features Overview

NOTE
The overall accessibility level of your application depends on the HTML Editor features you use.
Accessibility Requirement Support Level
Right-to-Left Support
Keyboard Navigation Support
Screen Reader Support
Contrast Color Theme
Mobile Device Support
Lighthouse Accessibility Validation
Axe Accessibility Validation
WAVE Accessibility Validation
Section 508 Support
WCAG 2.x Support
  • - All component features meet the requirement
  • - Some component features may not meet the requirement
  • - Accessibility requirement is not supported

Accessibility Standards Compliance

The HTML Editor component meets a variety of Section 508 and WCAG 2.x compliance standards. Known exceptions:

Section 508 criteria WCAG 2.x criteria Exception description
501 (Web)(Software)
504.2 (Authoring Tool)
602.3 (Support Docs)
1.4.3 Contrast (Minimum) (Level AA)
1.4.11 Non-text Contrast (Level AA 2.1 and 2.2)
HTML Editor does not support Windows High Contrast themes.
501 (Web)(Software)
504.2 (Authoring Tool)
602.3 (Support Docs)
2.1.1 Keyboard (Level A)
11.5.2.12 Execution of available actions
Users cannot resize images, Popup, and Resizable controls within HTML Editor.
501 (Web)(Software)
504.2 (Authoring Tool)
602.3 (Support Docs)
2.1.2 No Keyboard Trap (Level A) The keyboard shortcut to focus out of the component does not exist.
- 4.1.2 Name, Role, Value NVDA does not pronounce the state of the button in the toolbar (active or not).
504.2.2 PDF Export - If you export content from an HTML Editor to PDF, the following issues occur in the resulting document:
  • You cannot set header lines in exported tables.
  • Pictures are exported without "alt" attributes.
  • Pages and separate page parts do not have language settings.

Keyboard Navigation

A user can use the following keys to interact with the HTML Editor component:

PC Mac Action
Ctrl + C ⌘ + C Copy
Ctrl + V ⌘ + V Paste
Ctrl + Z ⌘ + Z Undo
Ctrl + Y ⌘ + Y Redo
Ctrl + A ⌘ + A Select All
Ctrl + B ⌘ + B Bold
Ctrl + I ⌘ + I Italic
Enter Insert a line break (a new paragraph)
Shift + Enter Insert a line break (in the same paragraph)
Tab Nest current list item (when in a list)
Increase indentation (when at the start of a paragraph)
Move the cursor to the next table cell
Shift + Tab Move the cursor to the previous table cell
Decrease indentation (when at the start of a paragraph)
↑ → ↓ ← Navigate through the table
Enter Move the cursor outside the table (when in the last row)
Esc Close active dialog
Enter Apply active dialog data

Use the registerKeyHandler(key, handler) method to implement a custom handler for a key.

jQuery
JavaScript
function registerKeyHandlers () {
    const htmlEditor = $("#htmlEditorContainer").dxHtmlEditor("instance");
    htmlEditor.registerKeyHandler("backspace", function(e) {
        // The argument "e" contains information on the event
    });
    htmlEditor.registerKeyHandler("space", function(e) {
        // ...
    });
}
Angular
TypeScript
import { ..., ViewChild, AfterViewInit } from '@angular/core';
import { DxHtmlEditorModule, DxHtmlEditorComponent } from 'devextreme-angular';
// ...
export class AppComponent implements AfterViewInit {
    @ViewChild(DxHtmlEditorComponent, { static: false }) htmlEditor: DxHtmlEditorComponent;
    // Prior to Angular 8
    // @ViewChild(DxHtmlEditorComponent) htmlEditor: DxHtmlEditorComponent;

    ngAfterViewInit () {
        this.htmlEditor.instance.registerKeyHandler('backspace', function(e) {
            // The argument "e" contains information on the event
        });
        this.htmlEditor.instance.registerKeyHandler('space', function(e) {
            // ...
        });
    }
}
@NgModule({
    imports: [
        // ...
        DxHtmlEditorModule
    ],
    // ...
})
Vue
<template>
    <DxHtmlEditor :ref="myHtmlEditorRef" />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxHtmlEditor from 'devextreme-vue/html-editor';

const myHtmlEditorRef = 'my-html-editor';

export default {
    components: {
        DxHtmlEditor
    },
    data() {
        return {
            myHtmlEditorRef
        }
    },
    computed: {
        htmlEditor: function() {
            return this.$refs[myHtmlEditorRef].instance;
        }
    },
    mounted: function() {
        this.htmlEditor.registerKeyHandler('backspace', function(e) {
            // The argument "e" contains information on the event
        });
        this.htmlEditor.registerKeyHandler('space', function(e) {
            // ...
        });
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { HtmlEditor } from 'devextreme-react/html-editor';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.htmlEditorRef = React.createRef();
    }

    render() {
        return (
            <HtmlEditor ref={this.htmlEditorRef} />
        );
    }

    get htmlEditor() {
        return this.htmlEditorRef.current.instance();
    }

    componentDidMount() {
        this.htmlEditor.registerKeyHandler('backspace', function(e) {
            // The argument "e" contains information on the event
        });
        this.htmlEditor.registerKeyHandler('space', function(e) {
            // ...
        });
    }
}

export default App;

Screen Reader Support

The HTML Editor component supports screen readers and complies to WAI-ARIA standards.