Bessere Accessibility für WordPress Pagination

Immer mal wieder durchläuft unsere Website die eine oder andere Prüfung, vor allem auf Accessibility. Eigentlich wollte ich heute etwas über A11y-Overlays schreiben (Plugins, die deine Website accessible machen sollen / wollen) und suchte nach ein paar Beispielen. Dabei fand ich Tota11y WP, ein Helferplugin, das es WordPress-Entwicklern erleichtert, ihre Website / ihr Theme oder Plugin auf Accessibility zu prüfen.

Bei Archiv-Seiten mit Paginierung bekam ich bei der Linktext-Prüfung folgende Meldung:

The text „1“ is unclear without context and may be confusing to screen readers. Consider rearranging the <a></a> tags or including special screen reader text.

Gemeint war, aus diesem Snippet:

<nav class="wp-block-query-pagination is-layout-flex wp-block-query-pagination-is-layout-flex" aria-label="Pagination">
	<div class="wp-block-query-pagination-numbers">
<span aria-current="page" class="page-numbers current">1</span>
<a class="page-numbers" href="https://webentwicklerin.at/blog/page/2/">2</a>
<a class="page-numbers" href="https://webentwicklerin.at/blog/page/3/">3</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="https://webentwicklerin.at/blog/page/49/">49</a></div>
		<a href="https://webentwicklerin.at/blog/page/2/" class="wp-block-query-pagination-next">→</a>
	</nav>

soll ein Output entstehen wie dieser (in etwa):

<nav class="wp-block-query-pagination is-content-justification-center is-layout-flex wp-container-core-query-pagination-is-layout-a89b3969 wp-block-query-pagination-is-layout-flex" aria-label="Seitennummerierung"><div class="wp-block-query-pagination-numbers"><span aria-current="page" class="page-numbers current">1</span> <a class="page-numbers" href="https://webentwicklerin.at/blog/page/2/" aria-label="Blog-Seitennummerierung, Seite 2">2</a> <a class="page-numbers" href="https://webentwicklerin.at/blog/page/3/" aria-label="Blog-Seitennummerierung, Seite 3">3</a> <span class="page-numbers dots">…</span> <a class="page-numbers" href="https://webentwicklerin.at/blog/page/51/" aria-label="Blog-Seitennummerierung, Seite 51">51</a></div> <a href="https://webentwicklerin.at/blog/page/2/" class="wp-block-query-pagination-next" aria-label="weiter"><span class="wp-block-query-pagination-next-arrow is-arrow-arrow" aria-hidden="true">→</span></a></nav>

Ob überhaupt und wie zingend die Maßnahme tatsächlich ist, sei dahingestellt. Ich bin grundsätzlich geneigt, Accessibility-Empfehlungen nachzukommen. Da ich mein Theme selbst entwickelt habe und weiter entwickle, ist das nicht wirklich ein großes Thema.

Und so wurde die Accessibility in der Pagination (Block!) umgesetzt

/**
 * Build a contextual label prefix for pagination accessibility text.
 *
 * @since 2.0.0
 *
 * @return string
 */
function webentwicklerin_get_pagination_context_label()
{
	if (is_home() || is_front_page()) {
		return __('Blog pagination', 'webentwicklerin');
	}

	if (is_category()) {
		return __('Category pagination', 'webentwicklerin');
	}

	if (is_tag()) {
		return __('Tag pagination', 'webentwicklerin');
	}

	if (is_tax()) {
		return __('Taxonomy pagination', 'webentwicklerin');
	}

	if (is_search()) {
		return __('Search results pagination', 'webentwicklerin');
	}

	if (is_post_type_archive()) {
		return __('Archive pagination', 'webentwicklerin');
	}

	if (is_archive()) {
		return __('Archive pagination', 'webentwicklerin');
	}

	return __('Pagination', 'webentwicklerin');
}

/**
 * Add an aria-label to the first link in rendered block markup.
 *
 * @since 2.0.0
 *
 * @param string $block_content Rendered block HTML.
 * @param string $label         Accessible label text.
 * @return string
 */
function webentwicklerin_add_aria_label_to_first_link($block_content, $label)
{
	if (false !== stripos($block_content, 'aria-label=')) {
		return $block_content;
	}

	return preg_replace(
		'/<a\b(?![^>]*\baria-label=)([^>]*)>/i',
		'<a$1 aria-label="' . esc_attr($label) . '">',
		$block_content,
		1
	);
}

/**
 * Improve accessibility labels for Query Loop pagination links.
 *
 * Keeps visible pagination unchanged and adds contextual aria-labels only.
 *
 * @since 2.0.0
 */
add_filter(
	'render_block_core/query-pagination-previous',
	function ($block_content) {
		$context = webentwicklerin_get_pagination_context_label();

		return webentwicklerin_add_aria_label_to_first_link(
			$block_content,
			sprintf(
				/* translators: %s: Pagination context, e.g. Blog pagination. */
				__('%s, previous page', 'webentwicklerin'),
				$context
			)
		);
	},
	10,
	1
);

add_filter(
	'render_block_core/query-pagination-next',
	function ($block_content) {
		$context = webentwicklerin_get_pagination_context_label();

		return webentwicklerin_add_aria_label_to_first_link(
			$block_content,
			sprintf(
				/* translators: %s: Pagination context, e.g. Blog pagination. */
				__('%s, next page', 'webentwicklerin'),
				$context
			)
		);
	},
	10,
	1
);

add_filter(
	'render_block_core/query-pagination-numbers',
	function ($block_content) {
		$context = webentwicklerin_get_pagination_context_label();

		return preg_replace_callback(
			'/<a\b([^>]*\bclass=(["\'])[^"\']*\bpage-numbers\b[^"\']*\2[^>]*)>(\d+)<\/a>/i',
			function ($matches) use ($context) {
				$attributes = $matches[1];
				$page_number = $matches[3];

				if (false !== stripos($attributes, 'aria-label=')) {
					return $matches[0];
				}

				return sprintf(
					'<a%s aria-label="%s">%s</a>',
					$attributes,
					esc_attr(
						sprintf(
							/* translators: 1: Pagination context, 2: Page number. */
							__('%1$s, page %2$s', 'webentwicklerin'),
							$context,
							$page_number
						)
					),
					$page_number
				);
			},
			$block_content
		);
	},
	10,
	1
);