E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Henry, Michael (IntelliDyne)
Date: Fri, Jan 05 2018 11:03AM
Subject: ARIA tag: when a dropdown exposes a new form elements
No previous message | Next message →

OK, I've been reading articles all morning and am more confused than when I began.

Situation:

I'm building a form where the user's choice in a <select> element will cause a new <label>/<input> pair to appear on the page. Specifically, the last <option> is "Other". This will cause a new text input field to appear, asking the user to specify "other".


Option 1: (just backing up a step), do I even *need* to announce the new input, since this new element follows the <select> element in the DOM, and would be read as the user tabs to the next field?


Option 2: If required, what ARIA tag/attribute should I use to announce this new form element?

From what I've read, aria-live is not to be used for interactive elements (buttons, inputs, etc) because the user can't/won't be directed to the new live region and would have to search for it in the DOM.

Is role="alert" the answer? This seems too intrusive to me.


thanks for any, um, input.


Mike




---
Mike S. Henry
Creative Services Lead
IntelliDyne Contract Employee
Supporting Enterprise Infrastructure (formerly Military Health System Cyberinfrastructure Services - MCiS)
Desk: (703) 882-3962

From: Birkir R. Gunnarsson
Date: Fri, Jan 05 2018 11:11AM
Subject: Re: ARIA tag: when a dropdown exposes a new form elements
← Previous message | Next message →

The answer is short and simple, you don't need any ARIA.
Make sure the input field is located right after the dropdown in the DOM order.
Also make sure it has an accessible name, either a visible label
"other", or, this is where you could use ARIA, aria-label="other". If
the visual proximity makes it absolutely clear that the input field is
for the other option you just need the invisible aria-label attribute
to provide a screen reader label/accessible name for the field.



On 1/5/18, Henry, Michael (IntelliDyne) < = EMAIL ADDRESS REMOVED = > wrote:
> OK, I've been reading articles all morning and am more confused than when I
> began.
>
> Situation:
>
> I'm building a form where the user's choice in a <select> element will cause
> a new <label>/<input> pair to appear on the page. Specifically, the last
> <option> is "Other". This will cause a new text input field to appear,
> asking the user to specify "other".
>
>
> Option 1: (just backing up a step), do I even *need* to announce the new
> input, since this new element follows the <select> element in the DOM, and
> would be read as the user tabs to the next field?
>
>
> Option 2: If required, what ARIA tag/attribute should I use to announce this
> new form element?
>
> From what I've read, aria-live is not to be used for interactive elements
> (buttons, inputs, etc) because the user can't/won't be directed to the new
> live region and would have to search for it in the DOM.
>
> Is role="alert" the answer? This seems too intrusive to me.
>
>
> thanks for any, um, input.
>
>
> Mike
>
>
>
>
> ---
> Mike S. Henry
> Creative Services Lead
> IntelliDyne Contract Employee
> Supporting Enterprise Infrastructure (formerly Military Health System
> Cyberinfrastructure Services - MCiS)
> Desk: (703) 882-3962
>
> > > > >


--
Work hard. Have fun. Make history.

From: Henry, Michael (IntelliDyne)
Date: Fri, Jan 05 2018 11:41AM
Subject: Re: ARIA tag: when a dropdown exposes a new form elements
← Previous message | Next message →

Awesome!

So, if the "Specify other" <input> has a visible <label> properly associated to it, and it immediately follows the <select> that generated it, then I'm good to go?

Man, my day just got better!


thanks,

Mike


---
Mike S. Henry
Creative Services Lead
IntelliDyne Contract Employee
Supporting Enterprise Infrastructure (formerly Military Health System Cyberinfrastructure Services - MCiS)
Desk: (703) 882-3962

From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = >
Sent: Friday, January 5, 2018 1:11:03 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] ARIA tag: when a dropdown exposes a new form elements

The answer is short and simple, you don't need any ARIA.
Make sure the input field is located right after the dropdown in the DOM order.
Also make sure it has an accessible name, either a visible label
"other", or, this is where you could use ARIA, aria-label="other". If
the visual proximity makes it absolutely clear that the input field is
for the other option you just need the invisible aria-label attribute
to provide a screen reader label/accessible name for the field.



