WebSpeechAPI 使站点可访问

Question

WebSpeechAPI 使站点可访问，但它首先从整个文档开始，然后再次从悬停元素开始。

如何解决这个问题？

我引用了 WebSpeechAPI MDN 页面 中的大部分代码。

我只想让浏览器输出我悬停在上面的标签的文本。

但它是在先说出文件的所有内容之后才这样做的。我认为这样做是因为它在我到达元素之前先捕获了文档。

            var synth = window.speechSynthesis;
            var inputForm = document.querySelector('form');
            var inputTxt = document.querySelector('.txt');
            var voiceSelect = document.querySelector('select');
            var title = document.querySelector('#title');
            var pitch = document.querySelector('#pitch');
            var pitchValue = document.querySelector('.pitch-value');
            var rate = document.querySelector('#rate');
            var rateValue = document.querySelector('.rate-value'); 
 
          var voices = [];  //creat aan array to get thev voices  

       function populateVoiceList() {
         voices = synth.getVoices(); // get the voices form the browser

         for (i = 0; i < voices.length; i++) {
          var option = document.createElement('option');    //create an element named option
          option.textContent = voices[i].name + ' (' + voices[i].lang + ')';   //get all the info about the voice from the device and store in the text of the option tag
          if (voices[i].default) {
           option.textContent += ' -- DEFAULT';
           }
           option.setAttribute('data-lang', voices[i].lang); //set attributes of the option tag
           option.setAttribute('data-name', voices[i].name);
           voiceSelect.appendChild(option);
         }
       }
        populateVoiceList();
        if (speechSynthesis.onvoiceschanged !== undefined) {    // this handler gets fired when the list returned by the getVoices function get changed
             speechSynthesis.onvoiceschanged = populateVoiceList;   //requires a function to handle the change in the list
         }
       document.onmouseover = function(e)  {
         var targ;
        event.preventDefault();    //prevent default actions of the browser 
        
        if (e.target) targ = e.target;

         var utterThis = new    SpeechSynthesisUtterance(targ.textContent); //The SpeechSynthesisUtterance interface of the Web Speech API represents a speech request. 
          var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');  //get the data-name attribute of the selected option 

      for (i = 0; i < voices.length; i++) {
         if (voices[i].name === selectedOption) {
            utterThis.voice = voices[i];     //. We set the matching voice object to be the value of the  SpeechSynthesisUtterance.voice property.
        }
     }

       utterThis.pitch = pitch.value;
      utterThis.rate = rate.value;
      synth.speak(utterThis);
       pitch.onchange = function() {
         pitchValue.textContent = pitch.value;
      }

      rate.onchange = function() {
         rateValue.textContent = rate.value;
       }
    }

<!DOCTYPE html>
<html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
    </head>

    <body>
     <h1 id="Speech sYNTHESIZER" >Speech synthesiser</h1>

     <p>Enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p>

     <form>
      <input type="text" class="txt">
          <div>
            <label for="rate">Rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
            <div class="rate-value">1</div>
            <div class="clearfix"></div>
     </div>
      <div>
        <label for="pitch">Pitch</label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
        <div class="pitch-value">1</div>
        <div class="clearfix"></div>
      </div>
      <select></select>
       </form>    
   
    </body>
 </html>

Answer 1

All I want is for the browser to output the text of the tag that I am hovering over.

你的出发点是正当的，但事实上，除非你正在制作一款特殊的游戏或一个创新的界面，否则这是一个糟糕的主意。 Web 上的可访问性根本无法像这样工作。您最好尝试符合 WCAG 等标准，以使您的网站易于访问。

有几个原因，至少有两个原因：

查找要用鼠标说出的元素是可能的，但这不是在网络上导航的常用方式。
- 盲人通常不使用鼠标，因为他们不关心元素在屏幕上的位置，那样很快就会迷路或错过重要信息。他们只需要在使用选项卡、按标题或屏幕提供的另一种方式导航时让它们逻辑显示 reader。
- 对于视力不佳的用户，使用鼠标阅读光标下方的元素是否有帮助取决于他们的视力，但出于与盲人用户相同的原因，它通常只是一种补充帮助；和屏幕 reader 软件具有 built-in.
屏幕 reader 用户对语言、语音、速率、音调等有自己的偏好。幸运的是，他们不需要为访问的每个站点都设置这些偏好

因此，除非您正在制作非常特别或新颖的东西，否则最好坚持使用常用的方式来访问您的网站。

But it does that after speaking out all the contents of the document first. I think it does that because it catches the document first before I can reach the element.

这可能是事件冒泡的原因

Answer 2

我没有资格评论您的辅助功能尝试的正确性。其他答案是最好的。

既然您提到正在阅读整个文档，我认为这是因为您将鼠标悬停事件附加到位于以下位置的文档：

document.onmouseover = function(e)  { ... };

根据我的知识和我的 ES6 语法，我写下了以下代码，实际上 select 所有单独的标签而不是文档。

const tags = document.body.querySelectorAll();

//Adds mouseover event listener to each tags in tags
for(let i=0; i<tags.length(); i++){
    let text = tags[i].textContent;
    tags[i].addEventListener('mouseover', function(text){
        //add code to speak the 'text' variable here
    });
}

基本上，我使用 querySelectorAll 将所有标签获取到 tags 数组。接下来，遍历每个标签以提取每个标签的 textContent。最后为 tags 中的每个标签添加了事件侦听器，以运行触发 mouseover 时的说话功能。

希望对您有所帮助！

Get all elements in the body tag using pure javascript

WebSpeechAPI 使站点可访问

WebSpeechAPI to make a site accessible

html

javascript

forms

accessibility

webspeech-api