accessibility 相关问题

在 iOS 和 Mac 上的 Voice Over 中垂直表格标题读错

我有一个带有垂直标题的表格，我正在使用画外音，在导航时它没有在 th 和单元格之间进行正确的关联。我发现的一些示例使用的是 scope=&...

跳过链接应该去哪里？

axe-core 4.6.3 在标题上方、页面地标之外的跳过链接上抛出错误“所有页面内容都应包含在地标中”。 axe-core 4.6.3 在标题上方、页面地标之外的跳过链接上抛出错误“所有页面内容应包含在地标中”。 <ul> <li><a id="top-anchor" class="skip-anchor" name="top"> </a></li> <li><a id="skip-to-nav" class="skip-link focusable" href="#nav">Skip to navigation</a></li> <li><a id="skip-to-content" class="skip-link focusable" href="#content">Skip to main content</a></li> </ul> 有什么方法可以标记这些吗？标准是什么？ 是的，您可以使用地标标记跳过链接 <nav> <ul> <li><a id="top-anchor" class="skip-anchor" name="top"> </a></li> <li><a id="skip-to-nav" class="skip-link focusable" href="#nav">Skip to navigation</a></li> <li><a id="skip-to-content" class="skip-link focusable" href="#content">Skip to main content</a></li> </ul> </nav>

NVDA 没有读取按钮的 aria-label

我正在努力让我的应用程序遵守可访问性标准。我根据数据列表添加了动态数量的按钮。我无法让 NVDA 读取按钮的 aria-label...

FireFox NVDA 模式在关闭模式时正在读取标题级别 1 而不是触发元素

我试图实现一个模态，我正在使模态可访问。但是我观察到，当我在 NVDA 中使用 Firefox 关闭模态时，它被读取为标题级别 1 视图模态按钮，但它...

reCAPTCHA 可访问性：画外音不清楚

似乎没有办法在谷歌网站上提交非企业版 reCAPTCHA 的错误报告，帮助文档一直指向我这里，所以这里是： 我们最近做了一些

手风琴未通过可访问性检查

