Changeset 44905 for trunk/src/wp-admin/credits.php

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:

• trunk/src/wp-admin/credits.php (modified) (2 diffs)

trunk/src/wp-admin/credits.php

@@ -25 +25 @@
 <div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
 
-<h2 class="nav-tab-wrapper wp-clearfix">
+<nav class="nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
     <a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
     <a href="credits.php" class="nav-tab nav-tab-active"><?php _e( 'Credits' ); ?></a>
     <a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
     <a href="freedoms.php?privacy-notice" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
-</h2>
+</nav>
 
 <div class="about-wrap-content">
@@ -73 +73 @@
         }
 
-        echo '<h3 class="wp-people-group">' . esc_html( $title ) . "</h3>\n";
+        echo '<h2 class="wp-people-group">' . esc_html( $title ) . "</h2>\n";
     }