About this block

Keyboard and Screen Reader Guide documents four real paths through the store, with the keys shown as styled kbd chips. Search opens with /, the cart traps focus and returns it on Escape, checkout is “one column on purpose” with errors announced at the field, and the skip link is visible when focused, not hidden as a formality. A rough edges list names three unresolved issues honestly, including the Firefox mega menu that needs two presses of Escape.

Paths and roughEdges are two arrays. The contact card routes directly to the developer: “a blocked checkout outranks every feature on the board.”

When to use

Reach for this block below the accessibility statement on the accessibility page. The rough edges section must reflect real open bugs, a list of resolved issues gives readers no useful information.

A natural flow around it on an Ecommerce Pro page:

Before

• Accessibility statement

After

• Accessibility feedback card
• Contact routes

What you can display

One strong use is the four paths with the honest rough edges column. Other guides:

• Mobile gestures. The same structure for swipe and tap paths on the companion app.
• Power user shortcuts. Wishlist, compare, and quick add documented for frequent buyers.
• Checkout only. A focused guide for the highest stakes flow, for stores with complex checkout steps.

Tip: naming the keys as actual kbd chips makes the guide scannable for users who already know the shape of the task and need only the specific key.