0

If you visit www.arbetsformedlingen.se from a mobile, you will find a menu.

  • If you open that menu, you can only access items within that menu since tapping outside of the menu will close the menu.
  • If you for some reason are using a keyboard, you cannot tab out of that menu.

However, visitors who uses the screen reader VoiceOver in IOS can simply move out of that menu by using the swipe left/right gestures to access the previous/next object in the DOM.

Question: Is there some way to prevent those users to access objects outside of the menu when the menu is visible?

An unsuitable solution due to the CMS would be to place the main content and the menu on the same node level, like in the simplified code below:

<body>
  <div class=”maincontent” aria-hidden=”false”>
      // Main content.
  </div>
  <div class=”mobilemenu” aria-hidden=”true” style="display:none">
    // Menu.
  </div>
</body>

When the menu is opened, the aria-hidden and display:none are toggled in order to just show the page contents or the menu.

Another unsuitable solution would be to toggle aria-hidden to every other object when the menu is opened, but that is impossible due to performance issues.

So, any piece of advice, thoughts etc are very welcome!!!

Ilias Bennani
  • 237
  • 2
  • 11
  • If you can define why you want to prevent tabbing out of the menu, that might help with a solution. Otherwise, based on what I see you are treating the menu more like a modal (allowing `Esc` to close it, not letting focus out, returning focus to the menu button when closed, though you are not putting focus on the close button when first opened). Is that your intent? – aardrian May 17 '17 at 16:54
  • Sorry for late reply. :-) The problem is not "tabbing" out of the menu, rather preventing users with Voiceove to access objects outside of the menu when the menu is visible. (There are still other issues in that menu, but we're aware and handling them as well). – Ilias Bennani Jun 07 '17 at 14:03
  • Still sounds to me like you want to treat it as a modal. If VoiceOver users can get into the menu, then they should be able to get out. A modal prevents that by making the background page inert. You will still need to add support for the `Esc` key. – aardrian Jun 07 '17 at 14:36

1 Answers1

0

Using HTML5, you can set the "tab-index" to positive numbers on the elements within the menu. This will set focus to those elements. `

<div class="menu-container">
  <div class="menu">
    <div tabindex="1">Menu Item 1</div>
    <div tabindex="2">Menu Item 2</div>
    <div tabindex="2">Menu Item 3</div>
  </div>
</div>

This may not be the best solution depending on what your trying to accomplish and what your code structure looks like. You'll want to be sure to use the "tab-index" attribute correctly as to not break accessibility.

Good description and example

WebAIM-tabindex-accessibility

ciammarino
  • 154
  • 1
  • 12
  • Sorry for late reply. :-) The problem is not "tabbing" out of the menu, rather preventing users with Voiceove to access objects outside of the menu when the menu is visible. – Ilias Bennani Jun 07 '17 at 14:03
  • Do not use a positive `tabindex` value. See the warning in the WebAIM article you link: "An element with any `tabindex` value of 1+ will receive keyboard focus before elements with no `tabindex` value (or `tabindex="0"`)." IOW, users will be in your menu as soon as they start tabbing. – aardrian Jun 07 '17 at 14:38
  • I'm sorry for not understanding how you mean. As far as I know, tabindex only applies to keyboard usage. In VoiceOver, you are using gestures to control the screen reader. – Ilias Bennani Jun 16 '17 at 08:40