E-mail List Archives

Search E-mail List Archives for

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

From: Robert Fentress
Date: Mon, Nov 14 2016 10:14AM
Subject: Warn SR users that clicking "Add New" button adds form dynamically and sets focus to first field?
No previous message | Next message →

*Scenario:* In a rich internet application, you have an "Add New Entry"
button that creates a new text entry of some sort. Clicking the button
causes a new form to dynamically appear on the page, and focus is moved to
the first field in that new form, for instance, the title of the entry.

*Questions:* Should screen reader users be warned of this behavior ahead of
time, perhaps with hidden text in the button, or is this an obvious
behavior that one would expect at this point? Would it be appropriate or
useful to have an aria-controls relationship here, where the button
references the labelled region wherein the form would appear? Does it make
a difference if the region where the form appears precedes the button in
the DOM? For instance, suppose the "Add New" button is one of a number of
controls that appears in a column on the right, but the form it creates
appears in the main content area to the left of it? I worry that this,
especially, might be disorienting.

Best,
Rob


--
Robert Fentress
Senior Accessibility Solutions Designer
540.231.1255

Technology-enhanced Learning & Online Strategies
Assistive Technologies
1180 Torgersen Hall
620 Drillfield Drive (0434)
Blacksburg, Virginia 24061

From: Birkir R. Gunnarsson
Date: Mon, Nov 14 2016 10:24AM
Subject: Re: Warn SR users that clicking "Add New" button adds form dynamically and sets focus to first field?
← Previous message | Next message →

Rob
If you are worryin about whether WCAG 3.2.2 requires you to add
warning for the button, then you don't. You do not need to give
warnings for link and button interactions.
http://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-unpredictable-change.html

If you make sure the focus moves to the first interactive field in the
dynamically displayed content, it doesn't matter where it is inserted
in relation to the button, as long as it is inserted in a logical
place to the other content (i.e. existing entries).
I always recommend it as a good practice to use aria-controls on the
button and role="region" and aria-labelledby="id of button" on the
dynamically displayed content.
<button id="b1" aria-controls="entry1">Add new entry</button>
<div role="region" id="entry1" aria-labelledby="b1">
new content
</div>
fact is that only Jaws with Firefox does anything with it. That is
more on the assistive technology vendors than authors though, but it
is good to point to the fact that you made this relationship clar
using ARIA and it is there for any assistive technology/browser that
wishes to take avantage.



On 11/14/16, Robert Fentress < = EMAIL ADDRESS REMOVED = > wrote:
> *Scenario:* In a rich internet application, you have an "Add New Entry"
> button that creates a new text entry of some sort. Clicking the button
> causes a new form to dynamically appear on the page, and focus is moved to
> the first field in that new form, for instance, the title of the entry.
>
> *Questions:* Should screen reader users be warned of this behavior ahead of
> time, perhaps with hidden text in the button, or is this an obvious
> behavior that one would expect at this point? Would it be appropriate or
> useful to have an aria-controls relationship here, where the button
> references the labelled region wherein the form would appear? Does it make
> a difference if the region where the form appears precedes the button in
> the DOM? For instance, suppose the "Add New" button is one of a number of
> controls that appears in a column on the right, but the form it creates
> appears in the main content area to the left of it? I worry that this,
> especially, might be disorienting.
>
> Best,
> Rob
>
>
> --
> Robert Fentress
> Senior Accessibility Solutions Designer
> 540.231.1255
>
> Technology-enhanced Learning & Online Strategies
> Assistive Technologies
> 1180 Torgersen Hall
> 620 Drillfield Drive (0434)
> Blacksburg, Virginia 24061
> > > > >


--
Work hard. Have fun. Make history.

From: Robert Fentress
Date: Mon, Nov 14 2016 12:14PM
Subject: Re: Warn SR users that clicking "Add New" button adds form dynamically and sets focus to first field?
← Previous message | No next message

Thanks, Birkir.

Neat idea using aria-labelledby with a reference to the button. In your
scenario, would the entry1 region always be available in the DOM with only
the content within it being changed?

Best,
Rob

On Mon, Nov 14, 2016 at 12:24 PM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

> Rob
> If you are worryin about whether WCAG 3.2.2 requires you to add
> warning for the button, then you don't. You do not need to give
> warnings for link and button interactions.
> http://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-
> unpredictable-change.html
>
> If you make sure the focus moves to the first interactive field in the
> dynamically displayed content, it doesn't matter where it is inserted
> in relation to the button, as long as it is inserted in a logical
> place to the other content (i.e. existing entries).
> I always recommend it as a good practice to use aria-controls on the
> button and role="region" and aria-labelledby="id of button" on the
> dynamically displayed content.
> <button id="b1" aria-controls="entry1">Add new entry</button>
> <div role="region" id="entry1" aria-labelledby="b1">
> new content
> </div>
> fact is that only Jaws with Firefox does anything with it. That is
> more on the assistive technology vendors than authors though, but it
> is good to point to the fact that you made this relationship clar
> using ARIA and it is there for any assistive technology/browser that
> wishes to take avantage.
>
>
>
> On 11/14/16, Robert Fentress < = EMAIL ADDRESS REMOVED = > wrote:
> > *Scenario:* In a rich internet application, you have an "Add New Entry"
> > button that creates a new text entry of some sort. Clicking the button
> > causes a new form to dynamically appear on the page, and focus is moved
> to
> > the first field in that new form, for instance, the title of the entry.
> >
> > *Questions:* Should screen reader users be warned of this behavior ahead
> of
> > time, perhaps with hidden text in the button, or is this an obvious
> > behavior that one would expect at this point? Would it be appropriate or
> > useful to have an aria-controls relationship here, where the button
> > references the labelled region wherein the form would appear? Does it
> make
> > a difference if the region where the form appears precedes the button in
> > the DOM? For instance, suppose the "Add New" button is one of a number
> of
> > controls that appears in a column on the right, but the form it creates
> > appears in the main content area to the left of it? I worry that this,
> > especially, might be disorienting.
> >
> > Best,
> > Rob
> >
> >
> > --
> > Robert Fentress
> > Senior Accessibility Solutions Designer
> > 540.231.1255
> >
> > Technology-enhanced Learning & Online Strategies
> > Assistive Technologies
> > 1180 Torgersen Hall
> > 620 Drillfield Drive (0434)
> > Blacksburg, Virginia 24061
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >



--
Robert Fentress
Senior Accessibility Solutions Designer
540.231.1255

Technology-enhanced Learning & Online Strategies
Assistive Technologies
1180 Torgersen Hall
620 Drillfield Drive (0434)
Blacksburg, Virginia 24061