如何修复灯塔“链接没有一个明显的名称”

For accessibility reasons (required for screen readers) links must contain a text or have description in aria-label attribute. In many use cases like yours you don't want to add any text in a link, but instead use as image or any graphic element wrapper.

Fix it by adding aria-label="Twitter" to your a element, like

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

If want to implement this in react app then, We need to add aria-label property to <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>

For SlickNav The solution is quite simple. Just add title to the element of the Javascript file which has aria-haspopup="true" and tabindex="0" attribute. Add title like title="Anything" in above-mentioned line. It will solve the problem. Working example is Oceanspace

For other similar issues you have to add title attribute to the respective anchor element