我有一个使用 van11y-accessible-accordion-aria 渲染的手风琴 标记输出为： 我有一个使用 van11y-accessible-accordion-aria 渲染的手风琴 标记输出为： <div className="c-accordion__items js-accordion accordion" data-accordion-cool-selectors="1" aria-multiselectable="true" role="tablist" id="z3j2diubs8r" data-hashaccordion-id="3o3nlqickh"> <!-- note role="tablist" above --> <div className="c-accordion__item"> <h2 className="c-accordion__title accordion__title"> <button className="js-accordion__header accordion__header" role="tab" id="accordionz3j2diubs8r_tab1" aria-controls="accordionz3j2diubs8r_panel1" aria-selected="false" type="button" data-hashaccordion-id="3o3nlqickh" aria-expanded="false"> <!-- note role="tab" above --> The Why </button> </h2> <div className="c-accordion__item-components js-accordion__panel accordion__panel" role="tabpanel" aria-labelledby="accordionz3j2diubs8r_tab1" id="accordionz3j2diubs8r_panel1" data-hashaccordion-id="3o3nlqickh" aria-hidden="true"> <div className="c-accordion__item-content"> <p>Duis vel nibh at velit scelerisque suscipit. Donec vitae sapien ut libero venenatis faucibus. Quisque ut nisi. Ut non enim eleifend felis pretium feugiat. Nulla sit amet est. </p> </div> </div> </div> </div> 当我在 Chrome 中使用 Lighthouse 测试它的可访问性时，我收到了这些消息 具有 ARIA [角色] 的元素需要子元素包含特定的 [角色] 缺少部分或全部所需的子元素。 某些 ARIA 父角色必须包含特定的子角色才能执行其预期的辅助功能。了解更多。 [role]s 不包含在它们所需的父元素中 某些 ARIA 子角色必须包含在特定的父角色中才能正确执行其预期的辅助功能。了解更多。 了解更多链接转到 https://web.dev/aria-required-children 下面显示的是他们建议的代码示例。 ...这意味着有role="tablist"作为父母，然后role="tab"为孩子。 在我发布在这个问题上的代码中，与 https://web.dev/aria-required-children 中的示例相比，我似乎有正确的标记 所以我不知道为什么这没有通过可访问性检查。 role="tab" 必须是 role="tablist" 元素的直接后代（或包含在没有语义意义的元素中）。公平地说，这在 WAI-ARIA 规范中确实不清楚，但我自己之前遇到过这个问题。 （您可以使用 aria-owns 进行关联，但如果选项卡位于 tablist 元素之外，则更多） 因为你的<button>被包裹在<h2>中，这打破了模式。 我已经对其进行了测试，它似乎可以在 JAWS 和 NVDA 中工作，但为了安全起见（因为有大量的屏幕阅读器，其中一些可能不喜欢你的实现）我会做一个小调整。 删除 <h2> 周围的 <button> 是一个选项，可能是我推荐的选项。无论如何，在小部件上有多个 <h2> 元素没有多大意义，您应该在为该部分创建的选项卡上方使用标题。 第二个选项是使 <h2> 功能像一个按钮，但这意味着添加您自己的事件处理程序、焦点指示器和 tabindex="0" 以使其可聚焦。这样您就可以将 role="tab" 移动到 <h2> 本身，这会删除语义但保留在屏幕阅读器中导航到它的能力。 我个人不喜欢第二种选择，但我明白为什么有些人会选择这样做。 我建议的另一件事是将tabs和tabpanel放在<ul>和<li>中。 对于不支持tablist的屏幕阅读器，这意味着用户仍然会收到“3个选项中的1个”等的通知。因此更容易理解他们有选项。 还建议每个 tabpanel 都有一个 tabindex="0" 以在选择选项卡后帮助导航。这是鼓励使非交互式元素可聚焦的非常罕见的情况之一。 您可能会发现 此 W3 选项卡最佳实践页面 很有用。 我有类似的问题， 我在桌面上的谷歌速度、可访问性上发现了它 https://pagespeed.web.dev/analysis/https-www-antena24-ro/3lwpxopnlp?form_factor=desktop “要求子元素包含特定元素 [角色] 的 ARIA 角色 [角色] 的元素缺少一个或所有必需的子元素。” “列表元素（）不包含在父元素中，或者。” Web siteul este aici <?php defined( 'ABSPATH' ) || exit; // Exit if accessed directly // Header Layout $header_layout = tie_get_option( 'header_layout', 3 ); if( tie_get_option( 'main_nav' ) || $header_layout == 1 || $header_layout == 4 ): $main_menu_class = 'main-nav header-nav'; // Live Search skin $live_search_data_skin = ''; if( tie_get_option( 'main-nav-components_search' ) && tie_get_option( 'main-nav-components_live_search' ) ){ $main_menu_class .= ' live-search-parent'; $live_search_data_skin = 'data-skin="search-in-main-nav"'; } // Header Layout $logo_width = ''; $line_height = ''; if( $header_layout == 1 || $header_layout == 4 ){ $logo_args = tie_logo_args(); extract( $logo_args ); $logo_margin_top = ! empty( $logo_margin_top ) ? $logo_margin_top : 20; // Default value in the CSS file $logo_margin_bottom = ! empty( $logo_margin_bottom ) ? $logo_margin_bottom : 20; // Default value in the CSS file $logo_width = ( $logo_type == 'logo' ) ? 'style="width:' . intval( $logo_width ). 'px"' : ''; $logo_height = ( $logo_type == 'logo' ) ? $logo_height : 49; $line_height = 'style="line-height:' . intval( $logo_height + $logo_margin_top + $logo_margin_bottom ). 'px"'; } ?> <div class="main-nav-wrapper"> <nav id="main-nav" <?php echo ( $live_search_data_skin ); ?> class="<?php echo esc_attr( $main_menu_class ) ?>" <?php echo ( $line_height ) ?> aria-label="<?php esc_html_e( 'Primary Navigation', TIELABS_TEXTDOMAIN ); ?>"> <div class="container"> <div class="main-menu-wrapper"> <?php if( $header_layout == 1 || $header_layout == 4 ){ do_action( 'TieLabs/Logo/before' ); ?> <div class="header-layout-1-logo" <?php echo ( $logo_width ) ?>> <?php tie_logo(); ?> </div> <?php do_action( 'TieLabs/Logo/after' ); } ?> <div id="menu-components-wrap"> <?php // Sticky Menu Logo tie_sticky_logo(); ?> <div class="main-menu main-menu-wrap tie-alignleft"> <?php $custom_menu = tie_get_object_option( false, 'cat_menu', 'tie_menu' ); $menu_args = array( 'menu' => $custom_menu, 'container_id' => 'main-nav-menu', 'container_class' => 'main-menu header-menu', 'theme_location' => 'primary', 'fallback_cb' => false, 'items_wrap' => '<ul id="%1$s" class="%2$s" role="menubar">%3$s</ul>', ); if( ! tie_get_option( 'disable_mega_menu' ) ){ $menu_args['walker'] = new TIELABS_MEGA_MENU(); } wp_nav_menu( $menu_args ); ?> </div> <?php do_action( 'TieLabs/after_main_menu' ); // Get components template TIELABS_HELPER::get_template_part( 'templates/header/components', '', array( 'components_id' => 'main-nav' ) ); do_action( 'TieLabs/after_main_components' ); ?> </div> </div> </div> </nav> </div> <?php endif; ?>

