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: Birkir R. Gunnarsson
Date: Nov 14, 2016 10:24AM

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.