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

Question

我正在尝试创建Accible脚注。我开发它们的方式在台式机上正常工作，但在移动设备上不正常。

现在的问题是：配音转到页脚部分并集中精选脚注的内容，但不要读取内容，当用户试图滑动以阅读内容时，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

我将在网络体验工具包(http://wet-boow.github.io/v4.0-ci/demos/demos/footnotes/footnotes-footnotes-en.html(上检查此示例，我们一直在没有任何问题的情况下使用它。

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