WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Focus on adding/removing items

for

From: Robert Fentress
Date: Mar 17, 2015 6:37AM

Just noticed the background of the wireframe I attached was transparent.
Here is one where I've filled that in. Sorry.

On Mon, Mar 16, 2015 at 4:33 PM, Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

> My take on this:
> - If adding an item, move focus to the recently added item once complete.
> - If deleting one of multiple items, user should be notified to this,
> ideally by an accessible modal alert dialog, or at least using a live
> region with role="alert"
> I would suggest keeping focus on the delete button.
> - If deleting the only item on the page, alert user in the same way
> but put the user focus at the top of the page.
> If possible, keep items in a list markup so that users can quickly
> find out how many items are on the page (screen readers will notify
> user of the number of items in an ol or ul list).
>
>
>
> On 3/16/15, Robert Fentress < <EMAIL REMOVED> > wrote:
> > Hello, all.
> >
> > Following up on my previous email regarding focus in rich internet
> > applications, I thought I'd provide an explicit example. I'm attaching a
> > wireframe image to help make things clearer to the sighted. It shows the
> > following:
> >
> > - A "Skip to content" link with id="skip" at the top of the page
> > - A large rectangle with id="items", which encompasses the following
> > items:
> > - Two rectangles, one following the other vertically, both with
> > class="item", one with id="item 1" and the other with id="item2".
> > Inside
> > each element with class="item" are the following:
> > - A link with class="itemlink"
> > - An icon button with class="delete"
> > - The last thing in the "items" element is a button, whose value is
> > "Add Item" with id="add"
> >
> > The delete button causes an item to be removed from the list of items,
> and
> > the "Add Item" button causes an item to be added to the bottom of the
> list
> > of items.
> >
> > Here are my questions, using jQuery selectors to indicate element
> > referenced:
> >
> > Deleting
> >
> > 1. With focus on $("#item1 .delete"), a click event causes $("#item1")
> > to be removed from the page dynamically. Where should focus be
> placed?
> > Options:
> > 1. Perform no explicit focus-setting action and allow browser to set
> > focus or not
> > 2. $("#items")
> > 3. $("#item2")
> > 4. $("#item2 .itemlink")
> > 5. $("#skip")
> > 2. With only $("#item2") remaining and focus on $("#item2 .delete"), a
> > click event causes $("#item1") to be removed from the page
> dynamically.
> > Where should focus be placed? Options:
> > 1. Perform no explicit focus-setting action and allow browser to
> set
> > focus or not
> > 2. $("#items")
> > 3. $("#add")
> > 4. $("#skip")
> > 3. Reset scenario, so that $("#item1") and $("#item2") are in the
> list.
> > With focus on $("#item2 .delete"), a click event causes $("#item1") to
> > be
> > removed from the page dynamically. Where should focus be placed?
> > Options:
> > 1. Perform no explicit focus-setting action and allow browser to
> set
> > focus or not
> > 2. $("#items")
> > 3. $("#item1")
> > 4. $("#item1 .itemlink")
> > 5. $("#add")
> > 6. $("#skip")
> >
> > Adding
> >
> > 1. Reset scenario, so that only $("#item1") and $("#item2") are in the
> > list. With focus on $("#add"), a click event causes another item,
> > $("#item3") to be added to the end of the list dynamically. In this
> > scenario, we are assuming there are no intermediary dialogs or
> > pages. Where should focus be placed? Options:
> > 1. Perform no explicit focus-setting action and allow browser to set
> > focus or not
> > 2. $("#items")
> > 3. $("#item3")
> > 4. $("#item3 .itemlink")
> > 5. $("#add")
> > 6. $("#skip")
> >
> > Should $("#items") be a live region? If so, to what should its
> parameters
> > be set? If one felt live regions was appropriate here, I'd guess the
> > following:
> >
> > - aria-live="polite"
> > - aria-atomic="false" (implied)
> >
> > Does that seem reasonable?
> >
> > Are there other attributes or techniques that would seem particularly
> > relevant to these use cases that should be considered?
> >
> > Thanks, in advance, for your assistance.
> >
> > 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