可打印表格的无障碍结构

这个问题专门针对可访问性。我有一个表单，提交后，用户可以查看和打印。因为它必须在打印时看起来不错，所以我不只是...

Jetpack Compose 中的 StackOverflowError for Android Oreo 的辅助功能崩溃

我们看到 Android Oreo StackOverflowError 在 crashlytics 中崩溃，但仅适用于 Android 8 (Oreo) 设备。它用于 Jetpack Compose 中的辅助功能。我无法理解这一点。我没有看到任何对象...

将辅助功能焦点设置到 UIBarButtonItem

我在我的导航控制器上呈现一个视图，一旦它关闭，我应该将可访问性焦点移回右侧导航栏按钮。 不幸的是，它似乎不起作用

可访问地显示提交的表单数据

我需要在提交后向用户显示表单数据。我在下面的网站上找到了与我正在寻找的东西类似的东西。他们在“模式预览”部分有一个示例，

reCAPTCHA 未满足 WCAG 2.0 对比度要求

似乎没有办法在谷歌网站上提交非企业版 reCAPTCHA 的错误报告，帮助文档一直指向我这里，所以这里是： 我们最近做了一些

React Native：VoiceOver 焦点和屏幕键盘问题 [关闭]

我有一个 React Native 应用程序，注册屏幕有四个编辑文本字段和一个注册按钮。在第一个编辑文本字段（名称）中键入并向右滑动后，VoiceOver 焦点不会移动到 ...

在 <h1> 渲染时重置焦点

当一个新的页面标题呈现时，我想重置该页面上的焦点，这样点击 将导致浏览器转到此主页面标题之后的可聚焦/可标记元素。

如何修改 NGX Bootstrap 轮播指示器以提高可访问性？

我正在使用“ngx-bootstrap”：“^3.1.3”，轮播组件。我想让我的网站更便于残障人士访问。不幸的是我找不到修改幻灯片指示器的方法......

显示：没有破坏 chrome 上的表格可访问性

我有一张用扩展器组件包裹的桌子。默认情况下展开器是折叠的，因此使用 CSS display:none 隐藏其中的表格。单击扩展器图标时，窗格 e...

VIM 上的辅助功能 - 是否可以在动作上播放声音？

我是视力障碍者（法定盲人，但我仍然可以看到一点），想知道在 VIM 中执行某些操作时是否可以播放声音，所以我不需要移动

为什么阻塞线程导致浮窗打不开？

MyAccessibilityService类：AccessibilityService（）{ 覆盖乐趣 onServiceConnected() { super.onServiceConnected() windowManager = getSystemService(Context.WINDOW_SERVICE) 作为 WindowMa...

sr-only 中的链接扰乱了有视觉的键盘用户的焦点顺序

我正在处理一个浮动图表，其中包含 SVG 中的多个可点击链接。计划是使用 对屏幕阅读器隐藏 SVG，并在下面进行描述......

如何以编程方式启用“网页的简化视图”设置

我需要在辅助功能设置中启用“网页的简化视图”设置。有什么办法可以做到这一点？您的帮助将不胜感激。快乐编码。

此视频元素没有允许计算可访问名称值的机制

我有以下代码，它是在 AEM 中呈现的，但无法理解到底需要更正什么才能解决此可访问性报告错误： “这个视频元素没有