On 1/5/18, Henry, Michael (IntelliDyne) < = EMAIL ADDRESS REMOVED = > wrote:
> OK, I've been reading articles all morning and am more confused than when I
> began.
>
> Situation:
>
> I'm building a form where the user's choice in a <select> element will cause
> a new <label>/<input> pair to appear on the page. Specifically, the last
> <option> is "Other". This will cause a new text input field to appear,
> asking the user to specify "other".
>
>
> Option 1: (just backing up a step), do I even *need* to announce the new
> input, since this new element follows the <select> element in the DOM, and
> would be read as the user tabs to the next field?
>
>
> Option 2: If required, what ARIA tag/attribute should I use to announce this
> new form element?
>
> From what I've read, aria-live is not to be used for interactive elements
> (buttons, inputs, etc) because the user can't/won't be directed to the new
> live region and would have to search for it in the DOM.
>
> Is role="alert" the answer? This seems too intrusive to me.
>
>
> thanks for any, um, input.
>
>
> Mike
>
>
>
>
> ---
> Mike S. Henry
> Creative Services Lead
> IntelliDyne Contract Employee
> Supporting Enterprise Infrastructure (formerly Military Health System
> Cyberinfrastructure Services - MCiS)
> Desk: (703) 882-3962
>
> > > > >


--
Work hard. Have fun. Make history.

From: Birkir R. Gunnarsson
Date: Fri, Jan 05 2018 8:00PM
Subject: Re: ARIA tag: when a dropdown exposes a new form elements
← Previous message | No next message

You are absolutely correct. This is a Friday so hopefully the good
effect lasts through the weekend!


On 1/5/18, Henry, Michael (IntelliDyne) < = EMAIL ADDRESS REMOVED = > wrote:
> Awesome!
>
> So, if the "Specify other" <input> has a visible <label> properly associated
> to it, and it immediately follows the <select> that generated it, then I'm
> good to go?
>
> Man, my day just got better!
>
>
> thanks,
>
> Mike
>
>
> ---
> Mike S. Henry
> Creative Services Lead
> IntelliDyne Contract Employee
> Supporting Enterprise Infrastructure (formerly Military Health System
> Cyberinfrastructure Services - MCiS)
> Desk: (703) 882-3962
>
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of
> Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = >
> Sent: Friday, January 5, 2018 1:11:03 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] ARIA tag: when a dropdown exposes a new form elements
>
> The answer is short and simple, you don't need any ARIA.
> Make sure the input field is located right after the dropdown in the DOM
> order.
> Also make sure it has an accessible name, either a visible label
> "other", or, this is where you could use ARIA, aria-label="other". If
> the visual proximity makes it absolutely clear that the input field is
> for the other option you just need the invisible aria-label attribute
> to provide a screen reader label/accessible name for the field.
>
>
>
> On 1/5/18, Henry, Michael (IntelliDyne) < = EMAIL ADDRESS REMOVED = > wrote:
>> OK, I've been reading articles all morning and am more confused than when
>> I
>> began.
>>
>> Situation:
>>
>> I'm building a form where the user's choice in a <select> element will
>> cause
>> a new <label>/<input> pair to appear on the page. Specifically, the last
>> <option> is "Other". This will cause a new text input field to appear,
>> asking the user to specify "other".
>>
>>
>> Option 1: (just backing up a step), do I even *need* to announce the new
>> input, since this new element follows the <select> element in the DOM, and
>> would be read as the user tabs to the next field?
>>
>>
>> Option 2: If required, what ARIA tag/attribute should I use to announce
>> this
>> new form element?
>>
>> From what I've read, aria-live is not to be used for interactive elements
>> (buttons, inputs, etc) because the user can't/won't be directed to the new
>> live region and would have to search for it in the DOM.
>>
>> Is role="alert" the answer? This seems too intrusive to me.
>>
>>
>> thanks for any, um, input.
>>
>>
>> Mike
>>
>>
>>
>>
>> ---
>> Mike S. Henry
>> Creative Services Lead
>> IntelliDyne Contract Employee
>> Supporting Enterprise Infrastructure (formerly Military Health System
>> Cyberinfrastructure Services - MCiS)
>> Desk: (703) 882-3962
>>
>> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > > > > > > >


--
Work hard. Have fun. Make history.