标签: accessibility

我正在使用对讲来开发语音辅助功能，但是当画外音从文本视图中读取文本时，它将缩写/首字母缩写作为单词而不是单个字符读取。例如，FBI 应该是 FBI，而不是作为单词读出。

在我们的Web应用程序中，我们使用多个“响应式”HTML表格\xe2\x80\x94，如果它们的内容太宽，它们可以水平滚动（CSS规则：）width:100%; overflow-x: auto;。这允许在表格中显示所有必要的信息，而不会破坏布局并使整个页面可水平滚动。

在我们的例子中，这仅与小屏幕相关（在调整大小的浏览器窗口上或用户将字体大小增加超过 200%），因为我们的表格没有那么大（请注意，应用程序是内部的，并且只能在用于笔记本电脑/台式机屏幕）。

不幸的是，键盘用户无法使用 \xe2\x80\x94 使内容水平滚动，overflow-x滚动内容的唯一方法是使用鼠标；仅当整个页面可滚动或元素具有焦点时，才可以使用箭头键。

因此，为了使我们的表格可以通过键盘控制，我正在考虑添加tabindex="0"它们，从而允许使用箭头键。如果表格可滚动，这似乎工作正常，但也意味着非交互式元素（大屏幕上的表格）可以接收焦点，这可能会导致键盘用户感到困惑。

这是一个小例子（用 Bootstrap 制作，以节省编写一些 CSS 的时间）。调整浏览器窗口大小以进行测试：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>\r\n<h1>Some heading</h1>\r\n<a href="#">First link (for tabbing purposes)</a>\r\n\r\n<table class="table table-responsive" tabindex="0">\r\n    <thead>\r\n        <tr>\r\n           <th scole="col">Column 1</th>\r\n           <th scole="col">Column 2</th>\r\n           <th scole="col">Column 3</th>\r\n           <th scole="col">Column 4</th>\r\n           <th scole="col">Column 5</th>\r\n           <th scole="col">Column 6</th>\r\n           <th scole="col">Column 7</th>\r\n        </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n        <tr>\r\n           <td>Lorem ipsum</td>\r\n           <td>Lorem ipsum</td>\r\n           <td>Lorem ipsum</td>\r\n           <td>Lorem ipsum</td>\r\n           <td>Lorem ipsum</td>\r\n           <td>Lorem ipsum</td>\r\n           <td>Lorem ipsum</td>\r\n …

我有一个<nav>有 2 个级别的元素。顶级项目用<button>标签标记，子项目用<a>标签标记，例如：

<nav role="navigation">
    <ul>
        <li>
            <button type="button">Category 1</button>

            <ul class="submenu">
                <li>
                    <a href="/cat1/subcat1">Subcategory 1</a>
                </li>
                <!-- ... other links -->
            </ul> <!-- /.submenu -->
        </li>
        <li>
            <button type="button">Category 2</button>

            <ul class="submenu">
                <li>
                    <a href="/cat2/subcat1">Subcategory 1</a>
                </li>
                <!-- ... other links -->
            </ul> <!-- /.submenu -->
        </li>
    </ul>
</nav>

顶级项目仅用作容器，没有自己的页面可供链接。

我应该如何向此标记添加键盘辅助功能？

我目前想到的选项是：

选项1

当顶级项目（<button>标签）获得焦点时打开菜单。
当用户通过选项卡浏览子项目时，保持菜单打开。
当焦点移动到另一个顶级项目或页面的其余部分时关闭菜单。
另外，允许通过 Escape 键关闭菜单并转移焦点。

选项2

使用 a 将获得的焦点语义role="menu"，即：
顶级项目上的 Enter、空格或向下箭头打开菜单；
子项目上的向下箭头将焦点移动到下一个项目；
子项目上的向上箭头将焦点移动到上一个项目；
顶级项目上的向上箭头可关闭菜单，并且；
在子项目上时，退出键可关闭菜单并将焦点转移到顶级项目。 …

我正在制作一个可访问的网络应用程序。其中一项功能是允许用户滚动到页面的特定部分的按钮。我使用 window.scrollTo(x,y) 来实现此功能。

现在使用内置的 Mac VoicerOver 测试我的应用程序，我发现虽然我可以毫无问题地单击按钮并滚动，但滚动后，VoiceOver 不会读取任何内容。相反，我必须单击鼠标，或使用等效键盘使其在滚动后读取屏幕上的内容。

恐怕有些用户可能没有意识到在点击按钮后需要再次点击。我有两种可能的解决方案：

1. 当屏幕阅读器读取按钮时，它还会告诉用户，如果他们想要进入实时聊天，则需要在单击按钮后再次单击。我知道如何实现这个，但它看起来冗长且愚蠢。

