相关疑难解决方法(0)

所以我一直在努力让一个带有一些文本的 Android WebView 更容易被盲人用户访问，我想知道是否有可能触发 Android TalkBack 自动说出一些文本？

我在想一个这样的链接：

<a href="#" id="flubble">Flubble</a>

还有一个像这样的元素：

<a href="#" id="bibble">Bibble</a>

然后使用焦点事件自动读取链接中的文本：

document.getElementById("flubble").addEventListener("click", function(event) {
    event.preventDefault();
    document.getElementById("bibble").focus();
    //I want it to say "bibble" here
});

本质上，当它聚焦时，我希望它说出文本？有什么办法可以实现这种“自动对讲”功能？

干杯 <3

我有一个下载链接，但我找不到任何良好的可访问解决方案来说明如何处理这种情况。

我遵循一个共同的经验法则：“按钮做事，链接去地方”

我的情况是，我有一个触发文档下载的按钮（同一页面）

我认为这应该是一个具有按钮角色的锚点，因为它明确不会触发重定向或导航：

<a role="button" href="download.docx" download>Download File</a>

但是，强烈建议不要更改元素的本机语义。

我的同事建议这就是解决方案

<a href="download.docx" download>Download File</a>

但是：问题是屏幕阅读器（在我看来）没有提供足够干净的输出。它提到这个元素是一个链接，可能会与重定向混淆。

role="button" 解决方案告诉屏幕阅读器通知用户此链接的作用就像一个按钮，我认为这对于我们的“下载按钮”的特殊情况更具体。

任何清晰度将不胜感激。

我引用的是：https://css-tricks.com/building-good-download-button/

我有一个 Gatsby 项目，我想在其中使用 svg 作为我的主标题。

import Header from "../images/header.svg"

return (
  <h1>
      <Header/>
  </h1>
)

svg 中没有文本（文本纯粹使用矩形和路径制作），那么在可访问性和 SEO 优化方面我该怎么做？

我正在开发一个动态表单构建器，用户可以在其中向页面添加不同的内容块（按钮、文本输入、文本段落、图像等），然后他们可以发布这些内容，这将是一个简单的 HTML 表单。可以使用。

对于这个应用程序的“预览”部分（他们在其中添加不同的内容块并修改内容和外观），我想到最简单的方法是只显示最终产品 HTML 本身和这样我或多或少地保证预览中显示的内容与实际表单中显示的内容相匹配。

这很重要的地方在于模糊的样式怪癖，例如带有 display:block 的按钮的行为。

但是，我不希望预览像真实表单那样具有交互性。也就是说，我不想要以下行为：

• 输入接收焦点并能够插入内容
• 具有点击动画的按钮
• 点击链接导航
• 出现默认悬停样式。

此外，在可访问性方面，如果屏幕上出现一堆没有做任何事情的输入，则可能会非常混乱。

是否有浏览器本机/标准方式来做到这一点？

我的回退可能是禁用所有元素。但这不适用于例如链接。

另一种方法可能是在表单顶部放置一个不可见的 div，它会捕获所有点击事件。但我不喜欢可访问性 POV。

是否使用了这个role="presentation"目的？

代码示例

作为示例，请参阅此处的一些示例代码：https : //codepen.io/dwjohnston/pen/qBrGPmr?editors=1111

现在为此，我有 div role="button"- 这些按钮是可点击的， - 当您点击它们时，侧面板将显示内容配置，例如，输入、标签等的默认值。

已经存在一个问题 - 按钮内不允许有交互内容。

而且，我不应该能够选择这些控件（现在我可以手动添加tabindex = "-1"，但这不是完整的图片）。我不想混淆屏幕阅读器等。

我读过，始终包含一个<label>元素和一个<input type="email">元素是一种可访问性最佳实践，但是如果我没有要label包含在我的<input>元素中的元素怎么办？

我的意思是，目前，我正在设计一个网站，实际上没有任何文本可以放入<label>元素中（所以我根本没有创建一个），但我真的不知道该怎么做，因为我的 HTML 正在生成当我通过网络可访问性检查器运行它时出现可访问性错误。

是否必须编写一些文本并将其放入label元素中才能包含它，以便使我的 HTML 易于访问？或者还有其他方法可以使单个<input type="email">元素可访问吗？

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

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

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

aria-labelledby 属性

aria-由属性描述

我有一个 React SPA，其中有一些链接可以导航到其他页面或同一页面上的其他位置，这些导航要么以编程方式决定，要么依赖于 javascript 来转到同一页面上的另一个位置。

