WebAIM - Web Accessibility In Mind

E-mail List Archives

Focus on adding/removing items

for

From: Robert Fentress
Date: Mar 16, 2015 1:20PM

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