jquery - 是否可以强制 Ios 浏览器焦点从输入转移到另一个元素？

Question

嘿，当语音打开时，我在 Ios6 中遇到了一些语音问题。这是场景: 当我单击链接(例如搜索)时，我给 div aria-hidden = false，然后触发对内部输入元素的关注。然后我单击另一个链接，它会触发上一个搜索链接的焦点。但现在 - 焦点转移到 Url 上。

经过大量测试，我确定问题在于焦点位于输入元素上。我不知道在输入聚焦后是否可以将焦点集中到另一个元素。但这是客户的要求。 更重要的是 - 它可以在 IOS 5 中运行。

我有 fiddle 示例 here : “https://jsfiddle.net/37a6mqtu/6/”。

var $searchbar = $("#search-bar");
var $button = $("#btn-search-opener");
var $closebutton =$("#closebutton");
// handle click and add css
$button.on("click", function(){
  $searchbar.attr("aria-hidden","false");
  setTimeout(function () {
        $searchbar.find('[name="q"]').focus().css("background-color","green");
    }, 500);
  
});

$closebutton.on("click", function(){
$button.focus().css("background-color","red"); 
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#search-bar {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button,#btn-search-opener {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#search-bar.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#search-bar.alt button {
  background: #fff;
  color: #000;
}

#search-bar input:focus {
background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#search-bar" id="btn-search-opener" class="btn-search-opener" aria-controls="search-bar" aria-label="search icon" aria-expanded="true">
<span class="sr-only" data-font-size="16" data-font-size-type="px" data-line-height="24px">search</span>
</a>

                      
<div id="search-bar" class="search-bar" aria-hidden="true" >
    <div class="container" data-font-size="16" data-font-size-type="px" data-line-height="24px">
        <form role="search">
        <a href="#" id=closebutton>X</a>
            <div class="hold" data-font-size="16" data-font-size-type="px" data-line-height="24px">
                <label class="sr-only" for="lbl-01" data-font-size="16" data-font-size-type="px" data-line-height="24px">search</label>
                <input class="form-control" type="search" name="q" id="lbl-01" placeholder="search">
                <input class="btn btn-search" type="submit" value="Search">                    
            </div>
        </form><!-- / search-form -->
            
    </div><!-- / container -->
    
</div>

我期望焦点将停留在搜索链接上。

感谢帮助!

Answer 1

如果我正确理解问题，单击“搜索”链接，成功将焦点移动到搜索<input>。然后，当您单击 X-close 时，您尝试将焦点放回到原始的“搜索”链接上，但焦点却移至地址栏？

这个问题听起来很熟悉。我认为这是 VoiceOver 中的一个错误，在 stackoverflow 上或在另一个有关可访问性的在线论坛中讨论过，但我找不到对此的引用。

请注意，您在问题中提到了 iOS5 和 iOS6，但当前版本是 iOS12。 “5”和“6”是拼写错误吗？

另外，我知道您的示例只是为了说明您的问题，但以防万一您实际上将此模式用于其他编码，我有一些可访问性评论:

• 第一个链接有 aria-label (“搜索图标”)，但链接内已经有可见文本(“搜索”)，因此 aria-label没有必要。安aria-label将覆盖元素中包含的任何文本。
• X-close 链接没有有 aria-label但它需要一个。目前，屏幕阅读器只会显示“X link”。你应该使用 <a href="#" id=closebutton aria-label='close'>X</a> (尽管这可能会失败 WCAG 2.5.3 )