WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Multiple documents in a single webpage

for

From: Isabel Holdsworth
Date: Jul 13, 2018 6:03AM

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