[Closed] Accessibility problems: aria-label and screen-reader

Hello,

The strings that you already translated very likely are not the actual strings that you are trying to translate.

The issue with this approach might be that those those HTML attributes are not coded in a way inside Astra, that would allow the registration of the strings for translations.

If I check for this string in Astra, it looks like this:

\astra\inc\compatibility\woocommerce\class-astra-woocommerce.php on line 3355:

$aria_label = $cart_count > 0 ? "View Shopping Cart, {$cart_count} items" : 'View Shopping Cart, empty';

The "Main Menu" string is located at \astra\inc\builder\controllers\class-astra-builder-ui-controller.php on line 222:

<div class="ast-button-wrap">
				<button type="button" class="menu-toggle main-header-menu-toggle ast-mobile-menu-trigger-<?php echo esc_attr( $toggle_btn_style ); ?>" <?php echo apply_filters( 'astra_nav_toggle_data_attrs', '' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> <?php echo esc_attr( $aria_controls ); ?> aria-expanded="false">
					<span class="screen-reader-text">Main Menu</span>
					<span class="mobile-menu-toggle-icon">

As you can see in the above example, the span element with the class "screen-reader-text" is using hard-coded HTML and this is not translatable.

I also find another example for the string "Main Menu" which is translatable and registered and translated on your site, but this seems not to be the string that you are looking for.

It is located inside astra\inc\template-parts.php line 173:

	function astra_masthead_toggle_buttons_primary() {

		$disable_primary_navigation = astra_get_option( 'disable-primary-nav' );
		$custom_header_section      = astra_get_option( 'header-main-rt-section' );
		$display_outside_menu       = astra_get_option( 'header-display-outside-menu' );

		if ( ! $disable_primary_navigation || ( 'none' != $custom_header_section && ! $display_outside_menu ) ) {
			$menu_title          = trim( apply_filters( 'astra_main_menu_toggle_label', astra_get_option( 'header-main-menu-label' ) ) );
			$menu_label_class    = '';
			$screen_reader_title = __( 'Main Menu', 'astra' );
			if ( '' !== $menu_title ) {
				$menu_label_class    = 'ast-menu-label';
				$screen_reader_title = $menu_title;
			}

			$menu_label_class = apply_filters( 'astra_main_menu_toggle_classes', $menu_label_class );
			?>

Now, this last example is coded correctly, but it looks to me as if this is not the string that you are looking for. You seem to look for the string from the prior example, which is hard-coded HTML and not translatable in the way it is coded.

This is a developer topic and is explained here:
https://wpml.org/documentation/support/enabling-text-translation-for-themes-not-compatible-with-wpml/

This means, that to make those strings translatable, the Astra Team would need to adapt their code.

I suggest you first reach out to Astra Support about this matter, please feel free to share my findings and ask if they would consider looking into this, running some tests, and making those HTML attributes translatable.

Take note, that this is not WPML specific - you would run into the same issue with any translation plugin.

If any further assistance from our side will be needed, please let me know.

Best regards
Andreas