Make keyboard navigation follow the page's visible order

What to change

Ask the supplier to make moving through service cards or choices feel consistent with their reading order, including when the layout changes on a phone.

A worked example

Illustrative example

A two-column service collection is navigated across each row, matching its visible reading order. On a phone, the same sequence becomes a straightforward vertical list.

Healthcare website design showing connected desktop and mobile service and enquiry layouts. — Make the service and next step clear on every screen.

Healthcare website accessibility illustrated by a focus outline, keyboard key, contrast samples and form. — Review keyboard access, contrast and understandable form fields.

Why this matters to your practice

Cards may rearrange beautifully on a phone while their keyboard sequence still follows the old desktop layout. The result can feel like jumping between unrelated services. Ask the supplier to demonstrate a page with several cards at both sizes, reading and using each in order. Reception can judge whether the sequence makes sense to somebody comparing services. The visual design and the interaction should tell the same story, including where each card's details and enquiry link belong.

How to check the result

Accept when the order is consistent and meaningful at each layout, including after a return from a linked page.

A mistake to avoid

A desktop screenshot cannot reveal the underlying focus sequence or its behaviour when the layout collapses.

Turn reading into a next step

Your action checklist

Work through these checks with your team or supplier. Tick the ones you have resolved and leave unknowns open.

Checks to discussSelect a page with several actionable cards and tab through them slowly. Compare the focus sequence with the order in which their headings are read.Resize the window and repeat. Ask the supplier to review any visual reordering that makes keyboard movement appear to jump backwards or skip a section.Open a card and return to the list. Confirm focus resumes at a useful place so the visitor can proceed to the next item.

Your answers and notes

Record what you know, what is still missing and the answer you need from your team or supplier.

What happens next, and who will do it?

Use project decisions only, without personal, patient or confidential details. Entries stay in this page and are not submitted to Kay & Co. Copy or download before leaving; this page does not save your notes.

Related guides

Need help with this?

Tell us what is getting in the way. Kay & Co. can help you understand the options and turn the next step into something that works for your practice.

Explore websites & patient experience services or discuss your project.

Try the free Healthcare Digital Planner to find your starting priority.