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

Question

我有一个使用 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

中的示例相比，我似乎有正确的标记

所以我不知道为什么这没有通过可访问性检查。

Answer 1

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 选项卡最佳实践页面 很有用。

Answer 2

我有类似的问题， 我在桌面上的谷歌速度、可访问性上发现了它 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; ?>