可访问性问题选择带有空格键的复选框会跳过内容

我有一个带复选框的下拉菜单,可以浏览菜单,进入下拉菜单,然后选择带有空格键的复选框。但是,当我再次点击选项卡时,焦点现在回到页面顶部,它应该转到下拉菜单中的下一个复选框。这只是IE中的问题。

<label class="checkbox" tabindex="1" for="All Programs">
     <input name="programNameSelection" tabindex="1" id="All Programs" type="checkbox" checked="" value="All Programs">
     <span class="checkbox-text">All Programs</span> 
</label>

新更新

<label class="checkbox" for="All Programs">
     <input name="programNameSelection" tabindex="0" id="All Programs" type="checkbox" checked="" value="All Programs">
     <span class="checkbox-text">All Programs</span> 
</label>
tongxin8855 回答:可访问性问题选择带有空格键的复选框会跳过内容

尽管将<input/>嵌套在<label>内在理论上是标准的并且是完全允许的,但并不建议这样做,特别是因为已知会导致屏幕阅读器出现问题。

因此,我的进一步建议是将代码更改为更传统的代码,其中<label>元素使用属性<input/>和{{1 }}。 其余的情况乍一看也不差。

,

您正在使用[HttpPost] [Authorize(Roles = "Ambassador")] public IActionResult AttendSubEvent(int[] subEventsChecked) { var model = new AmbassadorAssociatedSubEventsViewModel(); _ambassadorManager.AttendSubEvent(subEventsChecked,_userManager.CurrentUser.UserName); return RedirectToAction(nameof(GetSubEvents)); (两次)。

如果您尝试使项目聚焦,则应使用tabindex=1

选项卡索引上的任何正整数都将其按指定位置的选项卡顺序放置,并覆盖DOM的顺序。

tabindex=0使项目可聚焦,但按DOM的顺序。

对于您的示例,如果将输入放在tabindex=0内,则根本不需要tabindex,因为输入会自动聚焦,除非您覆盖该功能(并将其放入表单有助于屏幕阅读器)。

另外,您的form必须是一个单词,在for和输入AllPrograms上都使用for且没有空格

作为一般规则(我从来不需要打破自己的规则),没有充分的理由在项目上使用肯定的id,而应固定tabindex元素的顺序。

本文链接:https://www.f2er.com/3142127.html

大家都在问