标签: accessibility

有什么方法可以在不破坏屏幕阅读器解释表格其余部分的情况下以可访问的方式隐藏表格标题吗？隐藏<caption>与通常推荐样式隐藏元素在视觉上打破了VoiceOver的行为，使其通过读取线性使用“下一个”按键时跳过最后一行在表中。（可以通过显式向下导航列来强制 VoiceOver 进入最后一行，但这需要用户知道这样做。）

我认识到这可能是 VoiceOver 本身的一个错误，但如果有一个干净的解决方法，那将是理想的，因为 WCAG 需要实际可用的辅助技术的可访问性。

这是一个极简示例来演示：

更新：下面的样式规则是 Magento 框架中使用的标准规则，用于在视觉上隐藏元素，同时让屏幕阅读器可以访问它们。导致 VoiceOver 行为的关键规则是position: absolute; 但是，如果简单地将其删除，则布局流程会受到影响。

caption {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Run Code Online (Sandbox Code Playgroud)

<table>
  <caption>Table of Fruits</caption>
  <thead>
    <tr>
      <th>Fruit</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Pear</td>
      <td>Green</td>
    </tr>
  </tbody>
</table>

<p>Voiceover will jump straight from "Red" in prior table to this paragraph, skipping the last row.</p>

Run Code Online (Sandbox Code Playgroud)

html css accessibility voiceover

Sco*_*nan

2019 02-27

14
推荐指数

2
解决办法

5087
查看次数

单独的影子根中是否允许重复 ID？

tl;博士：

只要两个元素都在单独的影子根下，具有相同 ID 属性的两个元素是否有效？
aria-labelledby在这种情况下，屏幕阅读器会正确处理吗？

例如，考虑这个自定义元素：

(function () {
  let template = document.createElement('template')
  template.innerHTML = `
    <svg viewBox="0 0 206 74"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         role="img"
         aria-labelledby="logo-title">
      <title id="logo-title"><slot>Logo of Some Company.</slot></title>

      <path d="..." fill="..."/>
    </svg>
  `

  class Logo extends HTMLElement {
    constructor () {
      super()

      let shadowRoot = this.attachShadow({mode: 'open'})
      shadowRoot.appendChild(template.content.cloneNode(true))
    }
  }

  customElements.define('company-logo', Logo)
})()

Run Code Online (Sandbox Code Playgroud)

这样做是否有效：

<company-logo>
  Title One.
</company-logo>

<company-logo>
  Some other title.
</company-logo>

Run Code Online (Sandbox Code Playgroud)

这会是一个有效的 DOM，即使两者<title>共享相同的 ID？屏幕阅读器会为第一个徽标读“标题一”，为第二个徽标读“其他标题”吗？

html accessibility shadow-dom custom-element

kam*_*uel

2020 02-18

14
推荐指数

1
解决办法

1658
查看次数

网站是否可以获得Javascript并且仍然符合Section 508标准？

我想我理解Javascript如何工作以便在第508节中没问题.但我一直无法找到相关问题的答案:我的网站是否需要在没有Javascript的情况下工作才能符合508条款？

举一个极端的情况,如果没有Javascript的用户无法登录,是否违反了508条款？如果是这样,文本中的位置是什么解释？

我知道所有内容都必须通过屏幕阅读器,键盘和鼠标用户等访问.但是,没有Javascript的用户是否需要访问所有内容？

javascript accessibility section508 disability

Mik*_*tor

2010 06-29

13
推荐指数

1
解决办法

4793
查看次数

如何通过辅助功能API获取当前所选文本的全局屏幕坐标.

我需要帮助才能找到,在任何应用程序上按CMD + CTRL + D时,Dictionary应用程序如何显示以下弹出对话框中的所选文本.我想为我的cocoa应用程序实现相同类型的功能,我的应用程序将在后台运行,并在所选文本的某些热键按下时显示建议.

字典应用程序热键建议对话框

我已经实现了热键捕获,我只需要有代码来获取屏幕上所选文本的矩形区域,所以我可以像字典应用程序一样显示对话框.

谢谢

cocoa accessibility screen objective-c selectedtext

Ami*_*Sri

2012 02-21

13
推荐指数

2
解决办法

3352
查看次数

当我的页面有两种语言时,在HTML 5中指定Document语言的位置？

这是HTML5 Skeleton

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bare Bones HTML5</title>
</head>
<body>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

如果我的网页有一些丹麦语和一些英语,那么我应该如何用HTML定义页面的语言？

html html5 w3c accessibility

Jit*_*yas

2011 10-17

13
推荐指数

1
解决办法

1万
查看次数

符合WCAG 2.0 AA会妨碍使用JavaScript吗？

我基于理解一致性的理解是,只要我们不生成任何不合规的内容并且我们明确声明我们支持JavaScript,我们仍然可以使用JavaScript.那是对的吗？

javascript accessibility wcag

Roy*_*ang

2014 05-29

13
推荐指数

3
解决办法

7531
查看次数

如何启动AccessibilityService？

我正在尝试使用开始实现AccessibilityService

Intent mailAccessabilityIntent = new Intent(this, EmailAccessabilityService.class);
startService(mailAccessabilityIntent);

Run Code Online (Sandbox Code Playgroud)

我的问题onServiceConnected()从未被调用过.我该如何正确启动此服务？

service android accessibility

eya*_*yal

2014 10-10

13
推荐指数

2
解决办法

1万
查看次数

使内嵌链接的可点击区域更大而不影响布局

我希望使链接的可点击区域比实际可用的链接更大,因为对于预期的用户来说,它很难被击中.大约1.5倍的尺寸可能是合适的.这些是普通文本中的链接,所以我实际上无法将它们变大,这会弄乱布局.

我使用HTML5,CSS3,JS甚至Mozilla特定功能来实现这一点,因为最新的Firefox版本是唯一的目标,虽然基本的CSS/HTML而不是这样的黑客当然会更好!

html css accessibility

not*_*sed

2013 03-25

13
推荐指数

2
解决办法

1万
查看次数

HTML表格中隐藏的咏叹调标签(用于屏幕阅读器辅助功能)

在我的网页中,我需要创建一个表,该表具有根据某些用户配置可见或隐藏的标题行.此表也需要完全可访问(具体来说,因为表可能很长,我希望读取行/列标题的快捷方式可以工作).我只有ChromeVox进行测试(我将详细介绍与我发现的博客文章中其他读者的行为).

我目前的布局与此类似:

CSS:

.table-header-show {
}

.table-header-hide {
  display: none;
}

Run Code Online (Sandbox Code Playgroud)

HTML:

<table>
  <!-- ${show} is used to choose the right class the user configuration -->
  <thead class="table-header-${show}">
    <tr>
      <th>Name</th>
      <th>Value 1</th>
      <th>Value 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>Value 1a</td>
      <td>Value 2a</td>
    </tr>
  </tbody>
</table>

Run Code Online (Sandbox Code Playgroud)

当标题可见时,根本没有问题.标题隐藏后,取决于屏幕阅读器是否读取这些标签:

我想在屏幕阅读器上使用常规导航*时跳过标题行,但是使用标题行来宣布列标签
使用ChromeVox,第一个工作(跳过导航),但第二个失败(隐藏的行不用于标记列)
再次使用ChromeVox,将隐藏移动声明为style属性而不是a class,会导致所需的行为都起作用
根据我发现的博客文章,屏幕阅读器display: none有时会忽略内容,有时他们不会 - 所以我不确定我可以依靠这种隐藏来保证我的目的是可靠的(隐藏导航,用于标签)

那么,我如何以跨浏览器阅读器的方式实现我想要的行为呢？