2

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!

enter image description here

2
  • Out of curiosity: what's the user case where someone gets a pension in different countries at the same time? It's a important information to provide you with an answer – Devin May 24 at 20:22
  • This is just one part from longer form. If user has worked on multiple countries he might applicable to receive multiple pensions. User who fill this form are informed about this. – Robert May 25 at 4:31
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.

1
  • Thanks for answer! Renaming labels for version 2 is good idea. Delete was designed to work in a way that if there is more than one info added user can delete any added info, but when there is only one that one he can't deleted. I am still not sure about is option one suitable for screenreader? – Robert May 25 at 4:46
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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