WordPress.org
Get WordPress

Make WordPress Core

Changeset 44905


Ignore:
Timestamp:
03/15/2019 02:53:18 PM (6 years ago)
Author:
afercia
Message:

Accessibility: Improve the semantics of "tabs" that are not real ARIA tabs.

Some "visual tabs" in the WordPress admin used links wrapped in a h2 heading. While these tabs look like ARIA tabs, they're just navigation menus and should be marked-up as such to be correctly exposed to assistive technologies.

  • changes the wrapping <h2> to a <nav> element: worth reminding <nav> elements also define ARIA landmarks
  • adds an aria-label to the <nav> elements so they can be distinguished from other <nav> elements in the page
  • adjusts the headings level in the Credits page

Props audrasjb, afercia.
Fixes #43398.

Location:
trunk/src/wp-admin
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/about.php

    r44769 r44905  
    2828        <div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
    2929
    30         <h2 class="nav-tab-wrapper wp-clearfix">
     30        <nav class="nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
    3131            <a href="about.php" class="nav-tab nav-tab-active"><?php _e( 'What&#8217;s New' ); ?></a>
    3232            <a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
    3333            <a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
    3434            <a href="freedoms.php?privacy-notice" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
    35         </h2>
     35        </nav>
    3636
    3737        <h2 class="feature-section-header"><?php _e( 'A Little Better Every Day' ); ?></h2>

  • trunk/src/wp-admin/credits.php

    r44562 r44905  
    2525<div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
    2626
    27 <h2 class="nav-tab-wrapper wp-clearfix">
     27<nav class="nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
    2828    <a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
    2929    <a href="credits.php" class="nav-tab nav-tab-active"><?php _e( 'Credits' ); ?></a>
    3030    <a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
    3131    <a href="freedoms.php?privacy-notice" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
    32 </h2>
     32</nav>
    3333
    3434<div class="about-wrap-content">
    … …  
    7373        }
    7474
    75         echo '<h3 class="wp-people-group">' . esc_html( $title ) . "</h3>\n";
     75        echo '<h2 class="wp-people-group">' . esc_html( $title ) . "</h2>\n";
    7676    }
    7777

  • trunk/src/wp-admin/css/about.css

    r44791 r44905  
    402402/* Credits */
    403403
    404 .about-wrap h3.wp-people-group {
     404.about-wrap h2.wp-people-group {
    405405    margin: 2.6em 0 1.33em;
    406406    padding: 0;
    407407    font-size: 16px;
    408408    line-height: inherit;
     409    font-weight: 600;
     410    text-align: left;
    409411}
    410412

  • trunk/src/wp-admin/freedoms.php

    r44264 r44905  
    3535<div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
    3636
    37 <h2 class="nav-tab-wrapper wp-clearfix">
     37<nav class="nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
    3838    <a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
    3939    <a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
    4040    <a href="freedoms.php" class="nav-tab<?php echo $freedoms_class; ?>"><?php _e( 'Freedoms' ); ?></a>
    4141    <a href="freedoms.php?privacy-notice" class="nav-tab<?php echo $privacy_class; ?>"><?php _e( 'Privacy' ); ?></a>
    42 </h2>
     42</nav>
    4343
    4444<?php if ( $is_privacy_notice ) : ?>

  • trunk/src/wp-admin/includes/ms.php

    r44574 r44905  
    11311131
    11321132    // All done!
    1133     echo '<h2 class="nav-tab-wrapper wp-clearfix">';
     1133    echo '<nav class="nav-tab-wrapper wp-clearfix" aria-label="' . esc_attr__( 'Secondary menu' ) . '">';
    11341134    echo implode( '', $screen_links );
    1135     echo '</h2>';
     1135    echo '</nav>';
    11361136}
    11371137

  • trunk/src/wp-admin/nav-menus.php

    r44685 r44905  
    628628    <hr class="wp-header-end">
    629629
    630     <h2 class="nav-tab-wrapper wp-clearfix">
     630    <nav class="nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
    631631        <a href="<?php echo admin_url( 'nav-menus.php' ); ?>" class="nav-tab<?php echo $nav_tab_active_class; ?>"><?php esc_html_e( 'Edit Menus' ); ?></a>
    632632        <?php
    … …  
    641641        }
    642642        ?>
    643     </h2>
     643    </nav>
    644644    <?php
    645645    foreach ( $messages as $message ) :
Note: See TracChangeset for help on using the changeset viewer.