WordPress.org

Make WordPress Core

Opened 8 months ago

Last modified 10 days ago

#48170 accepted enhancement

Switch link list widgets to nav blocks

Reported by: joedolson Owned by: audrasjb
Milestone: 5.5 Priority: normal
Severity: normal Version:
Component: Widgets Keywords: has-patch needs-refresh
Focuses: accessibility Cc:

Description

Functionally, most of the widgets used in WordPress (archive links, categories list, tag cloud, recent posts, etc.) are nav blocks. Semantically, it would be sensible to mark them all as such and use aria-labelledby or aria-label to associate their context labels.

As a counter argument, adding the <nav> wrapper to these widgets is likely to have a) design consequences for themes and b) result in sites with large numbers of nav landmarks.

See thread: https://twitter.com/SaraSoueidan/status/1178015124076077056

There are arguments both for and against; it's something we should consider.

Attachments (2)

48170.diff (9.5 KB) - added by simonjanin 4 weeks ago.
48170.2.diff (11.3 KB) - added by simonjanin 10 days ago.

Download all attachments as: .zip

Change History (11)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


7 months ago

#2 @afercia
7 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.4

Worth also reminding widgets are wrapped in an aside element, which is not ideal. Exploring better semantic markup would be great.

#3 @audrasjb
5 months ago

  • Owner changed from joedolson to audrasjb
  • Status changed from assigned to accepted

Hi @afercia @joedolson

Most of these widgets are here for years, it would be very hard (= frankly impossible) to keep backward compatibility with all themes. I'd propose two alternative solutions for this issue:

  • Keep the current markup but adding role="navigation" that doesn't hurt and it's still a good first step.
  • Switch to <nav> for themes that declare HTML5 support for widgets.

I'd vote for the option 2. We just have to add a new option to the HTML5 features list.

For reference: https://developer.wordpress.org/reference/functions/add_theme_support/#html5

Cheers,
Jb

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


4 months ago

#5 @audrasjb
4 months ago

  • Milestone changed from 5.4 to 5.5

Moving to 5.5, as WP 5.4 beta 1 is in a couple of days.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 weeks ago

@simonjanin
4 weeks ago

#7 @simonjanin
4 weeks ago

  • Keywords has-patch added; needs-patch removed

I add the nav tag for widget menu, widget archives, widget categories, widget meta, widget pages, widget recent comments, widget recent posts and widget RSS by testing if add_theme_support function exists and get_theme_support( 'html5' ) exists.
With this nav tag, i add role navigation and an aria-label depending on the context.

#8 @audrasjb
4 weeks ago

  • Keywords needs-refresh added

Thanks for the patch @simonjanin, it looks like a pretty good basis.

Few considerations:

For reference, here is the current declaration themes can use to declare HTML5 compatibility/support:

add_theme_support( 'html5', array( 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

Theme authors may want to declare HTML5 navigation widgets using this declaration:

add_theme_support( 'html5', array( 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script', 'navigation' ) );

You may want to update your patch to check this just like we currently do in get_search_form() function in Core (see wp-includes/general-template.php).

For example, do something like this:

$format = current_theme_supports( 'html5', 'search-form' ) ? 'html5' : 'xhtml';
/**
 * Filters the HTML format of widgets with navigation links.
 *
 * @since 5.5.0
 *
 * @param string $format The type of markup to use in widgets with navigation links.
 *                       Accepts 'html5', 'xhtml'.
 */
$format = apply_filters( 'navigation_widgets_format', $format );

Then you can check for support using:

if ( 'html5' === $format ) { … }

Cheers,
Jb

@simonjanin
10 days ago

#9 @simonjanin
10 days ago

Thanks @audrasjb for your advice and your indications.
I did what you said.
I upload a new diff file.

Bye,
Simon

Note: See TracTickets for help on using tickets.