WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Multiple documents in a single webpage

for

From: Isabel Holdsworth
Date: Jul 13, 2018 7:17AM


If we didn't move the focus, screenreader users would be unlikely to
know that some new content had appeared. And it may be difficult for
them to find. If they pressed the button to open the dialog, chances
are they're interested in what's in there, so why not position the
cursor so they can begin reading at the correct place?.

The focus should rarely be moved programatically, but I think this is
one of those times when it's acceptable and even advisable.

On 13/07/2018, <EMAIL REMOVED> < <EMAIL REMOVED> > wrote:
> I have one question. How does the screen reader user know where they are
> when you move the document within the page? What is the purpose of moving
> the document?
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Isabel Holdsworth
> Sent: Friday, 13 July 2018 10:03 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Multiple documents in a single webpage
>
> Thanks Glen - lots of good food for thought here.
>
> The dialog is draggable using the keyboard. When the whole dialog has
> focus,
> as I think it does once the button to open it has been pressed, drag
> handles
> appear and the dialog can be moved using the mouse or arrow keys.
>
> There's not a quick skip link to move to the dialog at the moment. We move
> focus straight there as soon as it opens, and pressing Close or Escape
> hides
> it again and moves focus back to the opener.
>
> The dialog is at the end of the DOM, and I'm suggesting its title is an H1
> heading. I could suggest a skip link back to the main document, but where
> in
> the document should it move the focus to? The opener perhaps, Or the first
> H1?
>
> Thanks again, and have a great weekend.
>
> Lynn
>
> On 12/07/2018, glen walker < <EMAIL REMOVED> > wrote:
>> You said the dialog visually looks like a draggable non-modal dialog.
>> Is it really draggable or can it be moved via the keyboard? Or is it
>> really a fixed location on the screen and you're just styling it to
>> look like a moveable dialog?
>>
>> Is there a quick keyboard way to move the focus from the "regular"
>> part of the page to the dialog area? A landmark would help an AT user
>> but browsers have not surfaced landmark navigation to keyboard users
>> yet so you'd need a skiplink or shortcut key (that's discoverable).
>>
>> Any time the page is updated with new info, you should notify the user.
>> That's often done with aria-live regions.
>>
>> You'd also have to decide whether to move the focus. In general,
>> moving the focus after selecting a button is shied away from, but in
>> your case, if I were using a screen magnifier and could only see the
>> button and a limited region around it, I might not notice that
>> somewhere else on the screen was updated unless the focus was moved to
>> it (causing my magnified viewport to move to the newly focused area).
>>
>>
>>
>> On Thu, Jul 12, 2018 at 6:49 AM, Isabel Holdsworth <
>> <EMAIL REMOVED> > wrote:
>>
>>> Hi all,
>>>
>>> We have a webpage with a button that, when pressed, loads a document,
>>> spreadsheet or image into a dialog that's positioned at the bottom of
>>> the DOM. So we effectively have two items of content residing on the
>>> same webpage.
>>>
>>> Currently there's nothing to distinguish the new content from the
>>> existing apart from an H1 heading and a div that looks visually like
>>> a draggable non-modal dialog box.
>>>
>>> I'd really appreciate your thoughts on the best way to structurally
>>> present the new content so it's distinguishable as a separate entity
>>> from what was already on the page.
>>>
>>> Thanks as always, Lynn
>>> >>> >>> archives at http://webaim.org/discussion/archives
>>> >>>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > http://webaim.org/discussion/archives
> >
> > > > >