Keyboard And Screen Reader Guide
Real keyboard paths for search, cart, and checkout, rough edges named, and a direct developer inbox.
Real keyboard paths for search, cart, and checkout, rough edges named, and a direct developer inbox.
The Ecommerce Collection unlocks the source for every Ecommerce block. All Access unlocks every Collection.
Already purchased? Log in
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.”
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
After
One strong use is the four paths with the honest rough edges column. Other guides:
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.