所以我一直在努力让盲人用户更容易访问其中包含一些文本的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
简短回答
使用视觉上隐藏的aria-live区域，并将相关文本复制到该区域中。另外，对交互式内容使用<button>而不是<a href="#"。
答案很长
在没有定义用途的情况下干扰用户焦点(例如当关闭按钮打开时以模式聚焦(。。。坏主意，你最不想做的事情就是让用户失去他们在页面上的位置。
此外，这意味着您需要在整个页面中添加tabindex="-1"属性，加载到您想要读取的任何通常不会获得焦点的元素上，这使得可维护性成为一场噩梦。
如果你想读出文本，那么我建议你使用aria-live区域。
元素上的aria-live被设计为大声说出该元素中包含的任何内容。每次更新元素的内容时都会发生这种情况。
你会注意到我添加了aria-live="polite"，因为这确保了他们的公告不会干扰页面上的其他公告。
为了完整起见，还有aria-live="assertive"(但你只应该真正将其用于警告和错误/状态更新，因为它会切断任何当前说出的句子(和aria-live="off"(这对禁用对讲功能很有用，因为它实际上与元素上没有aria-live相同(
我建议您将文本从要读取的相应元素中复制出来，并复制到视觉隐藏的aria-live区域中。
如果您不知道视觉上隐藏的文本是屏幕上看不到的可通过屏幕阅读的文本。尽管有很多库内置了sr-only类，但我鼓励您使用下面的fiddle中的视觉隐藏类，因为我在这个答案中解释了更好的兼容性和未来验证
我还演示了如何使其在您的web视图中可重复使用的概念，对使用jQuery表示歉意，现在已经很晚了，我想尽快为您整理好！
在屏幕阅读器中试试下面的代码，我认为代码是不言自明的，但任何问题都可以问。最后取决于您的"；冗长；设置第三个按钮显示，如果您将其复制到aria-live区域，则事情会被宣布为相同的(具有语义含义，如"标题"one_answers"链接"(。。。如果你没有听到这些，你的设置可能需要更改。
示例
$('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>最后一句基于你的例子的语义
对于可访问性，语义很重要
锚应该用于页面更改(或者在SPA中，如果整个内容都是AJAX支持的，则URL更改(，按钮应该用于同一页面上的交互式内容。因此，使用<button>而不是<a href="#">，因为这可以让屏幕阅读器用户知道该期待什么(如果我点击链接，我会期待页面更改，如果我按下按钮，我会期望某种形式的交互式内容(。
步骤1：创建Javascript接口
public class JavascriptSpeakInterface {
private Context context;
private TextToSpeech tts;
public JavascriptSpeakInterface(Context context, TextToSpeech tts){
this.context = context;
this.tts = tts;
}
@JavascriptInterface
public void speak(String msg){
tts.speak(msg, TextToSpeech.QUEUE_FLUSH, null, null);
}
}
步骤2：将界面与您的网络视图连接
webView.addJavascriptInterface(new JavascriptSpeakInterface(getContext(), new TextToSpeech(getContext(), this)), "android");
步骤3：在javascript中调用speak函数
android.speak(string);
注意：必须在Web视图中启用Javascript
解释：
步骤1，类被创建为具有Android和Web代码之间的接口。
步骤2，将Android和web代码连接在一起，其中"；android"；可以用来访问接口的方法。(你可以把它改成你喜欢的任何东西(
步骤3，从javascript调用接口的speak方法，使用标签"android"；。