Question

我正在尝试创建可访问的脚注。我开发它们的方式可以在桌面上正常工作，但不能在移动设备上工作。

目前问题是：VoiceOver进入页脚部分并聚焦所选脚注的内容但不读取内容，当用户尝试滑动以阅读内容时，VoiceOver继续阅读下一个脚注的内容

这是链接的结构，将用户引导到正确的脚注：

<p>Some text<sup><a href="#foot1" role="doc-noteref"><span class="hidden">footnote</span>1</a></sup></p>

这是脚注的结构：

<p role="doc-footnote" tabindex="-1" id="foot1">
    <sup class="supoffset">
        <span class="ada">HIDDEN TEXT TO THE USER THAT NEEDS TO BE READ BY THE SCREEN READER</span>1</sup>
    <span class="sup-span">VISIBLE TEXT TO THE USER THAT NEEDS TO BE READ BY THE SCREEN READER</span>
</p>

这是我的JS：

$("a[href^='#foot']").on("click", function(e) {
    e.preventDefault();
    var $theFootnote = $(this).attr('href');
    $('html, body').animate({scrollTop: $($(this).attr('href')).offset().top-15}, 400, function() {
        $($theFootnote).focus();
    });
});

我做错了什么想法？

Answer 1

我会在Web Experience Toolkit（http://wet-boew.github.io/v4.0-ci/demos/footnotes/footnotes-en.html）上查看此示例，我们会一直使用它而不会出现任何问题。

它将从脚注翻到脚注，并允许用户在激活脚注链接之前返回原位。

如何在移动设备上创建可访问的脚注？

1 个答案: