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:
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:
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:
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:
Would love to hear what you think and if you've got any other ideas.
