WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Focus on adding/removing items

for

From: Robert Fentress
Date: Mar 18, 2015 8:46AM

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