JQuery Mobile заставляет VoiceOver сосредоточиться на заголовке после GotoPage

ОБНОВЛЕНИЕ: использование jQuery Mobile

Фрагмент Stackoverflow не запускается, см. https://jsfiddle.net/EricOP/wo40z1m9/3/

HTML

  <div data-role="header">
    <h1>Foo</h1>
  </div>

  <div data-role="content">
    <p>I'm first in the source order so I'm shown as the first page.</p>
    <p>View internal page called <a id="barclick" href="#bar">bar</a></p>
  </div>

  <div data-role="footer">
    <h4>Page Footer</h4>
  </div>

</div>

<!-- Start of second page -->
<div data-role="page" id="bar">

  <div data-role="header">
    <h1>Bar</h1>
  </div>

  <div data-role="content">
    <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
    <p><a href="#foo">Back to foo</a></p>
  </div>

  <div data-role="footer">
    <h4>Page Footer</h4>
  </div>

</div>

CSS

/* CSS to prevent weird blue border in Chrome after setting focus */ 
h2:focus { outline: 0; }

JS

(function() {
  // For changing to a specific page. 
  // Also see https://api.jquerymobile.com/pagecontainer/#event-beforeshow which was helpful for Sano.
  $("#bar").on('pageshow', function(barPage) {
    console.warn('Pageshow on bar, Sano.', barPage);
    $("h1:visible").attr('tabindex', "-1");
    $("h1:visible").css('background-color', '#aaa');
    $("h1:visible").focus();
  });

  // For changing between all jQuery Mobile pages. https://api.jquerymobile.com/pagecontainer/#event-change
  $(document).on('pagecontainerchange', function() {
    console.warn('New cool event, that always triggers, Pagecontainerchange on document, Sano.');
    $("h1:visible").attr('tabindex', "-1");
    $("h1:visible").css('color', '#dd4814');
    $("h1:visible").focus();
  });

})();

Запуск по событию (https://api.jquerymobile.com/pagecontainer/#event-change ), обещание или обратный вызов лучше, чем использование ожидания по времени, чтобы избежать необходимости угадывать, сколько времени займет рендеринг ваших изменений отображения.

Сано особо отметил, что https://api.jquerymobile.com/pagecontainer/#event-beforeshow был полезен.

  //for jQuery until  1.4.0
  $(document).on('pagebeforeshow', function() {
    $(".ui-page-active > .ui-header h1").attr('tabindex', "-1");
    $(".ui-page-active > .ui-header h1").focus();
  });
  //for jQuery 1.6.0+ (Also works for 1.4)
  $(document).on('pagecontainerbeforeshow', function() {
    $(".ui-page-active > .ui-header h1").attr('tabindex', "-1");
    $(".ui-page-active > .ui-header h1").focus();
  });