Changeset 48963

Timestamp:

09/09/2020 04:13:17 PM (4 years ago)

Author:

desrosj

Message:

Administration: Add the aria-hidden attribute to admin menu icons.

The admin menu icons are included as a visual element to support the text links. Without the aria-hidden=“true” attribute, they are also exposed to assistive technologies (which can process icon fonts in unpredictable ways).

This change improves the experience for multiple types of assistive technologies, including screen reading and voice control software. With aria-hidden=“true” added, the icons will not be read, and a user can now trigger a click of a top level admin menu item with commands such as “click posts”, or “click plugins”.

Props joedolson, afercia, audrasjb, adriantirusli.
Fixes #51012.

File:

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

trunk/src/wp-admin/menu-header.php

@@ -166 +166 @@
             ) {
                 $admin_is_parent = true;
-                echo "<a href='admin.php?page={$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style>$img</div><div class='wp-menu-name'>$title</div></a>";
+                echo "<a href='admin.php?page={$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style aria-hidden='true'>$img</div><div class='wp-menu-name'>$title</div></a>";
             } else {
-                echo "\n\t<a href='{$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style>$img</div><div class='wp-menu-name'>$title</div></a>";
+                echo "\n\t<a href='{$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style aria-hidden='true'>$img</div><div class='wp-menu-name'>$title</div></a>";
             }
         } elseif ( ! empty( $item[2] ) && current_user_can( $item[1] ) ) {
@@ -185 +185 @@
             ) {
                 $admin_is_parent = true;
-                echo "\n\t<a href='admin.php?page={$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
+                echo "\n\t<a href='admin.php?page={$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style aria-hidden='true'>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
             } else {
-                echo "\n\t<a href='{$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
+                echo "\n\t<a href='{$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style aria-hidden='true'>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
             }
         }