是否有可能强制Ios浏览器从输入焦点到另一个元素?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了是否有可能强制Ios浏览器从输入焦点到另一个元素?相关的知识,希望对你有一定的参考价值。
Hay,当配音开启时,我在ios6中的画外音方面遇到了一些问题。这就是场景:当我点击链接时,说搜索,我给div aria-hidden = false,我触发焦点在里面的输入元素。然后我点击另一个链接,它会触发上一个搜索链接的焦点。但是现在 - 重点转移到了Url。
经过大量测试后,我确定问题在于焦点在于输入元素。在输入被聚焦之后,我不知道是否有可能将焦点放在另一个元素上。但这是客户的要求。更重要的是 - 它在IOS 5中有效。
我有小提琴例子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>
我的期望是焦点将保留在搜索链接上。
谢谢你的帮助!
答案
如果我正确理解了问题,单击“搜索”链接,成功将焦点移动到搜索<input>。然后,当您单击X-close时,您尝试将焦点重新放回原始的“搜索”链接,而焦点是移动到地址栏?
这个问题听起来很熟悉我认为这是VoiceOver中的一个错误,这个错误在stackoverflow或其他关于可访问性的在线论坛中讨论过,但我找不到对它的引用。
请注意,您在提问中提到了iOS5和iOS6,但当前版本是iOS12。 “5”和“6”是错字吗?
此外,我知道您的示例仅用于说明您的问题,但为了防止您实际使用此模式进行其他编码,我有几个辅助功能评论:
- 第一个链接有一个
aria-label
(“搜索图标”)但链接内部已经有可见的文本(“搜索”),因此不需要aria-label
。aria-label
将覆盖元素中包含的任何文本。 - X-close链接没有
aria-label
但它需要一个。目前,屏幕阅读器只会说“X链接”。你应该使用<a href="#" id=closebutton aria-label='close'>X</a>
(虽然这可能会失败WCAG 2.5.3)
以上是关于是否有可能强制Ios浏览器从输入焦点到另一个元素?的主要内容,如果未能解决你的问题,请参考以下文章