One label for multiple fields?

Question

I'm not very familiar with the accessibility and I need help for situation where I have multiple field and every field has same question. Is it ok to put all field under one label? For user who can see I think it is not too complicated, or what you think? But I am not sure is this suitable for user who use screenreader.

What I have read I found that every field should have label and I think that is definitely true for unique fields. But those articles does not has similar situation what I have. I thought that I could maybe find answer from here.

UI explained: At the start user has only one label and selection(no delete button). If user needs to add more countries it is possible by clicking "Add new country". Every time button is cliked it adds new row with selection.

Do not focus words and things like that. UI is not going to be in English.

Thanks in advance!

Answer 1

I think you are close to two good options; in both options, you'll want to remove the "Delete" button next to the first dropdown (allowing the user to delete additional dropdowns, but not the first one.) You say that language isn't important, but you might want the Add button to be more like "Add additional country".

1. The version on the left, one label with three dropdowns, is perfectly valid, and a common pattern in UI design. The label then serves a collection of dropdowns.

2. The version on the right is also valid, if you change the label of the additional dropdowns slightly, like "Select an additional country where you will receive your pension". The reason you'd need to change the labels for additional dropdowns is to acknowledge to the user that they're selecting a secondary option. You might want to use "Primary country" in the original label if this is a common use case.

Option 1 is more streamlined, while Option 2 might be more explicitly intuitive, which can be good for pensioners. It might be good to test this with users.

Answer 2

The “Delete” buttons need labels, so that the user who cannot see the locations knows what each button would delete.

Clicking the “Add new country” button inserts content into the page above the button. A blind user might not know that anything was inserted. So you would need to do something with the focus or a live region to ensure that the user is informed.

You would also need to ensure that an already-chosen country is omitted from any other list, and that the omissions are revised if the user revises the country in any list.

The whole design is much more complex than it could be, though. It could simply be a select element, with the multiple attribute. That would allow the user to choose any countries, and modify the set of chosen countries before submitting the form. Mobile and non-mobile browsers and assistive technologies have various user-friendly ways to present select elements to users, and you can let them take that responsibility for you. Just by using this native HTML element, you would solve all of the above problems, and you would present a familiar, instead of a novel, interface to your users.