0

When user select any value from drop down, additional field are get visible without any prior warning. This change of context is disorienting for visually impaired and cognitive impaired user.

The drop down values are domestic account, international account.

if user select the domestic account, then sort code, account number field will be displayed. if user select international account, then account number, currency field will be displayed.

How to provide an instruction to the user beforehand and describe this behavior (that focus move to sort code or account number) ?

<label class="" for="">
<input type="" name="" value="listbox" aria-label="choosing a key format will cause additional fields">
Victor
  • 17
  • 5

2 Answers2

2

It could be as simple as having a line of visible text (instruction) before the dropdown that says "choosing an account type will cause additional fields to appear". (You may want to word it better than that. Check with your designer or content specialist.)

Having that instruction line would also fulfill WCAG 3.3.2 Labels or Instructions in addition to the original WCAG 3.2.2 On Input you asked about. (Those two WCAG numbers look very similar.)

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • developer is asking need some additional information. – Victor Mar 07 '23 at 13:11
  • And I can read your developer's mind as to what additional information they want? :-) – slugolicious Mar 08 '23 at 02:46
  • developer has made changes. Now there is no visible text displaying . Screen reader announces drop down name role value then announces the choosing an account type will cause additional field . This is not we are expecting – Victor Mar 10 '23 at 10:09
  • would you please provide some example site for reference – Victor Mar 10 '23 at 10:10
  • 1
    You've been posting a lot of accessibility questions lately. It's great that your company is working on that but it sounds like you might need to hire someone to help rather than relying on all free advice. In fact, you probably want someone to teach/train your design, dev, and test teams about accessibility. I'm not trying to sell anything here but you can look at my profile and contact me if needed. – slugolicious Mar 11 '23 at 01:07
  • really sorry. just have a small question. if we add the aria-label to the component then will it resolve the issue ? does the visible text/ instructions is required ? – Victor Mar 11 '23 at 06:20
  • You didn’t post any code so I can’t really give any coding advice. – slugolicious Mar 12 '23 at 06:02
  • I have updated the question. Could you please provide any example website to know how it is designed and how the screen reader reads out the text. to get better clarity. – Victor Mar 13 '23 at 11:08
1

From W3C WCAG 2.2 3.2.2 On Input

Note A change of content is not always a change of context. Changes in content, such as an expanding outline, dynamic menu, or a tab control do not necessarily change the context, unless they also change one of the above (e.g., focus).

What you've described in the OP doesn't constitute a change of context.

But, if it were, the solution you proposed, an aria-label, wouldn't be sufficient to pass, because non-screen reader users wouldn't get the information.

A best practice, however, would be to have all fields visible. They are going to have to provide an account number either way. With domestic, you can autofill your local currency.

absynthe minded web smith
  • 1,083
  • 2
  • 14
  • 19
  • I am not getting it. are you saying there is a one line instructions should showed in the screen and also screen reader should read out that content as well ? – Victor Apr 14 '23 at 11:50
  • would you pls share any example website . we want to know how the announcement work for other website currently I am conducting A11Y training to new team members. pls provide any sample website that will be helpful – Victor Apr 14 '23 at 11:53
  • Let's assume that a button created a change of context. You are allowed to do that IF you give prior warning it will happen. In your original example, you only warned screen reader users. No one else would know what was coming. So it still constitutes a failure of On Input. People with cognitive disabilities could be confused. So instead of having hidden text via an aria-label, provide the instructions for all. However, the change in content is so minor it doesn't constitute a change of context. So you can just leave out the aria-label/instructions. – absynthe minded web smith Apr 14 '23 at 18:52
  • Basically, Slugolicious' answer is fine, if you're wedded to a progressive reveal. I just wanted to point out that your change of content wasn't big enough to be a change of context. So no warning is necessary. That said, I would still argue it's better to have all buttons/inputs initially visible. Either way, they have to enter an account number, whether it's foreign or domestic. And there has to be a currency either way. Just lock it to your local currency for domestic. Then there are NO surprises. – absynthe minded web smith Apr 14 '23 at 19:00