Quizzes easier to finish on a phone

A visitor on a phone reaches your pricing step, and the answer labels before it were cut off after one line. Someone using only a keyboard tabs past the plan cards and cannot pick one. Both close the tab on the step you paid to get them to.

The enemy is a quiz that assumes a mouse and a wide screen.

Answer labels on quiz pages now wrap in full. The pricing screen in the templates shows your plans, and each plan card is a radio button, so a visitor can Tab to the plans and pick one with the arrow keys or Space. The height and weight unit switches are 44 px tall, easy to hit with a thumb.

Screen readers get more to work with. Single and multiple choice answers act as radio and checkbox groups, and so does the rating question. Lead fields have real labels, so browsers can fill in name, email and phone. When age, height or weight fails on Continue, the error is announced. The template colours meet the WCAG AA contrast level, and text on a coloured fill stays readable on it.

The Back button follows one rule. A screen's own Allow to go back setting wins. A screen where you never changed it follows the quiz-wide Show page navigation switch, and in that case the first screen never shows Back. In the builder, the box on such a screen shows what it inherits, with a note under it. Once you change it, Use the quiz-wide setting puts it back. The canvas preview follows the same rule as the live quiz.

Try it: open a quiz in the builder, pick the second screen and open its Screen settings. Under Header, Allow to go back shows what the screen inherits. Then open your live quiz on a phone and Tab through it on a laptop.