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

Posted 2023-03-14

【中文标题】如何在移动设备上创建可访问的脚注？

【英文标题】：How to create accessible footnotes on mobile?

【发布时间】：2018-04-02 20:46:25

【问题描述】：

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

现在的问题是：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();
    );
);

对我做错了什么有任何想法吗？

【问题讨论】：

我的问题其实很清楚，我不明白为什么有人反对关闭它。如果您不知道答案，请忽略该问题。

【参考方案1】：

我会在 Web Experience Toolkit (http://wet-boew.github.io/v4.0-ci/demos/footnotes/footnotes-en.html) 上查看这个示例，我们一直在使用它，没有任何问题。

它将从脚注切换到脚注，并允许用户返回到激活脚注链接之前的位置。