WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Focus on adding/removing items

for

From: Bourne, Sarah (ITD)
Date: Mar 18, 2015 2:56PM

Rob,

Where the focus should go is more a usability issue than an accessibility requirement per se, and may requiring some testing by users to see if you've got it right. As a general rule, you want to put focus back to where the user was in the flow of the page. If it goes to the top of the page, for instance, a keyboard-only user would have to tab all the way back to "items" to continue item management.

Since you can't put them back on the delete button once an item is deleted, perhaps it could be replaced with a confirmation statement (maybe with an un-do action even) that the item was deleted. Lacking that, I would think it should go to the next element - the next item link if there is one, or to the add item button. But user testing might show that taking them to the top of the list when at the end is more useful.

I can't speak to exactly which ARIA attributes you should use, but I agree with Birkir that using list elements for the items would improve usability, and you would need something so the list and count is updated when items have been added or deleted.

sb
Sarah E. Bourne
Director of IT Accessibility, MassIT
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502
<EMAIL REMOVED>
http://www.mass.gov/MassIT


-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Robert Fentress
Sent: Wednesday, March 18, 2015 11:00 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Focus on adding/removing items

Another option might be to have a separate element that had role="alert", which was updated every time something was added or removed from the item list. For instance, if you remove an item, you could have the alert read "Item deleted," or, if added "item added."

On Wed, Mar 18, 2015 at 10:46 AM, Robert Fentress < <EMAIL REMOVED> > wrote:

> Thanks for letting me know. Here is a link to the picture:
>
> https://drive.google.com/file/d/0B8U0tKKO3WMWVGptUDhfMnhKSk0/view?usp=
> sharing
>
> On Tue, Mar 17, 2015 at 10:14 AM, Bourne, Sarah (ITD) <
> <EMAIL REMOVED> > wrote:
>
>> Rob,
>>
>> Attached images don't make it through on this list service. Is there
>> someplace you can post the image so you can give a URL instead?
>>
>> sb
>> Sarah E. Bourne
>> Director of IT Accessibility, MassIT
>> Commonwealth of Massachusetts
>> 1 Ashburton Pl. rm 1601 Boston MA 02108
>> 617-626-4502
>> <EMAIL REMOVED>
>> http://www.mass.gov/MassIT
>>
>>
>> -----Original Message-----
>> From: <EMAIL REMOVED> [mailto:
>> <EMAIL REMOVED> ] On Behalf Of Robert Fentress
>> Sent: Tuesday, March 17, 2015 9:04 AM
>> To: WebAIM Discussion List
>> Subject: Re: [WebAIM] Focus on adding/removing items
>>
>> Birkir,
>>
>> Thanks for your response.
>>
>> Since the delete button is within the item being removed, I couldn't
>> keep it on that delete button. Do you mean I should move it to the
>> delete button in the other item?
>>
>> Also, what about live regions? Would this be an appropriate use case
>> for those and, if so, what attribute values should I apply for
>> aria-live, aria-atomic, and aria-relevant?
>>
>> Is there a set of standards or principles that you are going by in
>> your recommendations or are they just based on your sense of things
>> based on your experience? Hope that didn't sound rude; I just want
>> to know, because then I could reference that for guidance later.
>>
>> Best,
>> Rob
>>
>> On Tue, Mar 17, 2015 at 8:37 AM, Robert Fentress < <EMAIL REMOVED> > wrote:
>>
>> > 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.
>> >> >> >> >> >> list messages to <EMAIL REMOVED>
>> >>
>> >
>> >
>> >
>> > --
>> > 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
>> >
>>
>>
>>
>> --
>> 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
>> >> >> list messages to <EMAIL REMOVED>
>> >> >> list messages to <EMAIL REMOVED>
>>
>
>
>
> --
> 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
>



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