Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add tabindex / focus to buttons in Safari without changing default browser preferences

When navigating a form using the keyboard, button elements don't gain focus in Safari (tested in v8.0 on Yosemite). This is unless tabbing is explicitly turned under Preferences --> Advanced. Is there any way to get around this?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <form action="">
    <fieldset>
      <input type="text" />
      <button>Button</button>
      <input type="text" />
      <button type="button">Button</button>
    </fieldset>
  </form>
</head>
<body>
  
</body>
</html>

http://codepen.io/alexandtheweb/pen/raQrxw

like image 282
Alex G Avatar asked Mar 17 '15 16:03

Alex G


People also ask

Can I use Tabindex for Button?

The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating). The tabindex attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).

Does focus work on Safari?

Step one: Set Firefox Focus as the default browser in Safari (you only need to do this once): Tap the Settings app in your iPhone or iPad. Scroll down to Safari and tap it. Tap Default Browser App and select Firefox Focus.


1 Answers

There is no way to get around this. The user needs to enable these preferences in order for tabbing to work correctly.

like image 144
unobf Avatar answered Sep 27 '22 01:09

unobf