0

I'm working on a web app that features a number of regions that are dynamically shown and hidden throughout use of the application.

As the application is striving for WCAG Compliance, I have logic in place that causes the first selectable input of any region that is activated receive focus when a region is activated. This allows for a visually impaired user to have their attention applied to the proper region of the application.

This works perfectly fine on Windows, Android, and MacOS. However, when using iOS Safari the picker is automatically activated when a <select> receives focus. This is undesirable behaviour, as every time these regions are activated the picker dialogue is displayed.

Is there a way I can make it so that iOS Safari doesn't display the picker dialogue when an element receives focus?

Yokel Pole
  • 35
  • 4

3 Answers3

1

I'm pretty sure the short answer is no. Unless you make your own iOS wrapper for your app, and control the flow of the collection view, the OS takes over and displays the correct type of control for the selected field.

You might be able to hack at it by changing the type attribute of your field but that's kind of dirty.

bsarrazin
  • 3,990
  • 2
  • 18
  • 31
1

Autofocusing elements in form could be a counterproductive accessibility idea. See http://www.brucelawson.co.uk/2009/the-accessibility-of-html-5-autofocus/ for instance.

If you want to have a visually impaired attention directed to a region, you should use the standard way of achieving that using aria-live attribute for instance.

That being said, you could try to give the focus to the label of the element. Users with disabilities will then be able to select the associated element with the common shortcut/keystrokes .

Adam
  • 17,838
  • 32
  • 54
0

I ended up working around this by assigning focus to the parent element whenever iOS is in use. This works with my application thanks to how the HTML is structured.

I looked into using <aria-live> but that wasn't suitable for the cases where a modal disables the background. Ideal behaviour has focus being directed to the modal and then the user cannot get out of it until they acknowledge or close it.

The code that I used to resolve this issue is as follows:

if (navigator.userAgent.search(/iPad|iPhone|iPod/g) === -1) {
    focus(currentControl);
} else {
    currentControl.parentElement.setAttribute("tabindex", "-1");
    focus(currentControl.parentElement);
    currentControl.parentElement.removeAttribute("tabindex");
}

setAttribute is used in case the parent element is a <div> or other untabbable element.

Not an ideal solution, but it worked for me.

Yokel Pole
  • 35
  • 4