In this tutorial, we are going to fix issues like “Links do not have a discernible name” or “Buttons Do Not Have an Accessible Name” in WordPress.
Just like the previous tutorial where we optimized the GeneratePress theme by fixing image dimension issues i.e. Image Elements do not have explicit width and height, we’ll now focus on resolving this specific problem.
This is another common issue you may encounter when testing your website for accessibility and Core Web Vitals in Google Page Speed Insights or other auditing tools.
Fix Links do not have a Discernible Name
Note: For this tutorial, I am using the GeneratePress Theme and if you are using other WordPress themes then you may find similar settings.
According to Google Pagespeed.
Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users.
When you have links on your website that do not have descriptive or meaningful text, it can be confusing for users, especially those who rely on screen readers or other assistive technologies.
This is why it’s important to ensure that all links on your website have a discernible name that accurately describes their purpose or destination.
Steps to Fix Links do not have a Discernible Name
Step 1: Log in to your WordPress.
Step 2: Go to the area where you are getting discernible name issues.
Step 3: Now Add Aria-Label or Link Label to your link or button
For example: Here in Social Media Follow Buttons, I am adding ARIA-LABEL.
Step 4: Hit Update Button
Step 5: Discernible name is solved.
Besides the above step, you can follow additional steps like using descriptive link text, ALT text in image links, etc.
Use Descriptive Link Text
Instead of saying “Learn More” or “Continue Reading,” use words that tell people exactly where the link goes. For example, instead of “Learn More,” you could say “Get 100+ free SEO Tools” or “Find out more about what we offer.”
Use Alt Text while Using Image Links
When using pictures as links, be sure to include alt text that explains what the link is for. Alternatively, you can put the image inside a text link with a descriptive name.
For demonstration purposes, I am going to fix one real-time Links do not have a Discernible Name problem.
Note, that I am using GeneratePress and GenerateBlocks on this website, so you may or may not get similar settings on your website.
Here, the problem is that Links do not have a discernible name on Social Media Buttons.
Fix Buttons Do Not Have an Accessible Name
While I was testing one of my client’s websites in Google Pagespeed, I found that Buttons Do Not Have an Accessible Name so here is the screenshot of that accessibility error.
The accessibility score was around 83 before fixing the issue, the problem was on the mobile version, particularly on the hamburger menu section in the GeneratePress Theme.
After solving the issue, the score directly went to 90, which meets the core web vital score.
Steps to Fix Buttons Do Not Have an Accessible Name
Step 1: Go to your WordPress Dashboard.
Step 2: Go to Appearance > Customize.
Step 3: Go to the Layout Section.
Step 4: Go to Primary Navigation.
Step 5: Add Menu to the Mobile Menu Label
Step 6: Boom, it is fixed.
Conclusion
By following the steps outlined above, you can effectively fix the “Links do not have a discernible name” or “Buttons Do Not Have an Accessible Name” issue in your WordPress website.
Whether you’re using the GeneratePress theme or another WordPress theme, this comprehensive guide will help you optimize your site for core web vitals, ensuring a seamless user experience.
Happy Optimizing!!!
I am using generatepress dan generateblocks. I am experiencing Links do not have a Discernible Name in pagespeed insight result, especially in featured image. I try to follow your steps but I could not find ARIA-LABEL box in advanced tab in block setting.
I do have the same issue, would you tell me how to do it?
Informative Blog Post