Accessibility in Blazor DocumentEditor Component

2 May 202515 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:

Windows	Mac	Description
`Ctrl` + `B`	`⌘` + `B`	Toggles the bold property of selected text.
`Ctrl` + `I`	`⌘` + `I`	Toggles the italic property of selected text.
`Ctrl` + `U`	`⌘` + `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:

Windows	Mac	Description
`Ctrl` + `E`	`⌘` + `E`	Selected paragraphs are center aligned.
`Ctrl` + `J`	`⌘` + `J`	Selected paragraphs are justified.
`Ctrl` + `L`	`⌘` + `L`	Selected paragraphs are left aligned.
`Ctrl` + `R`	`⌘` + `R`	Selected paragraphs are right aligned.
`Ctrl` + `1`	`⌘` + `1`	Single line spacing is applied for selected paragraphs.
`Ctrl` + `5`	`⌘` + `5`	1.5 line spacing is applied for selected paragraphs.
`Ctrl` + `2`	`⌘` + `2`	Double spacing is applied for selected paragraphs.
`Ctrl` + `0`	`⌘` + `0`	No spacing is applied before the selected paragraphs.
`Ctrl` + `M`	`⌘` + `M`	Increases the left indent of selected paragraphs by a factor of 36 points.
`Ctrl` + `Shift` + `M`	`⌘` + `⇧` + `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

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

Keyboard shortcut to navigate around the document

Windows	Mac	Description
`←`	`←`	Moves the cursor position one character to the left.
`→`	`→`	Moves the cursor position one character to the right.
`↓`	`↓`	Moves the cursor position down one line.
`↑`	`↑`	Moves the cursor position up one line.
`Ctrl` + `←`	`⌘` + `←`	Moves the cursor position one word to the left.
`Ctrl` + `→`	`⌘` + `→`	Moves the cursor position one word to the right.
`Ctrl` + `↑`	`⌘` + `↑`	Moves the cursor position one paragraph up.
`Ctrl` + `↓`	`⌘` + `↓`	Moves the cursor position one paragraph down.
`Tab` (in table)	`Tab`	Moves the cursor position one cell to the right.
`Shift` + `Tab` (in table)	`⇧` + `Tab`	Moves the cursor position one cell to the left.
`Home`	`Home`	Moves the cursor position to the start of a line.
`End`	`End`	Moves the cursor position to the end of a line.
`Page up`	`Page up`	Moves the cursor position one screen up.
`Page down`	`Page down`	Moves the cursor position one screen down.
`Ctrl` + `Home`	`⌘` + `Home`	Moves the cursor position to the start of a document.
`Ctrl` + `End`	`⌘` + `End`	Moves the cursor position to the end of a document.

Keyboard shortcut to extend selection

Windows	Mac	Description
`Shift` + `←`	`⇧` + `←`	Extends selection one character to the left.
`Shift` + `→`	`⇧` + `→`	Extends selection one character to the right.
`Shift` + `↓`	`⇧` + `↓`	Extends selection one line downward.
`Shift` + `↑`	`⇧` + `↑`	Extends selection one line upward.
`Shift` + `Home`	`⇧` + `Home`	Extends selection to the start of a line.
`Shift` + `End`	`⇧` + `End`	Extends Selection to the end of a line.
`Ctrl` + `A`	`⌘` + `A`	Extends selection to the entire document.
`Ctrl` + `Shift` + `←`	`⌘` + `⇧` + `←`	Extends selection one word to the left.
`Ctrl` + `Shift` + `→`	`⌘` + `⇧` + `→`	Extends selection one word to the right.
`Ctrl` + `Shift` + `↓`	`⌘` + `⇧` + `↓`	Extends selection to the end of a paragraph.
`Ctrl` + `Shift` + `↑`	`⌘` + `⇧` + `↑`	Extends selection to the start of a paragraph.
`Ctrl` + `Shift` + `Home`	`⌘` + `⇧` + `Home`	Extends selection to the start of a document.
`Ctrl` + `Shift` + `End`	`⌘` + `⇧` + `End`	Extends selection to the end of a document.

Find and Replace

Windows	Mac	Description
`Ctrl` + `F`	`⌘` + `F`	Opens options pane.
`Ctrl` + `H`	`⌘` + `H`	Opens replace tab in options pane.

Print document

Windows	Mac	Description
`Ctrl` + `P`	`⌘` + `P`	Prints the document.

Edit Operation

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

Insert special characters

Windows	Mac	Description
`Ctrl` + `Enter`	`⌘` + `Enter`	Inserts page break.
`Shift` + `Enter`	`⇧` + `Enter`	Inserts line break.

Dialog

Windows	Mac	Description
`Ctrl` + `F`	`⌘` + `F`	Opens options pane.
`Ctrl` + `D`	`⌘` + `D`	Opens font dialog.
`Ctrl` + `K`	`⌘` + `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.