Core Widgets: new aria-current attribute in WordPress 5.3

When a page is created and users view it, its name appears in several widgets, however there is no visual or semantic indication that this link relates to the current page.

Since it’s possible for authors to create multiple posts or taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. terms with the same name, the lack of indication may cause confusion for users with cognitive disabilities and screen reader users.

Whenever the current page is reflected in a menu on that page, the applicable link should have aria-current="page" attribute to add an indication for users. It is also recommended to use this attribute to add a distinctive visual style to separate the applicable link from other links.

For reference, see the relevant standards in Web Content AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). ( Guidelines 2.0:

Concerned coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. widgets:

  • Recent Posts
  • Navigation MenuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site.
  • Pages
  • CategoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.
  • Archives

WordPress 5.3 will programmatically add aria-current="page" attributes to those widgets. For reference, see #47094.

Theme authors are encouraged to add a distinctive visual style to those links, using the following CSSCSS Cascading Style Sheets. declaration:

a[aria-current] {
    /* Your CSS styles for current link */

#5-3, #accessibility, #accessibility-docs, #dev-notes