Accessibility

ZingGrid is an industry-leading provider of accessible data grids. Read below to find out exactly what it means to be accessible and about some of the core accessible features we've added to the library.

Accessibility Conformance Guidelines

There are three major standards that those building a website should adhere to. These include: WCAG 2.0, 508 and ADA.

The WCAG is a global standard and has three levels a site or application can reach: A, AA, or AAA. We have tested and passed for the AA standard.

The 508 was made by the U.S. Department of Justice (ADA) and is another standard that we adhere to. We highly recommend reviewing these standards to see how accessible your site is.

Keyboard Navigation

Those with visual and motor impairments often rely solely on a keyboard to navigate through a website.

All our grids respond directly to keypresses made by a user. Start by pressing the tab key to enter into a grid. Pressing tab will navigate a user between the grid's core features, starting with the header and working from left to right and top to bottom.

To access the actual data inside a grid, a user must first tab into the data itself. Once the selector is hovering over the first row of the first column, a user can then begin using the arrow keys to navigate the other cells.

To disable the default keyboard navigation functionality, simply include the attribute [cell-focus="disabled] to your ZingGrid component.

Additional Shortcuts:

• HOME - Jumps to the first cell in the current row
• END - Jumps to the last cell in the current row
• Page Up - Jumps to the first row on page in the current column
• Page Down - Jumps to the last row on page in the current column

Keyboard Navigation Enabled Grid

Here is a complete grid with keyboard navigation enabled:

High Contrast Color Customization

ZingGrid offers a high level of customization. Colors schemes with high contrast are crucial in allowing those with visual impairments to read your content and data.

The Contrast Checker made by WebAIM is a useful tool for checking text color against a background color to see if it passes certain accessibility standards.

Customizing text, buttons, backgrounds, and more can be done by utilizing CSS classes and selectors (see below). Gain a better understanding of these customizations by visiting our styling documentation, or learn how to create your own theme.

zing-grid {
    --zg-icon-color: #003749;
}
zg-cell {
  color: black;
}
zg-head {
  --zg-icon-init-fill: #000000;
}
zg-body zg-row:nth-child(odd) {
  background-color: #e3ecf6;
}
zg-control-bar {
  --zg-icon-color: #003749;
}

High Contrast Color Grid

Here is the same keyboard navigation enabled grid from above redesigned with high contrast colors:

Screen Size Adjustability

It is important that users are able to use a browser's native zoom capability to enlarge or shrink the content of a page.

All our grids can be zoomed in and out with ease while maintaining their structure.

On Mac: command + or command -

On Windows: ctrl + or ctrl -

Screen Reader Compatibility

Screen readers are widely utilized tools used by people with visual impairments. Often used in conjunction with keyboard navigation, screen readers read the content of a page out loud to a user.

We made sure that the content of our grids can be read by the two major screen readers available:

Jaws (Windows) and

VoiceOver (Mac)

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

• Styling Feature
• Color Contrast Checker
• Jaws (Screen Reader)
• VoiceOver (Screen Reader)