Play Accessibility
Tab order.
Put a scrambled form back in the order keyboard focus should follow, then watch the focus ring replay it.
Round 1 of 3. Shipping address: put the controls in the order keyboard focus should reach them.
- First name
- Last name
- Street address
- City
- State
- ZIP code
- Continue
Focus should follow reading order: across each row, then down. Column-by-column order like the starting one often comes from markup written one column at a time and rearranged with CSS.
Round 2 of 3. Sign in: put the controls in the order keyboard focus should reach them.
- Password
- Show password
- Forgot password?
- Sign in
- Create an account
Controls that belong to a field, like "Show password", should come right after it. Moving them to the end sends keyboard users back up the page to find them.
Round 3 of 3. Product cards: put the controls in the order keyboard focus should reach them.
- Desk lamp
- Add desk lamp to cart
- Monitor arm
- Add monitor arm to cart
- Footrest
- Add footrest to cart
Each card is a unit, so its link and button belong together. Visiting every title first and every button second separates each button from the product it adds.
Focus order should match the order people read. When CSS moves things around, check the result by pressing Tab.