2. 更改我的代码，以便 VoiceOver 在滚动后读取内容。我不知道如何实现这一点。

我希望屏幕阅读器阅读的内容包含在标签中。

我的应用程序中有一些屏幕，TalkBack 无法推断出正确的阅读顺序。根据文档，我可以使用android:accessibilityTraversalAfter和朋友来改变阅读顺序。但它对我来说不适用于可聚焦的元素，ViewGroup这些元素应该一起阅读。

整个布局如下所示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:accessibilityTraversalBefore="@id/before"
    android:focusable="true"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/before"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:accessibilityTraversalAfter="@id/before"
        android:text="Before"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/after"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:accessibilityTraversalBefore="@id/after"
        android:text="After"
        app:layout_constraintBottom_toTopOf="@+id/before"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

它呈现After在屏幕中间的Before底部。我希望 TalkBack 将整个屏幕视为单个连续元素，因此我设置android:focusable为true. 默认情况下，TalkBack 读取为：“之后，之前”。但我希望它读作“之前，之后”。虽然我添加了android:accessibilityTraversalBeforeand android:accessibilityTraversalAfter，但它仍然显示为“之后，之前”。这是节点树调试的输出：

TreeDebug: (-2147455381)429.FrameLayout:(0, 0 - 1080, 1920):A
TreeDebug:   (30189)429.TextView:(42, 101 - 397, 172):TEXT{My Application}:A:supportsTextLocation
TreeDebug:   (31150)429.ViewGroup:(0, 210 …

理想情况下，iOS 应用程序使用的字体大小遵循用户系统范围的字体大小设置。2017 年的 WWDC 演讲“使用动态类型构建应用程序”涵盖了该主题。

在简单的情况下，您可以UIView使用命名样式（如body, caption1, ）设置 的字体title，其大小根据用户的设置而变化。

在更棘手的情况下，您需要为不同的字体大小编写不同的自动布局约束。例如，当字体较大时，水平堆叠的标签可能需要变为垂直堆叠。

对于这种情况，WWDC 演讲展示了如下代码：

if traitCollection.preferredContentSizeCategory > .extraExtraLarge {
    NSLayoutConstraint.deactivate( horizontalConstraints )
    NSLayoutConstraint.activate( verticalConstraints )
} else {
    NSLayoutConstraint.deactivate( verticalConstraints )
    NSLayoutConstraint.activate( horizontalConstraints )
}

SwiftUI 中与此等效的是什么？

我的页面包含多个 HTML 元素，当用户使用 Tab 键和屏幕阅读器从上到下导航页面时，这些元素会被忽略和跳过。我可以通过将属性 tabindex="0" 添加到包含屏幕阅读器需要读取的文本的 div 来修复此问题。一些评论说这不是正确的做法。哪个是推荐的替代方案？

I\xc2\xb4m 在 Android 上使用 Talkback 来导航页面，在 Windows 上使用 Jaws 和 Narrator，它们都有相同的行为，没有 tabindex 的元素将被忽略，它会直接跳转到<a>跳过标签周围的标题和文本的元素<a>。

我已经在 google chrome light house 中为我的角度应用程序运行了可访问性测试，并收到以下错误

我添加了“aria-labelledby”，但似乎不起作用。谁能帮我解决这个问题。下面是给我这个错误的html代码。

<div class="heading form-group col-md-4 col-xs-12">
     <label for="fuels">Fuel Filter</label>
     <ng-select class="oss-ngselect" [items]="fuelType" bindLabel="name"
           placeholder="View All" [(ngModel)]="searchPremiseFuelType" [dropdownPosition]="'bottom'" 
           id="fuels" name="fuels" (change)="changeFuelType(searchPremiseFuelType.type)"
           aria-labelledby="fuels">
     </ng-select>
</div>

我正在单元格中具有以下标记的表格上测试 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>

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

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

我正在构建一个 React 应用程序，它采用日历的形式，用户应该能够单击日历上的日期。这些日子由大方块表示，以便它们可以包含当天的信息。出于可访问性的原因，使用<button>s 似乎是最明智的选择，但我的研究（为什么 <button> 元素不能包含 <div>？）+（https://www.w3.org/TR/2012/WD -html5-20120329/the-button-element.html#the-button-element ) 表示将 div 放在按钮内是不正确的。我能想到的唯一的其他选择是将日子变成<div>自己的日子，但使它们可点击并手动提供它们tabIndex和role适合可访问性目的的功能。

<div>对于可点击区域（其中还可能包含多个 s），正确的 html 标签或方法是什么？