Question

我正在尝试在我的网页中使用配音。

    <!DOCTYPE html>
    <html>
        <body>
            <form action="demo_form.asp">
                First name: <input type="text" name="fname" tabindex="1"><br>
                Second name: <input type="text" name="sname" tabindex="2"><br>
                Third name: <input type="text" name="tname" tabindex="3"><br>
                Last name: <input type="text" name="lhan" tabindex="4"><br>
               <input type="submit" value="Submit">
           </form>
       </body>
   </html>

如果我在Iphone中打开此页面，首先它会显示“名字”。

我只需点击“fname”文本框输入任何文字，然后按键盘的“完成”按钮。键盘消失，然后自动聚焦“第三名”文本框并阅读文本。

此行为不一致。

这是预期的行为吗？如何命令语音控制？（的tabindex）

非常感谢你。

Answer 1

不确定您使用 tabindex 属性的原因？大多数情况下，它们是不必要的 - 尤其是严格的正值，当浏览器实际上已经使用带有链接和表单元素的普通HTML代码时，它会混乱自然的Tab键顺序。
我的建议：从您的代码中删除任何tabindex属性，除了非常特殊的情况，例如在论坛中您要将文本输入文本区域的评论表单，然后是1或2标签，输入并且您正在提交无论用于插入可放置在textarea和提交按钮之间的bbCode的按钮，都会显示消息只要模板的HTML代码稍有变化，tabindex的存在就会被遗忘，它们不会被更新，它会破坏标签顺序。
相关的WCAG 2.0技术：

F44: Failure (...) due to using tabindex to create a tab order that does not preserve meaning and operability
H4: Creating a logical tab order through links, form controls, and objects
其他技术与上述技术相关联

现在关于代码的其余部分：表单元素的标签应使用... label 元素标记。将每个label元素与其各自的表单元素（任何input类型相关联 - 除了submit，image和button一个 - 以及任何select和textarea）是通过for和id属性的相同值完成的：

<label for="blah">My label</label><textarea id="blah"></textarea>

<强> JSFiddle of your code corrected

每个表单元素和标签都在其自己的段落元素
标签（在每个表单元素周围，因此表单元素右侧或其下方的错误或提示消息仍可以在标签中
添加到每个表单元素的唯一ID（我使用与name相同的值，但无论什么是有效的ID都可以）
for属性已添加到标签，其值与上面的每个ID相同

HTML代码

<form action="demo_form.asp">
    <p>
        <label for="fname">First name: <input type="text" name="fname" id="fname"></label>
    </p>
    <p>
        <label for="sname">Second name: <input type="text" name="sname" id="sname"></label>
    </p>
    <p>
        <label for="tname">Third name: <input type="text" name="tname" id="tname"></label>
    </p>
    <p>
        <label for="lhan">Last name: <input type="text" name="lhan" id="lhan"></label>
    </p>
    <p class="w300p txtright">
        <input type="submit" value="Submit">
    </p>
</form>

Safari浏览器中的iOS语音问题

1 个答案: