Guide to resolving the issue of "Links lacking a clear name" in Lighthouse

Lighthouse is recommending that I address my a href text

Here is the HTML code snippet in question:

<a href="https://twitter.com/@some-name-here" target="_blank" rel="noopener" class="social-icon twitter grayscale"></a>

The issue is that I am simply displaying an image inside the anchor tag using a CSS class:

.social-icon.twitter {
  background: url('../images/logo-twitter.png') no-repeat center center;
}

I cannot use <a....>Twitter</a> because it would disrupt the layout.

I have considered placing a span with hidden text inside the a tag, like this: 

<a....><span class="hide">Twitter</span></a>
, but I am curious if there is a better solution?

Do you have any recommendations for this situation?

htmlcsslighthouse

Answer №1

To ensure accessibility for screen readers, it is necessary for links to either contain text within them or have a description in the aria-label attribute. In certain situations such as this, where you do not want visible text within the link, but rather use an image or graphic element as a wrapper, you can resolve this by including aria-label="Twitter" in your a element, like so:

<a href="https://twitter.com/@some-name-here" aria-label="Twitter" target="_blank" rel="noopener" class="social-icon twitter grayscale"></a>

Answer №2

To incorporate this into a react app, it is necessary to include the aria-label attribute in the <a> tag.

Before:

<a href={`https://${ this.props.info }`} target="_blank" rel="noopener noreferrer">
   <i className="fa fa-circle fa-stack-2x"></i>
   <i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>

After:

<a href={`https://${ this.props.info }`} aria-label={`${ this.props.name }`} target="_blank" rel="noopener noreferrer">
   <i className="fa fa-circle fa-stack-2x"></i>
   <i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>

Answer №3

Need help with SlickNav? Here's a simple solution: just include a title attribute in the JavaScript file where aria-haspopup="true" and tabindex="0" attributes are present. Insert title="Anything" in the specified line mentioned above, and the issue will be resolved. Check out a working example at Oceanspace

If you encounter similar problems, remember to add a title attribute to the corresponding anchor element.

https://i.stack.imgur.com/z3v2Y.jpg

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Embed an audio file onto a webpage

Is there a way to add an audio file to my website if I only have the .mp3 version and not the .ogg one? When I try to play the audio, it doesn't work. Can someone help me with this issue? Here is the code I am currently using: <audio controls auto ...

htmlaudioogg

Placing a pair of buttons on the border of a div container with the help of the bootstrap grid

Could you please assist me in making these two buttons stick to the edge of the div using bootstrap grid? If possible, could you also provide some explanation? I am currently trying to grasp how bootstrap grid works... Here is my progress so far: https:/ ...

htmlcssbootstrap-4bootstrap-grid

Electron fails to display images in the compiled version

I'm currently troubleshooting an issue related to displaying images using CSS in my electron project. In the latest version of the application, the images are not showing up when linked from a CSS file. However, in a previous version, the images disp ...

javascripthtmlcsselectron

Error encountered on Facebook Like button: The large button is failing to show the total number of likes received

Despite functioning flawlessly for months, the large Facebook Like button has suddenly stopped showing the number of "Likes". Strangely, the compact version is still working fine, but the larger button is concealing the count. I am using a Mac and have obs ...

cssfacebook-like

How can I style the inner HTML text of an element without altering the style of its subelements? (CSS Selector)

I created an html structure that looks like this: <p> This is some test inside the p tag <div class="some-class"> <div class="sub-div-class"> <i title="title test" data-toggle="tooltip" class="some-icon-class" data-ori ...

htmlcssdomcss-selectorsstyles

Stop images from flipping while CSS animation is in progress

I've been developing a rock paper scissors game where two images shake to mimic the hand motions of the game when a button is clicked. However, I'm facing an issue where one of the images flips horizontally during the animation and then flips bac ...

javascripthtmlcss

Perform a function on Angular 5

In my database, there is a table named settings. I have 2 backend endpoints: one for getting settings and another for updating settings. Now I am working on creating an Angular window to edit this table. I've set up an Angular Service to retrieve va ...

