WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Focus on adding/removing items

for

From: Birkir R. Gunnarsson
Date: Mar 16, 2015 2:33PM

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.