Skip to content

Commit

Permalink
2024 Theme: Improve aria labels for learning pathway 'See all' links
Browse files Browse the repository at this point in the history 
It is best practice to have the visible text label at the start of the accessible name. This adds speech activation, improving the likelihood that a voice activation technology will activate the right link or set of links. It is better if there is also visible disambiguation so that voice command users are able to distinguish more easily which link they are activating.

Fixes #2771
  • Loading branch information
@adamwoodnz
adamwoodnz committed Jul 25, 2024
1 parent f6703c9 commit a9507e7
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 9 deletions.
12 changes: 6 additions & 6 deletions wp-content/themes/pub/wporg-learn-2024/functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,34 +203,34 @@ function get_learning_pathway_level_content( $learning_pathway ) {
'beginner' => array(
'title' => __( 'Beginner WordPress users', 'wporg-learn' ),
'description' => __( 'You’re new to WordPress, or building websites, and want the essentials.', 'wporg-learn' ),
'see_all_aria_label' => 'Beginner WordPress users: See all learning pathways',
'see_all_aria_label' => 'See all beginner WordPress user learning pathways',
),
'intermediate' => array(
'title' => __( 'Intermediate WordPress users', 'wporg-learn' ),
'description' => __( 'You’re comfortable setting up your site and making small changes or you’ve already completed the Beginner course.', 'wporg-learn' ),
'see_all_aria_label' => 'Intermediate WordPress users: See all learning pathways',
'see_all_aria_label' => 'See all intermediate WordPress user learning pathways',
),
'advanced' => array(
'title' => __( 'Advanced WordPress users', 'wporg-learn' ),
'description' => __( 'You’re confident using multiple plugins and know how to customize a Block theme, or you’ve already completed the Intermediate course.', 'wporg-learn' ),
'see_all_aria_label' => 'Advanced WordPress users: See all learning pathways',
'see_all_aria_label' => 'See all advanced WordPress user learning pathways',
),
),
'developer' => array(
'beginner' => array(
'title' => __( 'Beginner development concepts', 'wporg-learn' ),
'description' => __( 'You’re new to development or have experience using WordPress’s no-code features and want to do more.', 'wporg-learn' ),
'see_all_aria_label' => 'Beginner development concepts: See all learning pathways',
'see_all_aria_label' => 'See all beginner development concepts learning pathways',
),
'intermediate' => array(
'title' => __( 'Intermediate development concepts', 'wporg-learn' ),
'description' => __( 'You’re comfortable writing code and want to extend WordPress with your own plugin or theme.', 'wporg-learn' ),
'see_all_aria_label' => 'Intermediate development concepts: See all learning pathways',
'see_all_aria_label' => 'See all intermediate development concepts learning pathways',
),
'advanced' => array(
'title' => __( 'Advanced development concepts', 'wporg-learn' ),
'description' => __( 'You’re confident in the WordPress development environment or have already built your own plugin or theme.', 'wporg-learn' ),
'see_all_aria_label' => 'Advanced development concepts: See all learning pathways',
'see_all_aria_label' => 'See all advanced development concepts learning pathways',
),
),
);
Expand Down
6 changes: 3 additions & 3 deletions ...ntent/themes/pub/wporg-learn-2024/patterns/taxonomy-learning-pathway-content-sections.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"textColor":"charcoal-4"} -->
<p class="has-charcoal-4-color has-text-color has-link-color">
<a href="<?php echo esc_url( $learning_pathway_url . '?wporg_lesson_level=beginner' ); ?>" aria-label="<?php echo esc_attr( $content['beginner']['see_all_aria_label'] ); ?>"><?php esc_html_e( 'See all', 'wporg-learn' ); ?></a>
<a href="<?php echo esc_url( $learning_pathway_url . '?wporg_lesson_level=beginner' ); ?>" aria-label="<?php echo esc_attr( $content['beginner']['see_all_aria_label'] ); ?>"><?php esc_html_e( 'See all beginner', 'wporg-learn' ); ?></a>
</p>
<!-- /wp:paragraph -->

Expand Down Expand Up @@ -79,7 +79,7 @@

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"textColor":"charcoal-4"} -->
<p class="has-charcoal-4-color has-text-color has-link-color">
<a href="<?php echo esc_url( $learning_pathway_url . '?wporg_lesson_level=intermediate' ); ?>" aria-label="<?php echo esc_attr( $content['intermediate']['see_all_aria_label'] ); ?>"><?php esc_html_e( 'See all', 'wporg-learn' ); ?></a>
<a href="<?php echo esc_url( $learning_pathway_url . '?wporg_lesson_level=intermediate' ); ?>" aria-label="<?php echo esc_attr( $content['intermediate']['see_all_aria_label'] ); ?>"><?php esc_html_e( 'See all intermediate', 'wporg-learn' ); ?></a>
</p>
<!-- /wp:paragraph -->

Expand Down Expand Up @@ -117,7 +117,7 @@

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"textColor":"charcoal-4"} -->
<p class="has-charcoal-4-color has-text-color has-link-color">
<a href="<?php echo esc_url( $learning_pathway_url . '?wporg_lesson_level=advanced' ); ?>" aria-label="<?php echo esc_attr( $content['advanced']['see_all_aria_label'] ); ?>"><?php esc_html_e( 'See all', 'wporg-learn' ); ?></a>
<a href="<?php echo esc_url( $learning_pathway_url . '?wporg_lesson_level=advanced' ); ?>" aria-label="<?php echo esc_attr( $content['advanced']['see_all_aria_label'] ); ?>"><?php esc_html_e( 'See all advanced', 'wporg-learn' ); ?></a>
</p>
<!-- /wp:paragraph -->

Expand Down

0 comments on commit a9507e7

Please sign in to comment.