У меня есть кнопка, которая при нажатии удаляет изображение с экрана. Я хотел бы, чтобы программа чтения экрана объявила: «изображение удалено», когда это произойдет. Каков самый простой способ использования ARIA?Триггер-ридер при нажатии кнопки
Спасибо!
В моей голове я представляю, что у вас есть сетка из трех изображений, которые пользователь загрузил. Каждое из этих изображений, скорее всего, находится в DIV. Затем пользователь имеет возможность щелкнуть кнопку «удалить»/ссылку, которая удаляет изображение.
Предположим, что это так, мое предложение состоит в том, чтобы заменить удаленное изображение новым элементом, который имеет role="alert", а также в форме «Это изображение было удалено». Это позволит визуальным пользователям видеть, что изображение было удалено, и дать вашему читателю экрана что-то прочитать.
В следующем примере будет указано «Изображение удалено» при нажатии ссылки «удалить».
ПРИМЕЧАНИЕ. С NVDA это не очень хорошо работает в IE, поскольку NVDA/IE, похоже, игнорирует role = alert.
<!DOCTYPE html>
<html>
<script language="javascript">
function deleteImage(img) {
var theImage = document.getElementById(img);
var theDiv = document.createElement("div");
var theText = document.createTextNode("The Image was deleted.");
theDiv.appendChild(theText);
theDiv.setAttribute("role", "alert");
theImage.parentNode.replaceChild(theDiv, theImage);
return false;
}
</script>
<body>
<form>
<div id="image1"><img id="image1" src="" alt="image 1"/><a href="javascript:void(0);" onclick="return deleteImage('image1');">Delete</a></div>
<div id="image2"><img id="image2" src="" alt="image 2"/><a href="javascript:void(0);" onclick="return deleteImage('image2');">Delete</a></div>
<div id="image3"><img id="image3" src="" alt="image 3"/><a href="javascript:void(0);" onclick="return deleteImage('image3');">Delete</a></div>
</form>
</body>
</html>
Добавление '' '' aria-live = "assertive" '' 'может помочь NVDA/IE признать его. –
Почему вы хотите, чтобы программа чтения с экрана объявляла об этом? –
Кнопка удаляет изображение, и я хотел бы объявить: «изображение удалено». – Riko
предлагайте использовать aria-live, ссылаясь на https://www.w3.org/TR/wai-aria-practices-1.1/#LiveRegions –