htmlangulartypescriptfrontend

Experience interactive video playback by seamlessly transitioning a webpage video into a pop-up when clicking on an

I want to have a video play as a pop-up when the user clicks a play button, while also fading out the background of the page. It should be similar to the way it works on this website when you click to watch a video. How can I achieve this? <div class=" ...

javascripthtmlcss

Ordering styles in Material UI

I've spent countless hours customizing this element to perfection, but the more I work on it, the more of a headache it gives me. The element in question is an outlined TextField, and my focus has been on styling its label and border. Initially, I th ...

javascripthtmlcssreactjsmaterial-ui

Creating a functional dropdown form in Ruby On Rails: A Step-by-Step Guide

Having an issue with implementing a dropdown form in the navigation bar of my Rails application. The problem arises randomly - sometimes it works smoothly, while other times I have to refresh the page for it to function properly. The Rails version being u ...

javascriptjqueryhtmlruby-on-railsruby

Direct users according to their browser language (excluding php)

My site is going to have content in 3 languages, with French set as the default (fr). Here's how the structure of the website looks: Root directory (important note: no php files, just plain html) /fr/ Index.html About-us.html Contact.htm ...

html.htaccessredirect

"Combining JSON, JavaScript, and HTML for dynamic web development

I am a junior computer programmer facing challenges with our JSON project. The objective is to store an object in local storage, but my HTML and JS code are not working as intended. It seems like nothing happens at all. Any suggestions or feedback would ...

javascripthtmljson

Implementing CSS keyframes when a specified PHP condition is satisfied

I am looking to implement an opening animation on my website that should only play when a user visits the site for the first time. I want to avoid displaying the animation every time the page is reloaded, so it should only run if a cookie indicating the us ...

javascriptphpjqueryhtmlcss

Can a different div or HTML element be used in place of the text "Hello World"?

<body onload="myfunction('target')"><div id="target"> "Hey there!" </div></body> Can we replace the text "Hey there!" with another HTML element or div? This is currently a left-to-right marquee text. <script language= ...

javascriptjqueryhtmlcss

Encountered a problem while attempting to create two separate div elements. The template root is designed to have only one element. This issue

<template> <div class="footerpart-container"> <div class="general-container"> dadada </div> <div class="legal-container"> dadad </div> <div class="helpsupport-container"> dada ...

htmlcssvue.js

Ensure that the JavaScript is loaded prior to refreshing the webpage

Below is the HTML code snippet: <script src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap&v=quarterly" defer></script> <script src="{% static '/javascript/maplanguage.js' %}">< ...

javascripthtmljquerydjangogoogle-maps

Encountering Error 500 with Jquery Min.Map File

ERROR: GET request to http://domain.com/assets/js/jquery-1.10.2.min.map returned a 500 Internal Server Error Can anyone help me figure out what's causing this error? I checked the log files in /var/log/error but couldn't find any information. T ...

javascriptphpjqueryhtmltwitter-bootstrap

Using JSON data to populate the jQuery UI Datepicker

Is it possible to populate this jQuery UI datepicker calendar with data from a JSON file containing all non-working days for the years 2017 and 2018? P.S. return [!(month == 8 && day == 27), 'highlight', highlight]; - This example demons ...

javascriptjqueryhtmlcss

Positioning Data Labels Outside of Pie or Doughnut Charts in Chart.js

I am currently working on a large-scale project and I am in need of a way to position the labels outside of pie charts or doughnut charts. I came across a plugin called outerLabels on GitHub which seems to be the perfect solution for what I need, but I am ...

cssangularchart.jspie-chart

Create CSS styles that are responsive to different screen sizes and

What is the best approach to ensure that these styles are responsive on any mobile device? nav ul ul { display: none; } nav ul li:hover > ul { display: block; } nav ul { background: #0066cc; background: linear-gradient(top, #0066cc 0%, #bbbbbb 10 ...

htmlcssmobileresponsive-design