制作 aria-live 区域读取链接

问题描述

我想在事件发生时在 aria-live 区域内放置一个链接。

但是，当画外音读取 aria-live 区域时，它会以文本形式读取，并且不会读取可点击链接。

所以我在事件发生时的标记是

#include <iostream>
#include <string>
#include <vector>
#include <sstream>
#include <iterator>
#include <algorithm>
#include <regex>

const std::regex re{ R"(\s)" };

int main() {

    // Read a line from the user and check,if that worked
    if (std::string line{}; std::getline(std::cin,line)) {

        // Get all strings from thsi input line
        std::vector data(std::sregex_token_iterator(line.begin(),line.end(),re,-1),{});

        // Show result to user:
        std::copy(data.begin(),data.end(),std::ostream_iterator<std::string>(std::cout,"\n"));
    }
    return 0;
}

Voiceover 在事件发生时读取 hello world，然后将上下文放回引发事件之前所在的元素上。

有没有办法让旁白阅读 aria-live 中的内容而不仅仅是直接文本？

解决方法

不，这就是 aria-live 的目的 - 它宣布改变的文本。不会公布其他信息，例如角色（链接或按钮或列表）。

您可以“强制”阅读其他文本，但必须手动进行。所以你可以添加这样的东西：

<div role="region" aria-live="assertive">
 hello <a href="/world">world</a> <span class="sr-only"> link </span>
</div>

所以你会听到“hello world link”，但是当用户手动导航所有元素（通过使用画外音向右滑动）时，我会在宣布后删除额外的文本，他们会听到：

"你好"
“世界链接”
"链接"

（有关“仅限 sr”类的信息，请参阅 What is sr-only in Bootstrap 3?）。

但这并不是一个很好的解决方法。添加新元素时听到“hello world link”听起来就像“hello world”是链接，而只有“world”是链接。

如果您多解释一下用户体验，可能会有更好的解决方案来解决您要实现的目标。

voiceover wai-aria