Safari浏览器中的iOS语音问题答案

【问题标题】：iOS voice over issue in safari browserSafari浏览器中的iOS语音问题
【发布时间】：2013-12-13 06:01:39
【问题描述】：

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

    <!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”文本框输入任何文本，然后按键盘的“完成”按钮。键盘消失，然后它会自动聚焦“第三名”文本框并阅读文本。

这种行为不一致。

这是预期的行为吗？如何给语音控制下达命令？ (标签索引)

非常感谢。

【问题讨论】：

标签： ios html safari accessibility voice

【解决方案1】：

不确定为什么要使用 tabindex 属性？大多数情况下，它们是不必要的——尤其是严格的正值，当浏览器实际上已经可以很好地处理带有链接和表单元素的普通 HTML 代码时，它们会扰乱自然的标签顺序。
我的建议：从您的代码中删除任何 tabindex 属性，除了非常特殊的情况，例如论坛中的评论表单，您想在文本区域中输入文本，然后输入 1 或 2 个选项卡，然后输入，然后无论如何都提交您的消息用于插入 bbCode 的按钮可以放在 textarea 和提交按钮之间。
只要您模板的 HTML 代码稍有更改，tabindex 的存在就会被遗忘，它们不会被更新并且会破坏 Tab 键顺序。
相关的 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）是通过 @ 的相同值完成的987654339@ 和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>