Accessibility in EJ2 ASP.NET MVC Spreadsheet Control

24 Jul 202611 minutes to read

The Spreadsheet control follows 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 Spreadsheet control is outlined below.

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

WAI-ARIA attributes

The Spreadsheet control follows the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Spreadsheet control:

Attributes Purpose
grid (role) This role is added to the spreadsheet content table and describes the collection of rows and columns.
gridcell (role) This role is added to the cell element and describes the rows <td> element.
rowheader (role) This role is added to the row header and describes the header of the rows.
colheader (role) This role is added to the column header and describes the header of the columns.
aria-rowindex (attribute) This attribute describes the table’s row index in the spreadsheet.
aria-colindex (attribute) This attribute describes the table’s column index in the spreadsheet.
aria-selected (attribute) This attribute describes an item’s (cell, menu, checkbox, etc.) current selected state in the spreadsheet.
aria-rowcount (attribute) This attribute describes the total number of rows in the table.
aria-colcount (attribute) This attribute describes the total number of columns in the table.
aria-busy (attribute) This attribute describes a currently updated or modified element.
aria-label (attribute) This attribute describes the accessible name for the interactive elements.
textbox (role) This role is assigned to the textbox that accepts text input.
menu (role) This role has been added to the menu and describes the menu items.
aria-expanded (attribute) This attribute describes the control (for example, dropdown) is expanded or collapsed.
aria-multiline (attribute) This attribute defines what the Alt + Enter key does in the spreadsheet editor.

Keyboard interaction

The Spreadsheet control follows keyboard interaction guidelines, 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 Spreadsheet control.

Press To do this
Up arrow Navigate from the active cell to the previous cell in the same column.
Down arrow Navigate from the active cell to the next cell in the same column.
Left arrow Navigate from the active cell to the previous cell in the same row.
Right arrow Navigate from the active cell to the next cell in the same row.
Tab Navigate the active cell to the next cell in the same row.
Shift + Tab Navigate the active cell to the previous cell in the same row.
Home Move the selection to the first column in the worksheet.
Ctrl + Home Move the selection to the first visible cell on a worksheet.
Shift + Home Extend the cell selection to the first column of a worksheet.
Ctrl + Shift + Home Extend the selection of cells to the beginning of the worksheet.
Ctrl + End Move the selection to the last cell in the worksheet (the intersection of the last row and last column).
Page Up Move page up.
Page Down Move page down.
Shift + Page Up Extend the selection upward by one page.
Shift + Page Down Extend the selection downward by one page.
Ctrl + Up Navigate to the non-blank cell before the active cell in the same column.
Ctrl + Down Navigate to the last non-blank cell in the same column as the active cell.
Ctrl + Left Navigate to the non-blank cell before the active cell in the same row.
Ctrl + Right Navigate to the last non-blank cell in the same row as the active cell.
Shift + Up Extend the selection of cells to the previous row.
Shift + Down Extend the selection of cells to the next row.
Shift + Left Extend the selection of cells to the previous column.
Shift + Right Extend the selection of cells to the next column.
Ctrl + Shift + Up Extend the cell selection to the previous non-blank cell in the same column as the active cell.
Ctrl + Shift + Down Extend the cell selection to the last non-blank cell in the same column as the active cell.
Ctrl + Shift + Left Extend the cell selection to the previous non-blank cell in the same row as the active cell.
Ctrl + Shift + Right Extend the cell selection to the last non-blank cell in the same row as the active cell.
Enter Navigate the active cell to the next cell in the same column.
Shift + Enter Navigate to the previous cell in the same column from the active cell.

Edit Mode

Press To do this
Alt + Enter Insert a new line while editing a cell.
Enter Complete the cell editing and select the cell below in the same column.
Shift + Enter Complete the cell editing and select the cell above in the same column.
Tab Complete the cell editing and select the next cell in the same row.
Shift + Tab Complete the cell editing and select the previous cell in the same row.

Ribbon Navigation

Press To do this
Alt Focus on the active ribbon tab.
Left arrow Move the focus to the previous item in the ribbon content.
Right arrow Move the focus to the next item in the ribbon content.
Alt + Down Open the ribbon dropdown menu.
Esc / Alt + Up Close the ribbon dropdown menu.

Ensuring accessibility

The Spreadsheet control’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.

The accessibility compliance of the Spreadsheet control is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Spreadsheet control with accessibility tools.