How accessible is the Knapsack UI?

Accessibility is extremely important to Knapsack as we strive to deliver a powerful and inclusive product experience.

We do our best to strive for good usability for all users across the board, regardless of explicit thresholds for standards and compliance. This is an ongoing effort, and we're always looking for ways to improve and extend the platforms accessibility.

Below are a few specific examples of accessibility features we've incorporated into the platform to date:

Keyboard Shortcuts

  • Comprehensive tab-able, focused interactivity for navigation, input and action items (e.g. open menus, select sub-items, escape out, etc.)
  • Almost all of the common actions that a contributor would need to do can be done via keyboard (including the fancy pattern resizer!)

Visually-Hidden Text

  • Screen-reader only ADA blocks throughout, providing helper text with context behind what the specific UI element is doing or conveying
    • Includes core UI navigation (e.g. adding a content block to a page) as well as nested sub-actions (e.g. edit, configure, delete a content block)
  • Assistive live-text for complex interactions (eg. navigating tabs, content blocks)
    • Automatically reads the message or when the message changes in real time, laying out explicitly for users how to manipulate the controls, what they're currently focused on, what changes they've made so far, etc.
    • Shows up whenever a user is using a keyboard to focus on these items + using a screen-reader

Focus Trap

  • When navigating hierarchical controls via keyboard (e.g. opening the Settings menu while navigating through the primary site navigation via keyboard), backing out brings users to their prior focus (vs. resetting at the 'tier'), allowing users to remain within a region they're working on

Touch Support

  • Drag and drop elements are fully supported for touch devices (in addition to traditional click-based interactions)

Contrast Ratios

  • We strive for high contrast (foreground vs. background colors) in our UI wherever possible while still respecting the integrity of our customers' systems being displayed (e.g. automatic text coloring for Design Token color swatches, ensuring proper text contrast against the token color in the background).