Accessibility in Blazor DocumentEditor Component

29 Nov 202412 minutes to read

The Blazor Document Editor component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Blazor Document Editor component is outlined below.

Accessibility Criteria	Compatibility
WCAG 2.2 Support
Section 508 Support
Screen Reader Support
Right-To-Left Support
Color Contrast
Mobile Device Support
Keyboard Navigation Support
Axe-core Accessibility Validation

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

Keyboard interaction

Text formatting

The following table lists the default keyboard shortcuts in document editor for formatting text:

Key combination	Description
`Ctrl` + `B`	Toggles the bold property of selected text.
`Ctrl` + `I`	Toggles the italic property of selected text.
`Ctrl` + `U`	Toggles the underline property of selected text.
`Ctrl` + `+`	Toggles the subscript formatting of selected text.
`Ctrl` + `Shift` + `+`	Toggles the superscript formatting of selected contents.
`Ctrl` + `}`	Increases the actual font size of selected text by one point.
`Ctrl` + `{`	Decreases the actual font size of selected text by one point.

Paragraph formatting

The following table lists the default keyboard shortcuts for formatting the paragraph:

Key combination	Description
`Ctrl` + `E`	Selected paragraphs are center aligned.
`Ctrl` + `J`	Selected paragraphs are justified.
`Ctrl` + `L`	Selected paragraphs are left aligned.
`Ctrl` + `R`	Selected paragraphs are right aligned.
`Ctrl` + `1`	Single line spacing is applied for selected paragraphs.
`Ctrl` + `5`	1.5 line spacing is applied for selected paragraphs.
`Ctrl` + `2`	Double spacing is applied for selected paragraphs.
`Ctrl` + `0`	No spacing is applied before the selected paragraphs.
`Ctrl` + `M`	Increases the left indent of selected paragraphs by a factor of 36 points.
`Ctrl` + `Shift` + `M`	Decreases the left indent of selected paragraphs by a factor of 36 points.
`Ctrl` + `*`	Show/Hide the hidden characters like spaces, tab, paragraph marks, and breaks.

Clipboard

Key Combination	Description
`Ctrl` + `C`	Copies selected contents to the clipboard.
`Ctrl` + `V`	Pastes plain text content from the clipboard.
`Ctrl` + `X`	Moves selected content to the clipboard.

Keyboard shortcut to navigate around the document

Key Combination	Description
`Left arrow`	Moves the cursor position one character to the left.
`Right arrow`	Moves the cursor position one character to the right.
`Down arrow`	Moves the cursor position down one line.
`Up arrow`	Moves the cursor position up one line.
`Ctrl` + `Left arrow`	Moves the cursor position one word to the left.
`Ctrl` + `Right arrow`	Moves the cursor position one word to the right.
`Ctrl` + `Up arrow`	Moves the cursor position one paragraph up.
`Ctrl` + `Down arrow`	Moves the cursor position one paragraph down.
`Tab` (in table)	Moves the cursor position one cell to the right.
`Shift` + `Tab` (in table)	Moves the cursor position one cell to the left.
`Home`	Moves the cursor position to the start of a line.
`End`	Moves the cursor position to the end of a line.
`Page up`	Moves the cursor position one screen up.
`Page down`	Moves the cursor position one screen down.
`Ctrl` + `Home`	Moves the cursor position to the start of a document.
`Ctrl` + `End`	Moves the cursor position to the end of a document.

Keyboard shortcut to extend selection

Key Combination	Description
`Shift` + `Left arrow`	Extends selection one character to the left.
`Shift` + `Right arrow`	Extends selection one character to the right.
`Shift` + `Down arrow`	Extends selection one line downward.
`Shift` + `Up arrow`	Extends selection one line upward.
`Shift` + `Home`	Extends selection to the start of a line.
`Shift` + `End`	Extends Selection to the end of a line.
`Ctrl` + `A`	Extends selection to the entire document.
`Ctrl` + `Shift` + `Left arrow`	Extends selection one word to the left.
`Ctrl` + `Shift` + `Right arrow`	Extends selection one word to the right.
`Ctrl` + `Shift` + `Down arrow`	Extends selection to the end of a paragraph.
`Ctrl` + `Shift` + `Up arrow`	Extends selection to the start of a paragraph.
`Ctrl` + `Shift` + `Home`	Extends selection to the start of a document.
`Ctrl` + `Shift` + `End`	Extends selection to the end of a document.

Find and Replace

Key Combination	Description
`Ctrl` + `F`	Opens options pane.
`Ctrl` + `H`	Opens replace tab in options pane.

Print document

Key Combination	Description
`Ctrl` + `P`	Prints the document.

Edit Operation

Key Combination	Description
`Backspace`	Deletes one character to the left.
`Delete`	Deletes one character to the right.
`Ctrl` + `Z`	Undo last performed action.
`Ctrl` + `Y`	Redo last undo action.

Insert special characters

Key Combination	Description
`Ctrl` + `Enter`	Inserts page break.
`Shift` + `Enter`	Inserts line break.

Dialog

Key Combination	Description
`Ctrl` + `F`	Opens options pane.
`Ctrl` + `D`	Opens font dialog.
`Ctrl` + `K`	Opens hyperlink dialog.

You can refer to our Blazor Word Processor feature tour page for its groundbreaking feature representations. You can also explore our Blazor Word Processor example to know how to render and configure the document editor.

Ensuring accessibility

The Blazor Document Editor component’s accessibility levels are ensured through an axe-core software tool during automated testing.

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