WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Mobile view different source code order

for

Number of posts in this thread: 4 (In chronological order)

From: Karin Carlson
Date: Wed, Sep 05 2018 11:14PM
Subject: Mobile view different source code order
No previous message | Next message →

Hi everyone. I'm giving the developers of a small app feedback on the app's accessibility. One of the main screens has links in groupings to navigate to subpages. They are arranged on the page in a sort of three-column format with text above every three or four links. They made each group of associated links into sections with ARIA labels.
When the browser window is narrow enough that the app goes into Mobile mode, there is a new button that is labeled "menu" that is first in the tab order that opens all of the navigation sections in a sort of side menu. All of the options available on the main page are available in the side menu, but they are in a different order then the options on the main page.
My questions1-- When deciding if a website or application has consistent navigation between pages, are you comparing only all of the mobile versions with other mobile versions, or do things have to match between mobile and regular? 
2-In the mobile mode, when the navigation elements are functioning as a menu, you can't arrow key down into the choices immediately, but have to tab through the entire contents of the page and then it jumps to the second item in the menu. The sections also still exist in the menu, which I think is not the way a menu should be built. Is there ever a time to use headings and sections and buttons inside of a menu? 
Thanks,
Karin Sent from my Samsung Galaxy smartphone.

From: glen walker
Date: Thu, Sep 06 2018 8:10AM
Subject: Re: Mobile view different source code order
← Previous message | Next message →

1. For 3.2.3, it just says to be consistent "within a set of web pages", so
you don't have to compare your desktop layout to your mobile layout.

2. That depends if you are using ARIA to make it a real menu by using
role="menu" and role="menuitem". If so, then the arrow keys must be used
to navigate the menu. If your "menu" is just a list of links, then tabbing
through the links is correct. Most people implement navigation menus as
lists of links so the arrow keys are not used. If you had a list of
actions, that's typically implemented as a real menu with role="menu" (or
menubar).

Whether you have headings and sections in your menu is tough to comment on
without further info. It's usually sufficient to have lists and sublists.

Glen


On Wed, Sep 5, 2018 at 11:15 PM Karin Carlson < = EMAIL ADDRESS REMOVED = >
wrote:

> Hi everyone. I'm giving the developers of a small app feedback on the
> app's accessibility. One of the main screens has links in groupings to
> navigate to subpages. They are arranged on the page in a sort of
> three-column format with text above every three or four links. They made
> each group of associated links into sections with ARIA labels.
> When the browser window is narrow enough that the app goes into Mobile
> mode, there is a new button that is labeled "menu" that is first in the tab
> order that opens all of the navigation sections in a sort of side menu. All
> of the options available on the main page are available in the side menu,
> but they are in a different order then the options on the main page.
> My questions1-- When deciding if a website or application has consistent
> navigation between pages, are you comparing only all of the mobile versions
> with other mobile versions, or do things have to match between mobile and
> regular?
> 2-In the mobile mode, when the navigation elements are functioning as a
> menu, you can't arrow key down into the choices immediately, but have to
> tab through the entire contents of the page and then it jumps to the second
> item in the menu. The sections also still exist in the menu, which I think
> is not the way a menu should be built. Is there ever a time to use headings
> and sections and buttons inside of a menu?
> Thanks,
> Karin Sent from my Samsung Galaxy smartphone.
> > > > >

From: Guy Hickling
Date: Fri, Sep 07 2018 6:05PM
Subject: Re: Mobile view different source code order
← Previous message | Next message →

Karin, I would flag it as bad for usability and user experience for all
users, rather than an accessibility defect for disabled people only, if
they see one menu order on their desktops then a different order on their
mobiles. That's confusing, and may even cause some to wonder if they are
missing some options on the mobile.

It can also be poor accessibility. Suppose someone with poor eyesight has
their text size set to a larger size in their browsers, a size that's close
to triggering the mobile layout, but not quite there. Then they find
something on your website they can't quite see so they zoom. Now all of a
sudden the menu order has changed! Again confusing. Users are used to menus
being replaced by the hamburger icon at different zooms, but do expect
everything to be more or less the same options inside that. So I think it's
poor accessibility experience for them, but I agree with what Glen has
just said, I can't think of anything in the WCAG that is infringed.

For your second query, "...when the navigation elements are functioning as
a menu, you can't arrow key down into the choices immediately, but have to
tab through the entire contents of the page and then it jumps to the second
item in the menu ", if I am understanding you correctly that sounds to me
rather dire. Something I would raise under SC1.3.1, but perhaps you can
give us more detail so we can get a better understanding of that question?
Is it really leaving the menu and tabbing through the entire page before
going back to the menu?

Regards,
Guy Hickling

From: Guy Hickling
Date: Fri, Sep 07 2018 6:21PM
Subject: Re: Mobile view different source code order
← Previous message | No next message

Sorry, that should have been SC2.4.3 Focus Order not 1.3.1 in my last post!
Guy