标签: wai-aria

我相信我的问题可能过于简单，但我似乎找不到太多关于如何role="status"确定要宣布的内容的信息。任何反馈将不胜感激。不幸的是，大多数资源都指向这个页面，404s https://www.w3.org/TR/wai-aria/roles#status

我对 ARIA 及其屏幕阅读器功能相当陌生，但我一直在尝试找出弹出窗口未被读取的原因。当用户单击保存按钮刷新将显示消息的页面时，它会发生更改，但屏幕阅读器不会拾取消息中的更改。

从我读到的内容来看， aria-live="assertive" 和 role="alert" 都应该有效

我尝试了标签和咏叹调属性的各种位置，但没有运气。只有当我重新单击主要内容部分时，它才会读取警报。

我已经在 IE11 和 Chrome 上进行了测试（尽管它实际上只需要在 IE 上工作）

仅供参考，最初所有的 < p > 都是 < c:out >

--主要布局

<div class="body-content" style="padding: 4px 0">
 <a id="main_content" tabindex="-1" name="main_content"></a>

<!--                <h1>Main Content</h1> -->
<!--                <p>This is the main content area. -->


<tiles:insertAttribute name="body" />         


</div>

--在每个屏幕上包含消息

<jsp:include page="messages.jsp" />

--messages.jsp <

div id="errorDiv" aria-live="assertive" class="error" role="alert">
<c:if test="${not empty errors}">
<c:set var="popupErr" value=""/>

        <c:forEach var="error" items="${errors}">

                    <p > ${error}</p>
                <br />
            <c:if test="${popupErr != ''}"> …

html“隐藏”属性是一个布尔值，不需要设置值。只要存在就足够了。

那么“aria-hidden”属性呢？仅仅存在就足够了吗？或者是否需要设置值“true”？

如何使用 jQuery更改aria-selected="false"to的状态？aria-selected="true"

在这里你可以看到我是如何尝试做到这一点的：

$('element aria-selected').html(true)
$('element aria-selected').text(true)
$('element aria-selected').val(true)
$('element').attr('aria-selected', 'true').prop('selected', true)
$('element').attr('aria-selected', 'true')
$('element').prop('selected', true)

试图找出为什么 Lighthouse 审核将我的一堆链接标记为未通过elements have discernible names

<h3>
  <a href="https://..." class="custom classes here">My New Post Title</a>
</h3>

我的问题是所有链接都需要吗aria-labels，因为我想如果这只是一个普通链接，则链接内的文本就是所需要的？

或者我的标记结构还有其他问题吗？另一个标记元素是这个：

<a class="custom classes" href="https://...">
  <div class="custom classes" style="background-image: url('https://...');"></div>
  <div class="article-thumbnails-small__title">Post Title</div>
</a>

对于那个，我知道a没有文本，所以aria-label应该放在带有实际帖子标题的 div 上，对吗？

已解决 我看错了元素...祝你有美好的一天。

我目前正在尝试使具有一到多个子元素的 DOM 元素尽可能易于访问。该元素将包含使用多层背景图像的说明性内容。我目前正在使用子元素来提供图像描述，如这篇关于如何在内容组内标记说明性内容的信息丰富的博客文章中所述。容器元素还可以包含其他包含文本内容的子元素。

示例元素当前如下所示：

<div tabindex="0" class="comic-panel">
  <span role="img" aria-label="There is a cat sitting in the window."></span>
  <div style="background-image: url(/assets/img/window.png);" class="comic-panel__layer"></div>
  <div style="background-image: url(/assets/img/cat.png);" class="comic-panel__layer"></div>
  <p class="speech-bubble">Meow!</p>
</div>

使用 OSX VoiceOver 进行测试，切换到此元素后，图像描述和文本可以正常读取，但随后还会发布以下公告：

是否可以以某种方式更新此元素的标记，使此group公告不是由屏幕阅读器发布？在几乎所有情况下，用户都无法在元素内部进一步探索或使用任何内容，因此此消息将是多余的，我希望 VoiceOver 不将元素识别为触发此消息的组。

是否有关于何时选择 aria-scribedby 而不是 aria-labelledby 的指导？

阅读 MDN 关于这两个属性的指南，我感觉它们很相似并且可以互换。两者似乎都表明它们可以用于输入标签和其他内容，但许多合规性工具似乎不喜欢输入标签上的 aria-describeby。我讨厌仅仅因为工具说我应该盲目地应用特定属性，而且我更愿意知道有关何时以及为何的具体信息

以下是 MDN 上关于相关两个 aria 属性的条目：

aria-labelledby 属性

aria-由属性描述

我有一些非常基本的数据，如下所示：

{\n  "name": "John Doe",\n  "city": "Minneapolis",\n  "state": "Minnesota",\n  "country": "United States",\n  "age": "42"\n}\n

我需要这样显示它：

| name    | John Doe      |\n| city    | Minneapolis   |\n| state   | Minnesota     |\n| country | United States |\n| age     | 42            |\n

正如您所看到的，上表的标题左对齐，并且行值全部对齐。

根据 W3 的说法，制作垂直表格的方法就像下面的代码片段，但他们还指出：

\n

注意：某些屏幕阅读器会读取 \xe2\x80\x9cVenue\xe2\x80\x9d 单元格中的 \xe2\x80\x9cDate \xe2\x80\x93 Event \xe2\x80\x93 Venue\xe2\x80\x9d ，因为元素的方向<th>不明确。

\n

{\n  "name": "John Doe",\n  "city": "Minneapolis",\n  "state": "Minnesota",\n  "country": "United States",\n  "age": "42"\n}\n

| …

关于 aria 属性翻译的最佳实践是什么？如果一个页面有多种语言版本，那么 aria 属性也应该有多种语言版本吗？

我正在使用react-i18next useTranslation 挂钩将网站翻译为几种不同的语言，我想知道是否也应该使用该挂钩来翻译我的aria 属性。

什么是最好的方法是让屏幕阅读器类型的辅助设备以富有洞察力的方式宣布部分？

理想情况下,<h1>有没有一种方法可以标记<section>可以实现此目的的实际标记,而不是将此作业传递给子标记？

如果a <article>被分解为<section>s,则认为<section>s不适合联合,但它们仍应在文档结构中具有自己的固有身份.我们作为HTML作者如何记录这一点？

示例:给出此树:

Article: A review of the iPad
section: brief preamble, statement of goals
section: aesthetics
section: performance
section: target market
section: wrap up

我们如何标记<section>s以使辅助设备能够从<section>标签中获取部分焦点？

这是HTML中的一个例子:

<!DOCTYPE html>
<html>
<head> <!-- meta data and css --> </head>
<body>
    <article>
        <h1>An article about markup!</h1>
        <section  id="examele_1">
            <h1>Example 1</h1>
        </section>
        <section class="example 2">
            <h1>Example 2</h1>
        </section>
        <section data-subject="Example 3">
            <h1>Example 3</h1>
        </section>
    </article>
</body>
</html>

那么:示例1到3中的任何一个都是不错的选择,还是有更好的选择？