• href当链接显示时，我可能不知道该链接，因此我在单击处理程序中使用href="#"和渲染它event.preventDefault()，然后运行逻辑来决定链接应导航到哪里。
• 对于锚链接，我需要 javascript 滚动到元素，因为对于 SPA 路由器，基于哈希的锚链接可能无法工作，因为锚定元素可能尚不可用，而且我还需要平滑滚动。（在这种情况下，我可能仍然可以指定 href，这使链接可访问，但使用 javascript 来处理滚动）

对我来说，从语义上讲，它仍然应该是一个链接，而不是一个按钮，因为它将用户导航到另一个页面或同一页面上的另一个位置。但是，考虑到可访问性，屏幕阅读器没有足够的信息来理解链接目的地，并且无法将其告知用户。我想这不太好吧？

如何确保使用符合语义且易于访问？我应该使用按钮吗？或者我应该在 aria-label 链接中添加一些其他信息？或者对于可访问性来说，使用 href="#" 的链接实际上可以吗？

我正在学习 HTML 中的可访问性，我遇到了一个选择下拉 HTML 元素的示例，该元素旁边没有任何文本标签，仅页面上方标题的上下文可以让您了解该元素的含义元素包含例如关于国家的部分中的国家列表。

在其上运行辅助工具时，该工具抱怨没有可访问的名称，我想知道是否有一种方法可以为屏幕阅读器指定名称，而无需添加标签（如果不希望将其作为屏幕阅读器的一部分）设计？

我目前有这个 div 与 aria-live=assertive：

<div id="accesibility__ready" aria-live="assertive" aria-atomic="true"></div>

目前，在我的 js 文件中，我有一种方法可以使用 tabindex （第一个标题）然后设置页面中的所有内容<p>。一旦此方法完成，我想通过我的 aria live 通知用户他现在可以使用选项卡导航：

  var ariaAlert = document.getElementById('accesibility__ready');
  ariaAlert.setAttribute('aria-label','Content updated tab navigation ready'); 

我注意到有时 aria-live 会被读取，但随后它会被所有其他标签（不是 aria-live）打断，屏幕阅读器以某种方式决定读取这些标签。

我正在使用 Chrome 和 ChromeVox 扩展程序。

那么如何阻止 aria-live 被其他厂牌打断呢？

我正在尝试构建一个看起来像 Zoom 按钮的按钮。

这里有一个按钮可以在相机按钮内选择一个设备。我想创建类似的东西，你有一个按钮和另一个按钮，在里面展开一个选择器。

您如何以易于访问的方式创建它？

如果我在 React 中嵌套按钮，它会抛出错误，你不能在另一个按钮中嵌套一个按钮。Zoom 的等效项是：

<button>
  Stop Video
  <button>Pick Device</button>
</button>

这不起作用。您将如何创建这样的界面以使其保持可访问（和有效）？

我正在单元格中具有以下标记的表格上测试 JAWS 屏幕阅读器：

<center><i class="fa fa-check fa-1" title="MyTitle" aria-hidden="true" style="color:green" aria-label="read me"></i></center>

我注意到屏幕阅读器无法“输入”上面的单元格（由于 ）aria-hidden，所以我将其删除：

<center><i class="fa fa-check fa-1" title="MyTitle" style="color:green" aria-label="read me"></i></center>

现在它可以进入单元格但不读取任何文本。

有什么方法可以放置一些只能由屏幕阅读器访问且在用户界面上不可见的文本吗？

嗨，我正在处理一个表格，我想提高它的可访问性，但问题是它是使用具有“onClick”属性的表格行创建的，并且在使用屏幕阅读器（例如 VoiceOver、NVDA）阅读单元格和表格时或 JAWS 它不会将该行读取为可点击或任何会告诉用户单击该行会将他带到另一个页面的标志。

该表是由 JQuery Datatables 动态创建的，该表的片段如下所示：

<div id="DataTables_Table_1_wrapper" class="dataTables_wrapper" role="grid">
  <table
    class="list lista table table-bordered table-hover dlaList component-editable dataTable"
    data-editable-id="dla28475"
    style="width: 900px"
    id="DataTables_Table_1"
  >
    <thead>
      <tr role="row">
        <th
          class="sorting"
          tabindex="0"
          rowspan="1"
          colspan="1"
          style="width: 230px"
        >
          Activities
        </th>
        <th
          class="sorting_asc"
          tabindex="0"
          rowspan="1"
          colspan="1"
          style="width: 570px"
          aria-sort="ascending"
        >
          Description
        </th>
        <th
          class="sorting"
          tabindex="0"
          rowspan="1"
          colspan="1"
          style="width: 100px"
        >
          Status
        </th>
      </tr>
    </thead>
    <tbody role="alert" aria-live="polite" aria-relevant="all">
      <tr class="odd" onclick="functionForEvent();">
        <td class="">
          <div class="input-sm" status_id="undefined">Blah Blah</div>
        </td>
        <td class="sorting_1">
          <div class="input-sm" …