Make WordPress Core


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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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.