WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Warn SR users that clicking "Add New" button adds form dynamically and sets focus to first field?

for

From: Robert Fentress
Date: Nov 14, 2016 12:14PM

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 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 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