New grids in Essential Grid 4 are built for WCAG 2.1 AA: visitors can use them with a keyboard, a screen reader or a system set to reduce motion. Part of an accessible grid is your content, though: the colours of your skins, your images’ alt texts and the words on your links. This chapter lists both. The short answer is in the FAQ: Are Essential Grid’s grids accessible?
What the new front end does
These apply to grids on the new front end of Essential Grid 4. Grids made before 4.0 keep the classic front end until you switch them.
| Part | What visitors get |
|---|---|
| Filters, sort, page numbers, Load more | Real buttons with a name, and their state (pressed, current page) for screen readers. |
| Keyboard | Every control and every item’s links can be reached with Tab. An item’s hover layers also show when a link inside it has the keyboard’s focus, so the links on them can be used. |
| Focus | A visible focus ring on the control or link that has the focus. |
| Results | When visitors filter or search, the result is announced to screen readers. |
| Icons | Icon-only links, such as a magnifier that opens the lightbox, get a name. |
| Lightbox | A dialog with a name: the focus stays inside while it is open and goes back to the link that opened it when it closes; Esc closes it (Click: lightbox and Ajax content). |
| Reduced motion | Visitors whose system asks for reduced motion get no movement: no entrance, the hover’s end state at once, a quarter-second fade after a filter instead of the change effect, a still loading indicator, and the window scrolls without a glide (Motion). |
| Touch | The first tap on an item shows its hover, the next one opens the link. |
What you decide
| Your part | What to do |
|---|---|
| Alt texts | Give your images an alt text in the media library that says what the image shows. Items use it. In a custom grid, the item’s data holds its texts (Custom grids). |
| Colours and contrast | The colours of your skins decide whether text on a card can be read: keep text and its background at a contrast of at least 4.5:1, and 3:1 for large text and icons. Text over a photo needs a dark or light cover behind it (Items). |
| Link texts | A button that only says “More” is unclear out of context; a title that is itself the link says where it leads. |
| Video | Choose videos with captions where they have speech, and leave autoplay with sound off. |
| Motion | Keep entrances short. Visitors who ask for reduced motion get no entrance anyway, and only a short fade when the items change. |
Good to know
- The navigation styles’ colours are part of your design: check the contrast of the filter buttons and page numbers against your page’s background.
- Test with the keyboard: Tab through the grid, open an item, close the lightbox with Esc, and check that you can always see where the focus is.