Our team has been working on a new web app and one of the sections requires admin users to enter a ratio (for example 1:2 or 1.5:20 etc).

I'm unsure of the best way to present the fields to all users, but in particular I've been struggling with how best to 'connect' the left and right sides of the ratio for screen reader users.

I've coded a working version of these examples at:https://cdpn.io/DemoBrand/debug/KKpPRzY/gaMeYzROQLLM and would love to get feedback from screen reader users. If you complete fields in each example and click the relevant 'Submit form' buttons the error messages will be displayed.

I've also included some screenshots below:

Screenshot of my first idea

Idea 1: This idea has the left and right sides of the ratio as two separate fields, I'm concerned that it might be unclear which part of the ratio is required when users focus on each field, in this example I've used 'aria-describedby' to associate the sentence 'Enter the ratio of apples to oranges' with each field to help reinforce what is required.

I think this version will be easier for our dev team to implement and also makes handling validation and error messages clearer:

Screenshot of my first idea with errors displayed

Idea 2: My second idea was to use a single field and ask users to enter the complete ratio, for example '1:2' or '4.5:1'. I think this approach may make it easier to understand what is required initially, but it may be harder for our dev team to implement. It is certainly harder to explain in the error what part of the ratio is incorrect:

Idea 2 with an error message shown

My third idea was to use an 'aria-live' element to confirm the results of the ratio when the user completes the oranges field, I'm hoping this will help reinforce that the user has entered the correct information, but may be overkill:

Idea 3 with aria-live region confirming the ratio

Would love to hear what you think and if you've got any other ideas.


1 Answer 1


I personally prefer your third solution! Another approach could be to simply display the ratios as fractions. A user would enter the amount of each Apples + Oranges they have, and then your program would display a large fraction of amountApples / amountaOranges.

This way you could even simplify the fractions to get more precise ratios.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.