Accessibility

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

Accessibility Conformance Guidelines

There are three major standards that those building 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 justice department (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 ot the first row on page in the current column.
  • Page Down - Jumps to the last row on page in the current column.

High Contrast Color Customization

ZingGrid offers a high level of customizability. 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. 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;
}

Note: We plan on releasing pre-built high-contrast themes in the future. Make sure to check back to see when these are made available!

Screen Size Adjustability

It is important that users are able to use a browsers 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.

Mac: command + or command -

Windows: ctrl + or ctrl -

Screen Reader Compatability

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

Using the two major screen readers available, we made sure the content of our grids can be read by these readers.

Jaws (Windows)

VoiceOver (Mac)

ARIA Attributes

For screen readers to interpret and read the data of a grid, ARIA attributes must be attached to the grid's DOM elements.

Below is a list of ARIA attributes that we have added to ensure that screen readers can easily read our grids:

  • role="grid"
  • role="columnheader"
  • role="rowgroup"
  • role="row"
  • role="menu"
  • role="menuitem"
  • role="menuitemchecked"
  • role="gridcell"
  • role="presentation"
  • role="toolbar"
  • aria-hidden="true"