javascript - 通过 WebView 以编程方式触发 Android TalkBack 文本

Question

所以我一直在努力制作一个包含一些文本的 Android WebView，以便盲人用户更容易访问，我想知道是否可以触发 Android TalkBack 自动说出一些文本？
我正在考虑这样的链接:

<a href="#" id="flubble">Flubble</a>

还有一个像这样的元素:

<a href="#" id="bibble">Bibble</a>

然后使用焦点事件自动读取链接中的文本:

document.getElementById("flubble").addEventListener("click", function(event) {
    event.preventDefault();
    document.getElementById("bibble").focus();
    //I want it to say "bibble" here
});

本质上，当它聚焦时，我希望它说出文本？有什么方法可以完成这个“自动对讲”功能吗？
干杯 <3

Answer 1

简答
使用视觉隐藏的 aria-live区域并将相关文本复制到该区域。另外使用 <button>不是 <a href="#"用于互动内容。
长答案
在没有明确目的的情况下混淆用户焦点(例如在打开模式时将关闭按钮聚焦在模式中)......坏主意，您要做的最后一件事是让用户失去他们在页面上的位置。
此外，这意味着您需要添加 tabindex="-1" 的负载。整个页面中您想要读取的任何元素上的属性通常不会获得焦点，这使得可维护性成为一场噩梦。
如果您想读出文本，我建议您使用 aria-live地区。
aria-live on an element 旨在大声说出该元素中包含的任何内容。每次更新元素的内容时都会发生这种情况。
你会注意到我添加了 aria-live="polite"因为这样可以确保他们的公告不会打断页面上的其他公告。
为了完整起见，还有 aria-live="assertive" (但你应该只将它用于警告和错误/状态更新等事情，因为它会切断任何当前所说的句子)和 aria-live="off" (这对于禁用您的对讲功能很有用，因为它实际上与在元素上没有 aria-live 相同)
我建议您将文本从您想要读出的相应元素中复制到一个视觉隐藏的 aria-live 中。地区。
如果您不知道视觉上隐藏的文本是屏幕上不可见的屏幕阅读器可访问的文本。虽然有很多图书馆都有 sr-only内置类我鼓励你使用visually hidden class in the fiddle below due to better compatibility and future proofing as I explained in this answer
我还演示了如何使其在您的 Web View 中可重用的概念，为使用 jQuery 表示歉意，这里已经很晚了，我想快速为您整理 fiddle !
在屏幕阅读器中尝试以下内容，我认为代码是不言自明的，但任何问题都可以问。最后，根据您的“详细程度”设置，如果您将这些内容复制到 aria-live地区...如果您没有听到这些，您的设置可能需要更改。
例子

$('button').on('click', function(e){
    console.log($(this).data('target'));
    
    var targetID = $(this).data('target');
    var text = $('#' + targetID).html();
    console.log(text);
    $('.speak-aloud').html(text);
    
});

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="visually-hidden speak-aloud" aria-live="polite"></div>

<button data-target="p2">Read text in paragraph 2</button>
<button data-target="p4">Read text in paragraph 4</button>
<button data-target="longer-text">Read the section contents</button>

<p>This is some other text</p>
<p id="p2">This is the text to be read aloud in paragraph 2</p>
<p>Some more filler text</p>
<p id="p4">paragraph 4, will be read aloud when the second button is clicked.</p>



<section id="longer-text">
<h2>Section Header</h2>
<a href="https://google.com">Go to google link for an example of more complex text</a>
</section>

根据您的示例，关于语义的最后一句话。
对于可访问性 - 语义很重要。
anchor 应该用于页面更改(或者在 SPA 中，如果整个事情是 AJAX 驱动的，则 URL 更改)，按钮应该用于同一页面上的交互式内容。所以使用 <button>而不是 <a href="#">因为这让屏幕阅读器用户知道会发生什么(如果我单击链接，我希望页面更改，如果我按下按钮，我希望某种形式的交互式内容)。