Ajax и Screenreaders: когда это может работать?

Первый тест просто обновляет абзац текста непосредственно под элементом триггера. Вот основной HTML:

<p> 

    <a href="./" id="trigger">This link is the trigger.</a> 

</p> 


<p id="response"> 

    This paragraph will update with the response. 

</p> 


<p> 

    This is some text that comes after the response, 

    to check continuity. 

</p>

А вот и JavaScript:

 window.onload = function() 

{ 

  var trigger = document.getElementById('trigger'); 

  var response = document.getElementById('response'); 


  trigger.onclick = function() 

  { 

    var request = null; 

    if(typeof window.XMLHttpRequest != 'undefined') 

    { 

      request = new XMLHttpRequest(); 

    } 

    else if(typeof window.ActiveXObject != 'undefined') 

    { 

      try { request = new ActiveXObject('Microsoft.XMLHTTP'); } 

      catch(err) { request = null; } 

    } 


    if(request != null) 

    { 

      request.onreadystatechange = function() 

      { 

        if (request.readyState == 4  

            && /^(200|304)$/.test(request.status.toString())) 

        { 

          response.innerHTML = request.responseText; 

        } 

      } 


      request.open('GET', 'test.php?msg=Hello+World', true); 

      request.send(null); 

    } 


    return false; 

  }; 

};

Сценарий «test.php» просто выводит сообщение для responseText это могло быть что угодно:

 <?php 


echo "And here's the response - " . $_GET['msg']; 


?>

Чтобы выполнить тест, мы переходим к ссылке триггера с помощью клавиатуры и нажимаем Enter, чтобы активировать эту ссылку. Ожидается, что все устройства сработают, но то, как они будут реагировать после этого, вероятно, будет сильно различаться

Результаты первого теста

Все устройства запускают функцию и большинство обновляют ответный абзац, но ни одно устройство не считывает его автоматически (как и ожидалось). Этот тест просто используется, чтобы убедиться, что обновление контента общепризнано, но, к сожалению, это не так: Windows Eyes не обновляет свой речевой вывод до тех пор, пока не сработает ссылка запуска, что не произойдет, если мы просто позволим читателю читай дальше. Таким образом, в зависимости от взаимодействия с пользователем, они могут вообще не услышать обновленное сообщение.

Тем не менее, это неплохое начало, и, возможно, наша проблема с Windows Eyes уникальна для этого примера. Здесь мы ищем нечто большее, чем просто обновление — мы хотим, чтобы ответ звучал автоматически, без дальнейшего вмешательства пользователя; давай перейдем к этому намерению.

Второй тест

Второй тест почти такой же, как первый, но на этот раз мы предпримем дополнительный шаг, установив document.location Вот дополнение к функции onreadystatechange

 request.onreadystatechange = function() 

{ 

  if (request.readyState == 4 

      && /^(200|304)$/.test(request.status.toString())) 

  { 

    response.innerHTML = request.responseText; 

    document.location = '#response'; 

  } 

}

Результаты второго теста

Эти результаты более запутанные:

• В Home Page Reader 3.02 текст ответа автоматически считывается, но читатель на этом не останавливается: он продолжает читать остальную часть страницы. Это сделало бы его приемлемым вариантом, если элемент response находится в самом конце страницы.
• В Home Page Reader 3.04 (обратите внимание, более свежая версия) настройка местоположения больше не работает правильно. Читатель возвращается к началу страницы, а не к абзацу с ответом (я также попробовал это с помощью location.replace, чтобы увидеть, изменится ли это, но это не так).
• В Hal 6.5 и Connect Outloud 2.0 читатель объявляет о новой загрузке страницы, но затем начинает чтение с элемента после ответа, полностью пропуская ответ.
• В JAWS 5.0 и 6.2 код не работает, а иногда вообще ничего не делает в ответ; в других случаях он снова перечитывает текст ссылки триггера или заголовок верхнего уровня; иногда он ведет себя так же, как Hal и Connect Outloud.
• В Windows Eyes 5.0 контент обновляется! Но помимо этого, он ведет себя так, как будто Home Page Reader 3.02: он объявляет о новой загрузке страницы, затем начинает читать (и включая) элемент response. Но это поведение не то, чем кажется: устройство работает так только потому, что Windows Eyes запоминает вашу предыдущую позицию при загрузке страницы, которую вы посещали ранее, и поскольку ответ приходит сразу после триггера, это следующее, что вы услышите , Если бы это было не так, он просто прочитал бы то, что было непосредственно после триггера.
• Windows Eyes 5.5 (бета) ведет себя точно так же, как Hal и Connect Outloud.

Там есть паттерн двусмысленности: несколько устройств делают одно и то же, перепрыгивая через абзац ответа и начиная с элемента, который появляется после него. Мне пришло в голову, что HTML может быть фактором, поэтому я изменил его так:

 <p> 

    <a name="response" id="response" href="#"> 

        This link will update with the response.</a> 

</p>

И, используя ту же настройку местоположения, результаты второго теста действительно меняются. Несмотря на то, что мы не используем ссылку href, ее добавление делает привязку фокусируемым элементом (где абзац или привязку без ссылки) нет, и это, похоже, делает его более надежным для некоторых устройств.

 <p> 

    <a href="./" id="response">  

        This link will update with the response.</a> 

</p>

 request.onreadystatechange = function() 

{ 

  if (request.readyState == 4 

      && /^(200|304)$/.test(request.status.toString())) 

  { 

    response.innerHTML = request.responseText; 

    response.focus(); 

  } 

}

 request.onreadystatechange = function() 

{ 

  if (request.readyState == 4 

      && /^(200|304)$/.test(request.status.toString())) 

  { 

      alert(request.responseText); 

  } 

}

 <form action=""> 

  <div> 

    <input type="text" id="response" size="50" 

        value="This field will update with the response"> 

  </div> 

</form>

 request.onreadystatechange = function() 

{ 

  if (request.readyState == 4 

      && /^(200|304)$/.test(request.status.toString())) 

  { 

    response.value = request.responseText; 

    response.focus(); 

  } 

}

 request.onreadystatechange = function() 

{ 

  if (request.readyState == 4 

      && /^(200|304)$/.test(request.status.toString())) 

  { 

    response.value = request.responseText; 

    if (typeof response.createTextRange != 'undefined') 

    { 

      var range = response.createTextRange(); 

      range.select(); 

    } 

    else if (typeof response.setSelectionRange != 'undefined') 

    { 

      response.setSelectionRange(0, response.value.length); 

    } 

  } 

}

 <form action=""> 

  <div> 

    <button type="button" 

      id="response">This button will update with the response 

    </button> 

  </div> 

</form>

 request.onreadystatechange = function() 

{ 

  if (request.readyState == 4 

      && /^(200|304)$/.test(request.status.toString())) 

  { 

    response.firstChild.nodeValue = request.responseText; 

    response.focus(); 

  } 

}