I got you.🤝
You added your WordPress site to PageSpeed Insights. It showed the error: “Links do not have a discernible name.” And you are at the right place to fix it.
This problem happens when links don’t have accessible text or labels. This makes it hard for screen readers to understand them.
PageSpeed Insights recommends that our links should be clear, unique, and focusable. This provides a good navigation experience and accessibility.
So let’s dive into the step-by-step process to fix this issue and make your site more accessible.
What Does “Links Do Not Have a Discernible Name” Mean?🤔
First, let’s understand what this error means. A link with no visible name has no text or accessible label.
Screen readers cannot read it out loud to users. This often happens with links that only contain images or icons.
Why Is It Important?🌟
Accessibility isn’t just a buzzword. It ensures that everyone, including people with disabilities, can use and navigate your website. Fixing this issue will make your site easier to use. Ensure that it meets accessibility standards.
Also, the websites that focus on accessibility provide a better user experience. This can boost engagement, reduce bounce rates, and indirectly improve SEO performance.
So we have to address this even for the sake of SEO.
Step-by-Step Guide to Fix the Issue 🛠️
1. Identify the Links without Discernible Name
First, we need to find out the links causing the issue. Here are two ways:
Easy Way: Use tools like WAVE (Web Accessibility Evaluation Tools) or aXe to scan your site for accessibility issues.
WAVE: This is a webpage. You just need to enter the URL of your site/page and it will scan the page and show you the report with all the issues.
aXe: This is a Chrome extension created by Deque Systems. Once you add it to your Chrome, you can check the accessibility of any page at any time. You just need to do the following:
These tools will also help you to identify other accessibility issues and suggest solutions.
2. Add Text to Link
Ensure each link has a readable text. If a link contains only an image, you can add an aria-label attribute to provide a description.
Example:
<a href="https://example.com" aria-label="Visit Example Site">
<img src="example-logo.png" alt="">
</a>3. Use WordPress Block Editor
If you’re using the Gutenberg Block Editor, you can easily add accessible names to links:
- Button Block: Select the block, go to the block settings, and add an aria-label in the “Advanced” section.
- Image Block with Link: Make sure the image has an alt text and add an aria-label to the link if necessary.
Example:
<!-- wp:button {"className":"is-style-primary"} -->
<div class="wp-block-button is-style-primary">
<a class="wp-block-button__link" href="https://example.com" aria-label="Learn more about our services">Learn more</a>
</div>
<!-- /wp:button -->I suggest that whenever you are adding image in your WordPress site, add alternative text and explain what the image is about.
4. Modify Theme and Plugin Files
If the issue is in your theme or a plugin, you may need to manually update the code. Navigate to Appearance > Theme Editor or Plugins > Editor and locate the links.
Example in Theme File:
<a href="<?php echo esc_url(home_url('/')); ?>" aria-label="Home page">
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="Home">
</a>5. Use Accessibility Plugins
Consider installing accessibility-focused plugins that help identify and fix such issues. Some popular options include:
- WP Accessibility: Adds accessibility features and checks.
- Accessibility Checker: Provides detailed reports on your site’s accessibility.
Conclusion👍
By following these steps, you can ensure all your links have discernible names, making your WordPress site more accessible to all users. Regularly check your site for accessibility issues and stay updated with best practices to keep your site user-friendly.
If this article helpful to you in anyway or you need any further help, comment down. I’ll be happy to help:)
